HTML5之Web存储

Web Storage(Web存储)提供了一种方式，让Web页面实现在客户端浏览器中以键值对的方式在本地保存数据。

 

一、Cookie存储

HTML4中在客户端存储简单用户信息的一种方式，它使用文本来存储信息。

1. 优点：

• 简单易用
• 浏览器自动管理不同站点的Cookie并负责发送数据

2. 缺点：

• 文本存储，安全性差，容易被窃取
• 存储的容量有限(4KB)，数量也有限
• 浏览器安全级别最高时，可能会失效
• 会在服务器客户端间来回存储，影响速度、效率

二、localStorage和sessionStorage

在HTML5各项特性中，Web Storage的浏览器支持度比较好，目前所有主流浏览器都在一定程度上支持Web Storage。

1. localStorage

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

2.sessionStorage

针对session的数据存储，用户关闭浏览器后，数据会被删除。

3.优点

• 存储空间更大，各个浏览器实现略有不同，但都比cookie要大很多
• 与cookie不同，不会在与服务器交互时来回传输
• 提供了简单易用的接口
• 独立的存储空间

4.缺点

• 浏览器为每个域分配独立的存储空间，但是如果A域的页面嵌入B域的脚本，那么B域的脚本也可以访问A域的数据
• 存储的数据未加密且永远不会过期，容易造成隐私泄露

 5.使用Web Storage(下面均在Chrome 43.0.2357.81m下测试)

• 获取对象：window.sessionStorage，window.localStorage
• 方法：setItem(k,v),removeItem(k),getItem(k),clear()和key(index)
• 属性：length，存储数据还可以简单的使用localStorage.key=value的方式
• 事件：onStorage(支持属性->key,oldValue,newValue,url,storageArea)，不同浏览器注册方法不一样
• 多窗口的sessionStorage的数据不能共享，例如同时打开浏览器的2个tab，访问window.sessionStorage.visitCount得到的值是不同的，如果要在一个域名下共享某个变量值，考虑用localStorage或cookie
• onStorage事件：chrome下，只响应localStorage事件，对于sessionStorage中值的改变没响应，而且本窗口(当前tab)也不会产生storage事件通知到监听器，只会通知到其他窗口(针对这种情况下，有网友提出其他解决方式=>http://www.cnblogs.com/cczw/p/3196195.html)。

二、Web SQL数据库

Web SQL数据库API实际上不是HTML5规范的组成部分，而是单独的规范，IE、Firefox中并没有实现它。而WHATWG也停止了对Web SQL Database的开发，并使用新的规范-索引数据库(Indexed Database)所取代。

由于不是专业前端开发人员，此功能也未用到，不再详述。