浅析web Storage

最近工作中碰到很需求需要本地存储，发现自己对这方面的只知识了解的不是很透，使用不当会出点小问题，所以查了点资料粗略系统的总结了一下！
Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，在此我先简单介绍下cookie；

Cookie

Cookie是什么？ Cookie 是一小段文本信息，伴随着用户请求和页面在 Web 服务器和浏览器之间传递。Cookie 包含每次用户访问站点时 Web 应用程序都可以读取的信息。
为什么需要Cookie？ 因为HTTP协议是无状态的，对于一个浏览器发出的多次请求，WEB服务器无法区分 是不是来源于同一个浏览器。所以，需要额外的数据用于维护会话。 Cookie 正是这样的一段随HTTP请求一起被传递的额外数据。
Cookie 的限制。 大多数浏览器支持最大为 4096 字节的 Cookie。由于这限制了 Cookie 的大小，最好用 Cookie 来存储少量数据，或者存储用户 ID 之类的标识符。 用户 ID 随后便可用于标识用户，以及从数据库或其他数据源中读取用户信息。 浏览器还限制站点可以在用户计算机上存储的 Cookie 的数量。大多数浏览器只允许每个站点存储 20 个 Cookie；如果试图存储更多 Cookie，则最旧的 Cookie 便会被丢弃。有些浏览器还会对它们将接受的来自所有站点的 Cookie 总数作出绝对限制，通常为 300 个。

web Storage

web Storage 包括了两种存储方式：sessionStorage 和 localStorage。
sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问，会话结束后数据也随之销毁。
localStorage 用于存储一个域名下的需要永久存在在本地的数据，这些数据可以被一直访问，直到这些数据被删除。
因此sessionStorage 和 localStorage 的主要区别在于他们存储数据的生命周期，sessionStorage 存储的数据的生命周期是一个会话，而 localStorage 存储的数据的生命周期是永久，直到被主动删除，否则数据永远不会过期的。

对比Web Storage 和 cookie

相同之处：

1、它们都可以用于存储用户数据；
2、它们存储数据的格式都是字符串形式；
3、它们存储的数据都有大小限制。

不同之处：

1、它们的生命周期不同。sessionStorage 的生命周期是一个会话，localStorage的生命周期是永久，cookie 的生命周期可以自定义，cookie 可以设置过期时间，数据在过期时间之前可以访问。
2、它们的存储大小限制不同。大部分现代浏览器 Storage 的存储限制大小为 5M，cookie 的存储大小限制 为 4K。
3、浏览器支持不同，API 调用方式不同。相比 cookie ，Web Storage 的优点主要表现在存储空间更大，可存储的内容更大。cookie每次都随请求数据发送到服务器端，Web Storage不会和请求数据一同发送到服务器端，占用带宽更少。缺点主要表现在，现在所有浏览器都支持 cookie 操作，而只有现在浏览器才支持 Web Storage 操作，如果需要兼容老旧浏览器，就不能使用 Web Storage。

Web Storage API

存储键值对： localStorage.setItem(key, value)——（还可以使用 localStorage.key = value 或者 localStorage[‘key’] = value 这两种形式）

    // 把一个用户名(zijiao)存储到 name 的键上    localStorage.setItem('name', 'zijiao');    // localStorage.name = 'zijiao';    // localStorage['name'] = 'zijiao';    // 把一个用户存储到user的键上    localStorage.setItem('user', JSON.stringify(id:1, name:'zijiao'));

注意：这里取值需要用JSON.stringify转换成字符串形式存入。反之取出来时均为字符串！
例：var a = {a:1,b:2}
console.log(JSON.stringify(a)); // “{“a”:1,”b”:2}”

获取键值对： localStorage.getItem(key)——（也有两种等效形式 value = localStorage.key和 value = localStorage[‘key’] ）

    // 获取存储到 name 的键上的值    var name = localStorage.getItem('name');    // var name = localStorage.name;    // var name = localStorage['name'];    // 获取存储到user的键上的值    var user = JSON.parse(localStorage.getItem('user'));

注意：这里取值需要用JSON.parse将字符串解析成json对象，才可当对象使用。

删除键值对： localStorage.removeItem(key)

    var name = localStorage.getItem('name'); // 'zijiao'    // 删除存储到 name 的键上的值    localStorage.removeItem('name');    name = localStorage.getItem('name'); // null

清除所有键值对： localStorage.clear()

    // 清除 localStorage    localStorage.clear();    var len = localStorage.length; // 0

获取 localStorage 的属性名称(键名称)： localStorage.key(index)

    localStorage.setItem('name','zijiao');    var key = localStorage.key(0); // 'name'    localStorage.setItem('age', 10);    key = localStorage.key(0); // 'age'    key = localStorage.key(1); // 'name'

获取 localStorage 中保存的键值对的数量： localStorage.length

    localStorage.setItem('name','zijiao');    var len = localStorage.len; // 1    localStorage.setItem('age', 10);    len = localStorage.len; // 2