html5本地存储不完全指南

《html5本地存储不完全指南》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、HTML5本地存储不完全指南（作者系中关村北大青鸟ACCP讲师李玉婷）历史在HTML5本地存储之前，如果我们想在客户端保存持久化数据，有这么几个选择：·HTTPcookie。HTTPcookie的缺点很明显，最多只能存储4KB的数据，每个HTTP请求都会被传送回服务器，明文传输（除非你使用SSL）。·IEuserData。userData是微软在上世纪90年代的浏览器大战时推出的本地存储方案，借助DHTML的behaviour属性来存储本地数据，允许每个页面最多存储64K数据，每个站点最多640K数据，userData的缺点显而易见，它不是Web标准的一部分，除非你的程序只需要支持IE，否

2、则它基本没什么用处。·Flashcookie。Flashcookie的名字有些误导，它实际上和HTTPcookie并不是一回事，或许它的名字应该叫做"Flash本地存储”，Flashcookie默认允许每个站点存储不超过100K的数据，如果超出了，Flash会自动向用户请求更大的存储空间，借助Flash的ExternalInterface接口，你可以很轻松地通过Javascript操作Flash的本地存储。Flash的问题很简单，就是因为它是Flash。·GoogleGears。Gears是Google在07年发布的一个开源浏览器插件，旨在改进各大浏览器的兼容性，Gears内置了一个基于S

3、QLite的嵌入式SQL数据库，并提供了统一API对数据库进行访问，在取得用户授权之后，每个站点可以在SQL数据库中存储不限大小的数据，Gears的问题就是Google自己都已经不用它了。现状我们现在通常所说的HTML5本地存储，一般指的是WebStorage规范，这个标准曾经是HTML5规范的一部分，但后来因为种种原因从HTML5规范中分离了出来。但是除了WebStorage，HTML5的本地存储标准还有另外2个竞争者：WebSQLDatabase和IndexedDB。下面就让我们依次来看看这3个规范吧。WebStorageWebStorage是目前得到支持最广泛的HTML5本地存储规范

4、：IE8+、FF3.5+、Safari4+、Chrome4+、Opera10.5+，以及iPhone2+和Android2+都已经支持WebStorage，要判断你的浏览器是否支持WebStorage，可以使用下面这个函数：代码·functionsupports_html5_storage(){·try{·return'localStorage'inwindow&&window['localStorage']!==null;·}catch(e){·returnfalse;·}·}HTML5Storage的使用非常简单：代码·varfoo=localStorage.getItem("bar"

5、);·//...·localStorage.setItem("bar",foo);你也可以写成下面这样：代码·varfoo=localStorage["bar"];·//...·localStorage["bar"]=foo;如果要将某个key从存储空间删除，可以调用removeItem：代码·localStorage.removeItem('foo');你也可以像遍历数组那样遍历存储的所有键值对象：代码·for(vari=0;ivarkey=localStorage.key(i);·console.log(key+":"+localStorage[key]);·}如果你的程序需要在不同页

6、面访问同一个值，你可能需要了解这个值是否已经被其他页面改变了，这可以通过向浏览器注册storage事件来实现：代码·window.addEventListener('storage',function(e){·console.log(e.key+"'svalueischangedfrom'"+·e.oldValue+"'to'"+e.newValue+"'by"+e.url);·},false);··//A页面·localStorage['foo']='bar';··//B页面·localStorage['foo']='newBar';这时你应该会在A页面的Console中看到：foo’s

7、valueischangedfrom‘bar’to‘newbar’byhttp://localhost/test.html要注意的是，storage事件仅仅只是通知你某个键对应的值已经发生了改变，你没有办法在回调中阻止这个改变发生。HTML5Storage看起来不错，那它有没什么缺点呢？好问题。要说HTML5Storage的缺点，唯一的问题就是它默认的QUOTA只有5MB，并且你没办法通过程序自行或是提示用户来增加存储空