HTML5地本存储不完全指南.doc

编辑推荐：这篇文章来自于黑客志，对HTML5的本次存储方式进行了非常全面的介绍和分析，对于学习HTML5的开发者来说，不容错过哦。?历史?在HTML5本地存储之前，如果我们想在客户端保存持久化数据，有这么几个选择：? HTTP cookie。HTTP cookie的缺点很明显，最多只能存储4KB的数据，每个HTTP请求都会被传送回服务器，明文传输（除非你使用SSL）。 IE userData。userData是微软在上世纪90年代的浏览器大战时推出的本地存储方案，借助DHTML的behaviour属性来存储本地数据， 允许每个页面最多存储64K数据，每个站点最多640K数据，userData的缺点显而易见，它不是Web标准的一部分，除非你的程序只需要支持IE， 否则它基本没什么用处。 Flash cookie。Flash cookie的名字有些误导，它实际上和HTTP cookie并不是一回事，或许它的名字应该叫做Flash本地存储”，Flash cookie默认允许每个站点存储不超过100K的数据，如果超出了，Flash会自动向用户请求更大的存储空间，借助Flash的 ExternalInterface接口，你可以很轻松地通过Javascript操作Flash的本地存储。Flash的问题很简单，就是因为它是 Flash。 Google Gears。Gears是Google在07年发布的一个开源浏览器插件，旨在改进各大浏览器的兼容性，Gears内置了一个基于SQLite的嵌入式 SQL数据库，并提供了统一API对数据库进行访问，在取得用户授权之后，每个站点可以在SQL数据库中存储不限大小的数据，Gears的问题就是 Google自己都已经不用它了。 现状?我们现在通常所说的HTML5本地存储，一般指的是Web Storage规范，这个标准曾经是HTML5规范的一部分，但后来因为种种原因从HTML5规范中分离了出来。但是除了Web Storage，HTML5的本地存储标准还有另外2个竞争者：Web SQL Database和IndexedDB。下面就让我们依次来看看这3个规范吧。?Web Storage?Web Storage是目前得到支持最广泛的HTML5本地存储规范：IE 8+、FF 3.5+、Safari 4+、Chrome 4+、Opera 10.5+，以及iPhone 2+和Android 2+都已经支持Web Storage，要判断你的浏览器是否支持Web Storage，可以使用下面这个函数：? 代码? function?supports_html5_storage()?{?? ????try?{?? ????????return?localStorage?in?window??window[localStorage]?!==?null;?? ????}?catch?(e)?{?? ????????return?false;?? ????}?? }?? HTML5 Storage的使用非常简单：? 代码? var?foo?=?localStorage.getItem(bar);?? //?...?? localStorage.setItem(bar,?foo);?? 你也可以写成下面这样：? 代码? var?foo?=?localStorage[bar];?? //?...?? localStorage[bar]?=?foo;?? 如果要将某个key从存储空间删除，可以调用removeItem：? 代码? localStorage.removeItem(foo);?? 你也可以像遍历数组那样遍历存储的所有键值对象：? 代码? for(var?i=0;?ivar?key?=?localStorage.key(i);?? ????console.log(key?+?:?+?localStorage[key]);?? }?? 如果你的程序需要在不同页面访问同一个值，你可能需要了解这个值是否已经被其他页面改变了，这可以通过向浏览器注册storage事件来实现：? 代码? window.addEventListener(storage,?function(e)?{?? ????console.log(e.key?+?s?value?is?changed?from??+?? ????????e.oldValue?+??to??+?e.newValue?+??by??+?e.url);?? },?false);?? ?? //A页面?? localStorage[foo]?=?bar;?? ?? //B页面?? localStorage[foo]?=?newBar;?? 这时你应该会在A页面