SessionStorage, LocalStorage, Cookie三者的异同与使用

SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于WebStorage，创建它们的目的便是存储客户端数据。而Cookie最初目的是为了保持HTTP的状态。

异同

Cookie：一般由服务器生成，可设置失效时间（浏览器生成则默认失效时间为关闭浏览器时）。Cookie会在每次发送HTTP请求时附加到Cookie头字段，服务器以此得知用户所处的状态。存放数据大小4K左右。
localStorage：localStorage可以在多个标签页中互相访问，LocalStorage没有过期时间，除非手动删除它会一直存在。
sessionStorage：仅在当前会话下有效，关闭页面或浏览器后被清除。（SessionStorage中的Session指的是浏览器会话，而非服务器端通过Cookie实现的Session。）

LocalStorage和SessionStorage都是本地存储，不会被发送到服务器上，存储空间比Cookie大很多，一般支持5-10M 。

使用

Cookie：服务器可以在HTTP响应中设置set-cookie字段来设置Cookie，较常用的一个应用场景就是判断用户是否登录。事实上客户端也可以操作Cookie，比如之前的电商网站会使用Cookie来存储购物车信息。

function setCookie(key,value){
    var dateStr = (new Date()).toGMTString();
    document.cookie = key + "=" + escape(value) + ";expires=" + dateStr;
}
function getCookie(key){
    var idx = document.cookie.indexOf(key + "=")
    if(idx == -1) return;
    
    var start = idx + key.length + 1,
        end = document.cookie.indexOf(";", idx);
    if(end==-1) end = document.cookie.length;
    
    return unescape(document.cookie.substr(start,end));
}

通过jQuery-Cookie插件可以更方便地操作Cookie

$.cookie('name', 'value');  
$.cookie('name', 'value', { expires: 7 });  
$.cookie('name', 'value', { expires: 7, path: '/' });   // 全站有效

$.cookie('name');   // "value"
$.cookie();         // { "name": "value" }

Storage
LocalStorage/SessionStorage提供的存储也是基于字符串的键值对。可以通过setItem，getItem来访问其中的存储项：

localStorage.clear();
localStorage.setItem('key', 'value');
localStorage.getItem('key');     // => 'value'
localStorage.removeItem('key');

因为它只能存储字符串，要存JSON只能序列化为字符串：

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

代码来自StackOverflow： http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage

参考链接：