Cookie、LocalStorage、SessionStorage的区别

相同点：都是保存在浏览器端，且同源的。

不同点：

• cookie在浏览器与服务器之间来回传递
  sessionStorage和localStorage不会把数据发给服务器，仅在本地保存。
• 数据有效期不同
       cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
       sessionStorage：仅在当前浏览器窗口关闭前有效
       localStorage 始终有效，长期保存。
• 存储大小限制不同
      cookie数据不能超过4k。cookie数据还有路径的概念，可以限制cookie只属于某个路径下        sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到             5M或更大。
• 作用域不同
      sessionStorage不能在不同的浏览器中共享，即使是同一个页面，
      locastorage在所有的同源窗口中都是共享的，
      cookie也是在所有同源窗口中共享的。

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()
    }
}

SessionStorage的读写：

存取值：
window.sessionStorage.setItem("key", "value");

获取值：
window.sessionStorage.getItem("username");删除指定键
sessionStorage.removeItem("key");删除所有
sessionStorage.clear();

LocalStorage的读写：

存取值：
window.sessionStorage.setItem("key", "value");

获取值：
window.sessionStorage.getItem("username");删除指定键
sessionStorage.removeItem("key");删除所有
sessionStorage.clear();