cookie与sessionstorage，localstorage的区别

1、cookie在浏览器与服务器之间来回传递
      sessionStorage和localStorage不会把数据发给服务器，仅在本地保存。

2、数据有效期不同
     cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
     sessionStorage：仅在当前浏览器窗口关闭前有效
     localStorage 始终有效，长期保存。

3、cookie数据还有路径的概念，可以限制cookie只属于某个路径下
      存储大小也不同，cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

4、作用域不用
     sessionStorage不在不同的浏览器窗口中共享
     localStorage在所有同源窗口中都是共享的
     cookie也是在所有同源窗口中都是共享的
     WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

总结：实用方法：

1.cookie的读写：

function setCookie(name,value)
{
  var Days = 30; //此 cookie 将被保存 30 天
  var exp  = new Date();    //new Date("December 31, 9998");
  exp.setTime(exp.getTime() + Days*24*60*60*1000);
  document.cookie = name + "="+ escape(value) +";expires="+ exp.toGMTString();
}
function getCookie(name)
{
  var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
  if(arr != null) return unescape(arr[2]); return null;
}
function delCookie(name)
{
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval=getCookie(name);
  if(cval!=null) document.cookie=name +"="+cval+";expires="+exp.toGMTString();
}


删除所有cookies

function clearCookie(){
var keys=document.cookie.match(/[^ =;]+(?==)/g);
if (keys) {
for (var i = keys.length; i--;)
document.cookie=keys[i]+'=0;expires=' + new Date( 0).toUTCString()
}
}

2.sessionStorage的读写

存取值：
window.sessionStorage.setItem("key", "value");
获取值：
window.sessionStorage.getItem("username");
删除指定键

sessionStorage.removeItem("key");
删除所有

sessionStorage.clear();

3.localStorage

localStorage.setItem("key", "value");
读取数据语法：

var lastname = localStorage.getItem("key");
删除数据语法：

localStorage.removeItem("key");

删除所有

sessionStorage.clear();

注：Web Storage API内建了一套事件通知机制，当存储区域的内容发生改变（包括增加、修改、删除数据）时，就会自动触发 storage 事件，并把它发送给所有感兴趣的监听者。因此，如果需要跟踪存储区域的改变，就需要在关心存储区域内容的页面监听 storage 事件.

代码：

if (window.addEventListener) {
    window.addEventListener("storage", handleStorage, false);
} else {
    window.attachEvent("onstorage", handleStorage);
}