HTML5 Storage API

原文:HTML5 Storage API

Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多。

在Web Storage出现之前，远程的Web服务器需要存储客户端和服务器间交互使用的所有相关数据。cookie是一个在服务器和客户端间来回传送文本值的内置机制。服务器可以基于其放在cookie中的数据在不同web页面间跟踪用户的信息。用户每次访问某个域是，cookie数据都会被来回传送。

尽管cookie无处不在，但它还是有一些总所周知的缺点：

1）cookie的大小受限制，cookie大小被限制在4KB，不能接受像文件或邮件那样的大数据。

2）只要有请求涉及cookie，cookie就要在服务器和浏览器之间来回传送（这解释为什么本地文件不能测试cookie）。一方面，这意味着cookie数据在网络上是可见的，不加密的情况下有安全风险；另一方面，无论加载哪个相关url，cookie中的数据都会消耗网络带宽。

Web Storage出现之后，开发者可以将需要跨请求重复访问的数据直接存储在客户端的浏览器中（开发者也可以将数据存储在javascript对象中，对象在页面加载时保存，并且容易获取），还可以在关闭浏览器很久之后再次打开时恢复数据，以减少网络流量。

Web Storage又分为两种： 
sessionStorage 
localStorage 
key和value都必须为字符串，换言之，web Storage的API只能操作字符串。

Web Storage API检查浏览器的支持性

检测window.sessionStorage和window.localStorage是否存在

 

设置和获取数据

sessionStorage.setItem("myFirstKey","myFirstValue");或者sessionStorage.myFirstKey = myFirstValue;或者sessionStorage["myFirstKey"] ="myFirstValue";

获取数据

sessionStorage.getItem("myFirstKey");

删除数据

sessionStorage.removeItem("myFirstKey");

删除存储列表中的所有数据

sessionStorage.clear();

设置和获取的调用不必要出现在同一个网页上，只要网页是同源的（规则、主机和端口）基于相同的键，我们都能够在其他网页中获取设置在sessionStorage。大部分开发者对页面重新加载时丢失脚本数据的问题已经习以为常，但是通过Web Storage API保存的数据在重新加载页面之后数据仍然存在。

当用户关闭窗口或浏览器，sessionStorage数据将会被清除

localStorage 

localStorage 和sessionStorage的区别在于访问它们的名称不同，分别是通过localStorage 和sessionStorage对象来访问它们，两者的行为上的差异主要是数据的保存时长及它们的共享方式。

sessionStorage	localStorage
数据会保存在存储它的窗口或标签页关闭时 （浏览器刷新时可以存储数据，浏览器关闭时不可以）	数据的生命期比窗口或浏览器的生命期长
数据只在构建它们的窗口或者标签页内可见	数据可被同源的每个窗口或者标签页共享

将数据存储在本地客户端，进而从本地而不是远程获取数据，即可以降低网络流量，又可提升浏览器的响应速度。

一个困扰开发人员的常用问题是，当用户从应用程序的一个页面切换到另外一个页面时如何管理数据。传统的实现方法是有服务器存储数据，当用户在网页间切换时来回传递数据。还有一种做法是应用程序尽可能让用户停留在一个动态更新的网页上。不过用户更喜欢在页面间切换。

演示地址：http://lovermap.sinaapp.com/test/storage.html

JSON对象的存储

虽然HTML5 Web Storage规范允许将任意类型的对象保存为键-值对形式。实际情况是一些浏览器将数据限定为文本字符串类型。现代浏览器原生支持JSON。我们可以通过序列化复杂对象将JSON数据保存到Storage中，以实现复杂数据类型的持久化。

var data;
function loadData(){
    data = JSON.parse(sessonStorage['myStorage']);
}
function saveData(){
    sessonStorage['myStorage'] = JSON.stringify(data);//对象转变成字符串
}
window.addEventListener("load",loadData,true);
window.addEventListener("unload",loadData,true);