Web Storage全解析

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介:

 Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤。此外,在IE6及以上版本中还可以使用userData Behavior、在Firefox下可以使用globalStorage、在有Flash插件的环境中可以使用Flash Local Storage,但是这几种方式都存在兼容性方面的局限性,因此真正使用起来并不理想。针对以上情况,HTML5中给出了更加理想的解决方案:假如你需要存储复杂的数据则可以使用Web Database,可以像客户端程序一样使用SQL(不过Web Database标准当前正陷于僵局之中,而且目前已经实现的浏览器很有限);假如你需要存储的只是简单的用key/value对即可解决的数据则可以使用Web Storage。 本文主要从各个方面介绍一下Web Storage的具体情况。

sessionStorage与localStorage

  Web Storage实际上由两部分组成:sessionStorage与localStorage。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

为什么选择Web Storage而不是Cookie?

  与Cookie相比,Web Storage存在不少的优势,概括为以下几点:

  1. 存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。

  2. 存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。

  3. 更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,使得数据操作更为简便。

  4. 独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。

兼容性如何?

  接下来的各种测试是在以下浏览器中进行的:IE8、Firefox3.6、Chrome5、Safari4、Opera10,事实证明各个浏览器在API方面的实现基本上一致,存在一定的兼容性问题,但不影响正常的使用。

sessionStorage测试

  本节主要针对sessionStorage的一些特性进行了测试,测试的重点在于各个浏览器对于session的定义以及跨域情况。测试方法很简单:打开页面A,在页面A中写入当前的session数据,然后通过页面A中的链接或按钮使用不同的方式进入下页面B,如果页面B中能够访问到页面

表1 sessionStorage兼容性测试

  原窗口 target=”_blank” window.open ctrl + click 跨域访问
IE8
Firefox3.6 否(null)
Chrome5 否(undefined)
Safari4 否(undefined)
Opera10 否(undefined)

  从表1中可以看出,处于安全性考虑所有浏览器下session数据都是不允许跨域访问的,包括跨子域也是不允许的。其他方面主流浏览器中的实现较为一致。

API测试

  方法包括以下几个:

  setItem(key,value)、removeItem(key)、getItem(key)、clear()、key(index);

  属性包括length、remainingSpace(非标准)。不过存储数据时可以简单的使用localStorage.key=value的方式。

  测试地址为:http://varnow.org/pages/html5/web_storage/local/localStorage.html

  测试结果另人满意,标准中定义的接口在各个浏览器中都已实现,此外IE8下新增了一个非标准的remainingSpace属性,用于获取存储空间中剩余的空间。结果如表2:

表2 API测试

  setItem removeItem getItem clear key length remainingSpace
IE8
Firefox3.6
Chrome5
Safari4
Opera10

  此外关于setItem(key,value)方法中的value类型,理论上可以是任意类型,不过实际上浏览器会调用value的toString方法来获取其字符串值并存储到本地,因此如果是自定义的类型则需要自己定义有意义的toString方法。

事件

  标准的事件为onstorage,当存储空间中的数据发生变化时触发。此外,IE8中新增了一个onstoragecommit事件,当数据写入的时候触发。onstorage事件中的事件对象应该支持以下属性:

The key attribute represents the key being changed.
The oldValue attribute represents the old value of the key being changed.
The newValue attribute represents the new value of the key being changed.
The url attribute represents the address of the document whose key changed.
The storageArea attribute represents the Storage object that was affected.

  对于这一标准的实现,webkit内核的浏览器(Chrome、Safari)以及Opera是完全遵循标准的,IE8则只实现了url,Firefox下则均未实现。

  测试地址为:http://varnow.org/pages/html5/web_storage/local/event.html

  具体结果见表3。

表3 onStorage事件对象属性测试

  key oldValue newValue url storageArea
IE8
Firefox3.6
Chrome5
Safari4
Opera10

  此外,不同的浏览器事件注册的方式以及对象也不一致,具体如表4。

表4 onStorage事件注册对象

  事件注册对象 备注
IE8 document  
Firefox3.6 document 必须使用document.addEventListener注册,否则无效。
Chrome5 window  
Safari4 body  
Opera10 window  

 

缺陷与不足

  Web Storage的缺陷主要集中在其安全性方面,具体体现在以下两点:

  1. 浏览器会为每个域分配独立的存储空间,即脚本在域A中是无法访问到域B中的存储空间的,但是浏览器却不会检查脚本所在的域与当前域是否相同。即在域B中嵌入域A中的脚本依然可以访问域B中的数据。测试地址:http://varnow.org/pages/html5/web_storage/local/corss_domain_js_access.html

  2. 存储在本地的数据未加密而且永远不会过期,极易造成隐私泄漏。也许需要像保存密码一样询问用户是在用私人电脑还是公共电脑来决定是否将数据保存在本地。

