localStorage sessionStorage cookie的区别

文章转载自：http://blog.csdn.net/cwzhsi/article/details/49557879

一、基本概念

Cookie

cookie比较小，大小限制在4kb左右，是网景公司的前雇员 LouMontulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。 
localStorage

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。

sessionStorage

sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

二、异同

sessionStarage ,localStorage,cookie 都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个浏览器窗口的概念。sessionStorage实在同源的 同窗口（或tab） 中，始终存在的数据。即只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。 
区别： 
（1）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。 
（2）存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。 
（3）数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 
（4）作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。 
（5）Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

sessionStorage与页面 js 数据对象的区别 
页面中一般的 js 对象或数据的生存期是仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了。 
而sessionStorage 只要同源的同窗口（或tab）中，刷新页面或进入同源的不同页面，数据始终存在。也就是说只要这个浏览器窗口没有关闭，加载新页面或重新加载，数据仍然存在。

三、浏览器本地存储与服务器端存储之间的区别

浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。

服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。 
（1）服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。 
（2）服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp的 session 对象，数据保存在服务器上。实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。 
（3）服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。 
浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。 
服务器存储数据安全一些，浏览器只适合存储一般数据。

四、Web Storage 带来的好处

（1）减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。 
（2）快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。 
（3）临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。

五、应用场景

因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。 
针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。 
曾经还使用 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，就可以利用localStorage代替cookie了。 
而另一方面 localStorage 接替了 Cookie 管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage 也是非常适用的。如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。

六、安全性的考虑

需要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候， 
需要时刻注意是否有代码存在 XSS 注入的风险。因为只要打开控制台，你就随意修改它们的值，也就是说如果你的网站中有 XSS 的风险， 
它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。但是cookie可以采取一些策略来预防XSS攻击。 
http://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies
上面的链接里有介绍cookie的。

七、判断 html5 web storage的浏览器的支持情况

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。 
通过简单的代码封装可以统一到所有的浏览器都支持web storage。

if(window.localStorage)
{
    alert(“浏览器支持localStorage”)
} else {
    alert("不支持");
}

if(typeof window.localStorage === 'undefined') 如果支持的话会返回object。

八、localStorage 和sessionStorage操作

它们具有相同的操作方法，例如setItem、getItem和removeItem等。 
例如：

sessionStarage.setItem('key','value');

getItem获取value
var value = sessionStorage.getItem("key");  var site = localStorage.getItem("site");

removeItem删除key
sessionStorage.removeItem("key");   localStorage.removeItem("site");

clear 清除所有的key/value
sessionStorage.clear();     localStorage.clear();

例如：sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历

var storage = window.localStorage;
for (var i=0, len = storage.length; i  <  len; i++){
    var key = storage.key(i);
    var value = storage.getItem(key);
    console.log(key + "=" + value); }
}

storage事件
当键值改变或者clear的时候，就可以触发storage事件。
if(window.addEventListener){ 
    window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
    window.attachEvent("onstorage",handle_storage); 
}
function handle_storage(e){
    if(!e){e=window.event;}
}

九、实际应用举例

可以参考：

http://www.zhangxinxu.com/wordpress/2011/09/html5-localstorage%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E5%AE%9E%E9%99%85%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/）

利用本地存储的计数器

var storage = window.localStorage;
if (!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0);
storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//必须格式转换
document.getElementByIdx_x("count").innerHTML = storage.pageLoadCount;
showStorage();

需要注意的是，HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。这也就是上一段代码中parseInt必须要使用的原因。

参考文章 
http://www.zhangxinxu.com/wordpress/2011/09/html5-localstorage%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E5%AE%9E%E9%99%85%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/

http://segmentfault.com/a/1190000002723469

http://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies

http://han.guokai.blog.163.com/blog/static/13671827120112694851799/

http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html

http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.html