Cookie, LocalStorage 与 SessionStorage

• Cookie, LocalStorage 与 SessionStorage相同点

  • 都是储存在用户本地的数据。
  • 意义在于避免数据在浏览器和服务器间不必要地来回传递。   

• ---

  三者的特点

• 		同属于html5中的Web Storage
  特性	Cookie	localStorage	sessionStorage
  数据的生命期	可设置失效时间，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭浏览器后被清除
  存放数据大小	4K/个文件*最多20个	>5MB/站点	>5MB/站点
  与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
  易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
  数据的可访问性	不同浏览器、不同窗口中都是共享的	同一个浏览器、同站点不同窗口中可以共享	仅同一个页面窗口中才能共享
  常用于	记住密码、	表单缓存	购物车缓存

   

  • web storage和cookie的区别

  Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
  除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

  webstorage的浏览器支持如下：

  实践上可这样切换使用：

  var strStoreDate = window.localStorage? localStorage.getItem("menuTitle"): Cookie.read("menuTitle");    

   

  • Cookie

  　　Cookie分2种。当浏览器运行时，Cookie 可存储在 RAM 中发挥作用 （此种 Cookies 称作 Session Cookies），一旦用户从该网站或服务器退出，Cookie 可存储在用户本地的硬盘上 （此种 Cookies 称作 Persistent Cookies）。

  　　当 Web 服务器创建了Cookies 后，只要在其有效期内，当用户访问同一个 Web 服务器时，浏览器首先要检查本地的Cookies，并将其原样发送给 Web 服务器。所以　　Cookie的内容应该少而精。

  　　某些浏览器用户可能禁用cookie。

  　　查看某个网站颁发的Cookie很简单。在浏览器地址栏输入JavaScript:alert (document. cookie)就可以了。

  　　详细的cookie参见http://blog.csdn.net/fangaoxin/article/details/6952954/

   

  • localStorage

  　　localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

  　　同一站点共用一份5M的localStorage，储存在浏览器的sqLite中，通过window.localStorage对象访问。

  　　localStorage储存的是键值对（类似于字典）值必须以字符串格式来存入（数组可以直接存,对象要用json格式存，最后读出来都是字符串）。

  　　创建、读取localStorage：

  <script type="text/javascript">
  
  var num=[1,2,3,4];
  localStorage.numlist=num;//lastname字段必须唯一，同一站点页面根据相同的名字可覆盖你的值
  document.write(localStorage.numlist);// ,输出 1,2,3,4 因为localStorage是以字符串来储存

  </script>

  localStorage教程参见：http://www.zhangxinxu.com/wordpress/?p=1952

  http://blog.csdn.net/smartsmile2012/article/details/45534253

  •  SessionStorage

  类似localStorage，键值对存储。

  区别在于仅存在于同一个页面中，页面关闭再打开依然存在，但当浏览器窗口关闭就失效。

  通过window.sessionStorage对象访问。

  ---

   

  参考：

  http://www.jb51.net/html5/144597.html

  http://www.w3school.com.cn/html5/html_5_webstorage.asp