跨页面通讯示例

  示例地址:http://varnow.org/pages/html5/web_storage/app/play.html

  玩法很简单:选择 打开多个窗口,页面会自动打开并定位4个新窗口,小球会在多个窗口间运动,在小球运动的过程中可以拖动窗口或者打开新的窗口来控制小球进入新的区域。

  实现原理:每个新打开的窗口会将自己的坐标以及大小写入localStorage,小球在运动到窗口边界时会检测小球将要进入的下一个窗口,如果找到该窗口则将小球坐标写入并通知新窗口接收小球。

 



















本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/743770,如需转载请自行联系原作者

相关文章
|
1月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
107 3
|
1月前
|
运维 负载均衡 安全
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
96 0
|
14天前
|
JSON JavaScript 前端开发
蓝桥杯web组赛题解析和杯赛技巧
本文作者是一位自学前端两年半的大一学生,在第十五届蓝桥杯Web组比赛中获得省一和国三。文章详细解析了比赛题纲,涵盖HTML、CSS、JavaScript、Echarts和Vue等技术要点,并分享了备赛技巧和比赛经验。作者强调了多写代码和解题思路的重要性,同时提供了省赛和国赛的具体流程及注意事项。希望对参赛者有所帮助。
|
20天前
|
安全 前端开发 Java
Web安全进阶:XSS与CSRF攻击防御策略深度解析
【10月更文挑战第26天】Web安全是现代软件开发的重要领域,本文深入探讨了XSS和CSRF两种常见攻击的原理及防御策略。针对XSS,介绍了输入验证与转义、使用CSP、WAF、HTTP-only Cookie和代码审查等方法。对于CSRF,提出了启用CSRF保护、设置CSRF Token、使用HTTPS、二次验证和用户教育等措施。通过这些策略,开发者可以构建更安全的Web应用。
58 4
|
19天前
|
安全 Go PHP
Web安全进阶:XSS与CSRF攻击防御策略深度解析
【10月更文挑战第27天】本文深入解析了Web安全中的XSS和CSRF攻击防御策略。针对XSS,介绍了输入验证与净化、内容安全策略(CSP)和HTTP头部安全配置;针对CSRF,提出了使用CSRF令牌、验证HTTP请求头、限制同源策略和双重提交Cookie等方法,帮助开发者有效保护网站和用户数据安全。
46 2
|
1月前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
53 5
|
2月前
|
SQL 安全 数据库
Python Web开发者必看!SQL注入、XSS、CSRF全面解析,守护你的网站安全!
在Python Web开发中,构建安全应用至关重要。本文通过问答形式,详细解析了三种常见Web安全威胁——SQL注入、XSS和CSRF,并提供了实用的防御策略及示例代码。针对SQL注入,建议使用参数化查询;对于XSS,需对输出进行HTML编码;而防范CSRF,则应利用CSRF令牌。通过这些措施,帮助开发者有效提升应用安全性,确保网站稳定运行。
47 1
|
1月前
|
JSON API 开发者
深入解析Python网络编程与Web开发:urllib、requests和http模块的功能、用法及在构建现代网络应用中的关键作用
深入解析Python网络编程与Web开发:urllib、requests和http模块的功能、用法及在构建现代网络应用中的关键作用
16 0
|
3月前
|
API C# 开发框架
WPF与Web服务集成大揭秘:手把手教你调用RESTful API,客户端与服务器端优劣对比全解析!
【8月更文挑战第31天】在现代软件开发中,WPF 和 Web 服务各具特色。WPF 以其出色的界面展示能力受到欢迎,而 Web 服务则凭借跨平台和易维护性在互联网应用中占有一席之地。本文探讨了 WPF 如何通过 HttpClient 类调用 RESTful API,并展示了基于 ASP.NET Core 的 Web 服务如何实现同样的功能。通过对比分析,揭示了两者各自的优缺点:WPF 客户端直接处理数据,减轻服务器负担,但需处理网络异常;Web 服务则能利用服务器端功能如缓存和权限验证,但可能增加服务器负载。希望本文能帮助开发者根据具体需求选择合适的技术方案。
163 0
|
3月前
|
Java 缓存 数据库连接
揭秘!Struts 2性能翻倍的秘诀:不可思议的优化技巧大公开
【8月更文挑战第31天】《Struts 2性能优化技巧》介绍了提升Struts 2 Web应用响应速度的关键策略,包括减少配置开销、优化Action处理、合理使用拦截器、精简标签库使用、改进数据访问方式、利用缓存机制以及浏览器与网络层面的优化。通过实施这些技巧,如懒加载配置、异步请求处理、高效数据库连接管理和启用GZIP压缩等,可显著提高应用性能,为用户提供更快的体验。性能优化需根据实际场景持续调整。
75 0

推荐镜像

更多