H5的本地存储技术及其与Cookie的比较

第一部分： H5的本地存储技术

HTML5 提供了两种在客户端存储数据的新方法。
先看下面的例子：

例1：
var mySelection = {name:"car", amount:2};
localStorage.mySelection = JSON.stringify(mySelection);
console.log(localStorage.mySelection);

var mySelection2 = JSON.parse(localStorage.mySelection);
console.log(mySelection2.name);
console.log(mySelection2.amount);

例2：(把上述代码中的localStorage替换成 sessionStorage）

例1是把本网站的资料mySelection存储到本地，这样本网站的各个页面都可以使用此数据。而且，任何时候打开本网站都还可以继续使用它。

例2和例1的唯一区别是，用sessionStorage，在关闭本网站各页面之后，数据失效，下次再打开时候， 这些数据都不可用。

说明：HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 可以无限期保持
sessionStorage - 只在本session中有效， 关闭页面之后，就无效了
（除了有效期不同之外， 二者的其余方面都相同， 所以，为了简单起见，下面把二者统称"localStorage");

与之前的 cookie 技术相比：
* 这两张存储的可用空间更大 （5M， 每个网站）
* 不必上传给服务器， 节省带宽
* 同源的各个页面都可以存取
* 比cookie的存取方法更直接，

限制：
* localStorage只能存储成字符串形式， 不能直接保存数字和布尔变量。
所以， 其它类别一般都转成JSON格式存储

第二部分 Cookie
cookie是存储于用户计算机中的变量。每当用户从同一台计算机同一个浏览器请求某个页面的时候，就会发送该页面的所有cookie给服务器。

例子：一个完整的cookie
document.cookie = "username=John; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

上面的代码存储了这样一个cookie：
变量名称username， 取值"John",
失效日期时间： 18 Dec 2013 12:00:00 UTC
页面路径： "/"

从上面可以看出， cookie的形式比较复杂，JQuery有一个
名为“JQuery Cookie"的插件,使用方法如下：
$.cookie('name', 'John', { expires: 7, path: '/' }); //指定7天以后失效
console.log($.cookie('name'));