比较cookies和Web Storage

Web Storage是HTML5中提出的新增特性，顾名思义，即用来在web客户端本地保存数据。在HTML5之前，保存本地数据通常使用的cookies，但是使用cookies存在一些问题。

1.cookies

缺点
- 大小：cookies的大小被限制在4KB，大多数浏览器只允许每个站点保存20个cookies，因此对于存储大量数据显然不适用；
- 带宽：cookies随HTTP事务一起被发送到服务器,需要浪费一部分带宽发送cookies；
- 复杂性：要正确操作cookies比较困难。

---

优点

• 被大多数浏览器支持；
• 对于一些小数据存储很适用，例如用户的登录信息。

---

cookies用法
cookie由以下几部分组成

• 一个包含实际信息的键/值对，默认为空；
• 一个表示有效期的GMT格式的字符串，如果没有设置，当用户关闭浏览器时cookie过期；
• 一个目录路径，默认设置cookie的页面所在的目录；
• 一个域，默认为设置cookie的页面所处的域。

设置cookie：

document.cookie = 'testcookie=yes; expires=Tue,23 Jan 2016 13:57:39 UTC; path=/; domain=quirksmode.org';
document.cookie = 'testcookie2=no; expires=Tue, 23 Jan 2016 13:57:39 UTC; path=/; domain=quirksmode.org';

读取cookie：
读取document.cookie属性，会得到当前页面所关联的所有cookie的键/值对，所以需要用如下方式读取某个cookie的值：

var searchString = 'testcookie';//需要寻找的cookie的名
var cookieValue = '';
var cookies = document.cookie.split(';');//用分号拆分cookies，并保存在数组中
for(var i=0 ;i < cookies.length ; i++){
    if(cookies[i].indexOf(searchString+'=') == 0){
        cookieValue = cookies[i].subString(cookies[i].indexOf('=')+1);
        break;
    }
}

删除cookie：
只需要设置cookie的有效期为已经过去的时间即可。

此外，http://www.quirksmode.org/js/cookies.html提供了3个封装好的函数createCookie(),readCookie()和eraseCookie()，用来操作cookie，可以借鉴。

2.Web Storage

Web Storage分为两种，分别是sessionStorage和localStorage。
优点：
- 可以存储大容量数据，一般为5MB
- 只在客户端保存，不参与服务器通信，不占用带宽资源
- 原生接口可以接受，也可以在此封装
缺点：
- 一些老的浏览器不支持

Web Storage用法：
（1） sessionStorage，将数据保存在session对象中，当用户关闭浏览器时，数据会被删除。
设置：3种方式

 sessionStorage.setItem('keyname1',value);
 sessionStorage.keyname2 = value;
 sessionStorage['keyname3'] = value;

读取：

var value1 = sessionStorage.getItem('keyname1');
var value2 = sessionStorage.keyname2;
var value3 = sessionStorage['keyname3'];

删除：

sessionStorage.removeItem('keyname1');//清除一个键值对
sessionStorage.clear();//清除sessionStorage所有键值对

（2）localStorage，存储的数据没有时间限制,除非删除，否则永久保存。它将数据保存在客户端本地的硬件设备（通常指硬盘）中，及时浏览器被关闭了，该数据依旧存在，下次打开浏览器（但必须是相同的浏览器）访问站点时仍然可以继续使用。
设置：3种方式

 localStorage.setItem('keyname1',value);
 localStorage.keyname2 = value;
 localStorage['keyname3'] = value;

读取：

var value1 = localStorage.getItem('keyname1');
var value2 = localStorage.keyname2;
var value3 = localStorage['keyname3'];

删除：

localStorage.removeItem('keyname1');//清除一个键值对
localStorage.clear();//清除localStorage所有键值对