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();
}删除所有cookiesfunction 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();