HTML5 Web Storage全解析
作者:Miller 来源:百度泛用户体验 发布时间:2010-06-26 13:06:00
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中能够访问到页面A中的数据则说明浏览器将当前情况的页面A、B视为同一个session。测试的具体结果如表1:
表1 sessionStorage兼容性测试
从表1中可以看出,处于安全性考虑所有浏览器下session数据都是不允许跨域访问的,包括跨子域也是不允许的。其他方面主流浏览器中的实现较为一致。
猜你喜欢
- MySQL的ODBC接口实现是通过安装MyODBC驱动,这个驱动程序是跨平台的。如果在Linux等Unix体系操作系统下使用,需要先安装Io
- 一、HACK以下两种方法几乎能解决现今所有HACK。1, !important 随着IE7对!important的支持, !imp
- 现像如下:站点无法打开,或者打开很慢.HTML可以打开.重新启动或者回收应用程序池可恢复.但过一段时间又会出现日志里会有:ISAPI
- 我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。<div id="
- Div+CSS+JS组和能够实现很多好看的特殊的效果,这里推荐一款可刷新的下拉菜单:下面是js代码部分:<script type=te
- 数据库系统是管理信息系统的核心,基于数据库的联机事务处理(OLTP)以及联机分析处理(OLAP)是银行、企业、政府等部门最为重要的计算机应用
- 用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手,它可以使窗口显得清爽整洁而且富有动感,笔者的几个朋友都想在自己的网页中加入类似的东东,经
- HTML是万维网上发布超文本的通用语言[1]。从1982年Tim Berners-Lee简化SGML建立HTML的原始定义到2001年发布X
- 这个帖子在51js看到的,觉得很有学习意义,看看高手们是怎么做的吧!提问者:infinte急求:正则或算法,JS VBS均可。要求:[1]支
- 今天写了一段CSS,写时突然想到的,写出来和大家分享一下; 我们可能早已习惯了padding在不同浏览器中的不同之处,
- 1、动态sql, 即动态参数:在存储过程中,想要直接用表名变量做参数,动态执行sql,不能直接写<P>create proced
- 可能各位朋友看到这个标题很不解,到底什么是习惯化,什么又是去习惯化?下面我来慢慢介绍我的个人理论。习惯化:随着对刺激的熟悉,人们越来越注意不
- javascript实现翻页效果:<html> <head> <title>上下翻页看 - aspxho
- 刚刚登甲发来一个文章,看到只要一行代码,就可以把IE6弄死.<style>*{position:relative}&
- <style> #L { position:absolute; color:
- 学习目的 学会SQL中的占位符用法 在鲸鱼这几天忙死了,好几天没写了,真对不起各位。这几天让XHTML闹得不开心,虽然以前也知道这个,但没太
- 加上设置字符编码的方法:response.setHeader("charset","gb2312")
- 事务日志文件Transaction Log File是用来记录数据库更新情况的文件,扩展名为ldf。在 SQL Server 7.0 和 S
- 见过很多网站,在设计的时候给了用户很大的自由度,我个人并不赞同这种做法。最简单的例子,圈网。我在研究圈网的时候注册完成后圈网给了我一个搜索框
- 在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的编写,刚开始不会体会出SQL语句各种写法的性能优劣,但是如果将应