【JavaScript】Cookie存储

     随着 Web 越来越复杂，开发者急切的需要能够本地化存储的脚本功能。这个时候，第一个出现的方案：cookie 诞生了。cookie 的意图是：在本地的客户端的磁盘上以很小的文件形式保存数据。

 一．Cookie

    cookie 也叫 HTTP Cookie， 最初是客户端与服务器端进行会话使用的。 比如， 会员登录 ，下次回访网站时无须登录了；或者是购物车，购买的商品没有及时付款，过两天发现购物车里还有之前的商品列表。
    HTTP Cookie 要求服务器对任意 HTTP 请求发送 Set-Cookie，因此，Cookie 的处理原则上需要在服务器环境下进行。当然，现在大部分浏览器在客户端也能实现 Cookie 的生成和获取。(目前 Chrome 不可以在客户端操作，其他浏览器均可)

   1、Cookie组成

    cookie 由名/值对形式的文本组成：name=value。完整格式为：

<span style="font-family:KaiTi_GB2312;font-size:18px;">name=value; [expires=date]; [path=path]; [domain=somewhere.com]; [secure]
中括号是可选，name=value 是必选。</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">document.cookie = 'user=' + encodeURIComponent('tengliu'); //编码写入
alert(decodeURIComponent(document.cookie)); //解码读取</span>

   2、创建Cookie

<span style="font-family:KaiTi_GB2312;font-size:18px;">function setCookie(name, value, expires, path, domain, secure) {
  var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
  if (expires instanceof Date) {
    cookieText += '; expires=' + expires;
  }
  if (path) {  //访问路径，当设置了路径，那么只有设置的那个路径文件才可以访问 cookie。
    cookieText += '; expires=' + expires;
  }
  if (domain) {   // 访问域名,用于限制只有设置的域名才可以访问，那么没有设置，会默认限制为创建 cookie 的域名。
    cookieText += '; domain=' + domain;
  }
  if (secure) {  //安全设置，指明必须通过安全的通信通道来传输(HTTPS)才能获取 cookie。
   cookieText += '; secure';
  }
  document.cookie = cookieText;
}</span>

  3、获取Cookie

<span style="font-family:KaiTi_GB2312;font-size:18px;">function getCookie(name) {
  var cookieName = encodeURIComponent(name) + '=';
  var cookieStart = document.cookie.indexOf(cookieName);
  var cookieValue = null;
  if (cookieStart > -1) {
    var cookieEnd = document.cookie.indexOf(';', cookieStart);
    if (cookieEnd == -1) {
      cookieEnd = document.cookie.length;
  }
  cookieValue = decodeURIComponent(
     document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
  }
  return cookieValue;
}</span>

  4、删除 Cookie

<span style="font-family:KaiTi_GB2312;font-size:18px;">function unsetCookie(name) {
  document.cookie = name + "= ; expires=" + new Date(0);
}</span>

  5、失效天数，直接传一个天数即可

<span style="font-family:KaiTi_GB2312;font-size:18px;">function setCookieDate(day) {
  if (typeof day == 'number' && day > 0) {
    var date = new Date();
    date.setDate(date.getDate() + day);
  } else {
    throw new Error('传递的 day 必须是一个天数，必须比 0 大');
  }
  return date;
}</span>

 二、 cookie 局限性

  cookie 虽然在持久保存客户端用户数据提供了方便，分担了服务器存储的负担。但是还有很多局限性的。

  1、每个特定的域名下最多生成 20 个 cookie（根据不同的浏览器有所区别） 。

  2、cookie 的最大大约为 4096 字节(4k)，为了更好的兼容性，一般不能超过 4095 字节即可。

  3、cookie 存储在客户端的文本文件，所以特别重要和敏感的数据是不建议保存在cookie 的。比如银行卡号，用户密码等。

 三、其他存储

   IE 提供了一种存储可以持久化用户数据，叫做 userData，从 IE5.0 就开始支持。每个数据最多 128K，每个域名下最多 1M。这个持久化数据存放在缓存中，如果缓存没有清理，那么会一直存在。

  1.UserData存储

<span style="font-family:KaiTi_GB2312;font-size:18px;"><div style="behavior:url(#default#userData)" id="box"></div></span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">
addEvent(window, 'load', function () {
  var box = document.getElementById('box');
  box.setAttribute('name', encodeURIComponent('滕柳'));
  box.expires = setCookieDate(7);
  box.save('bookinfo');</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">
//box.removeAttribute('name'); //删除 userDate
//box.save('bookinfo');</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">
  box.load('bookinfo');
  alert(decodeURIComponent(box.getAttribute('name')));
});
</span>

  PS：这个数据文件也是保存在 cookie 目录中，只要清除 cookie 即可。如果指定过期日期，则到期后自动删除，如果没有指定就是永久保存。

  2、Web存储

     在比较高版本的浏览器，JavaScript 提供了 sessionStorage 和 globalStorage。在 HTML5中提供了 localStorage 来取代 globalStorage。 而浏览器最低版本为： IE8+、 Firefox3.5+、 Chrome4+和 Opera10.5+。
   PS：由于这三个对浏览器版本要求较高，我们就只简单的在 Firefox 了解一下，Session在我们做的ITOO项目中也有遇到。

  （1） sessionStorage存储

<span style="font-family:KaiTi_GB2312;font-size:18px;">//通过方法存储和获取
sessionStorage.setItem('name', '滕柳 ');
alert(sessionStorage.getItem('name'));</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">//通过属性存储和获取
sessionStorage.book = '//通过方法存储和获取
sessionStorage.setItem('name', '滕柳' );
alert(sessionStorage.getItem('name'));
</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">//删除存储
sessionStorage.removeItem('name');</span>

  （2） localStorage存储

    由于 localStorage 代替了 globalStorage，所以在 Firefox、Opera 和 Chrome 目前的最新版本已不支持。

<span style="font-family:KaiTi_GB2312;font-size:18px;">//通过方法存储和获取
localStorage.setItem('name', '滕柳');
alert(localStorage.getItem('name'));</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">
//通过属性存储和获取
localStorage.book = '滕柳';
alert(localStorage.book);</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">
//删除存储
localStorage.removeItem('name');</span>

   PS：这三个对象都是永久保存的，保存在缓存里，只有手工删除或者清理浏览器缓存方可失效。在容量上也有一些限制，主要看浏览器的差异，Firefox3+、IE8+、Opera 为 5M， ，Chrome 和 Safari 为 2.5M。