HTML5的本地存储

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

• localStorage：没有时间限制的数据存储
• sessionStorage：针对一个 session 的数据存储

之前，这些都是由cookie完成的，但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据

当浏览器进入隐私浏览模式，会创建一个新的、临时的数据库来存储local storage的数据；当关闭隐私浏览模式时，该数据库将被清空并丢弃。

localStorage

localStorage的优势和局限

localStorage的优势

1. localStorage拓展了cookie的4K限制

2. localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1. 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2. 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3. localStorage在浏览器的隐私模式下面是不可读取的

4. localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5. localStorage不能被爬虫抓取到

localStorage的使用

写入

localStorage中的内容以键值对形式存储，如果有冲突，会直接覆盖，有以下三种存储方式

• localStorage.setItem(key, value)

  localStorage.setItem('a', 1);

• localStorage.key = value

  localStorage.a = 1;

• localStorage['key'] = value

  localStorage['a'] = 1;

值的获取

• localStorage.getItem(key)

  localStorage.getItem('a')              // => '1'

• localStorage[key]

  localStorage['a']                      // => '1'

• localStorage.key

  localStorage.a                         // => '1'

删除值

*　localStorage.removeItem(key)，表示清除单项key的值

localStorage.removeItem('a')

*　localStorage.clear()，表示清除localStorage存储的所有数据

JSON存储

当需要存储的数据很多时，可以将数据存储到数组中并转换成JSON格式的数据。

1. SON.stringify(data)将对象转换成JSON格式的数据串

2. JSON.parse(data)将数据解析成对象并返回解析后的对象

sessionStorage

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

localStorage的实现

Object.defineProperty(window, "localStorage", new (function () {
  var aKeys = [], oStorage = {};

  // localStorage.getItem(key)
  Object.defineProperty(oStorage, "getItem", {
    value: function (sKey) { return sKey ? this[sKey] : null; },
    writable: false,
    configurable: false,
    enumerable: false
  });

  // localStorage.key(index)
  Object.defineProperty(oStorage, "key", {
    value: function (nKeyId) { return aKeys[nKeyId]; },
    writable: false,
    configurable: false,
    enumerable: false
  });

  // localStorage.setItem(key, value)
  Object.defineProperty(oStorage, "setItem", {
    value: function (sKey, sValue) {
      if (!sKey) { return; }
      document.cookie = encodeURI(sKey) + "=" + encodeURI(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
    },
    writable: false,
    configurable: false,
    enumerable: false
  });

  // localStorage.length
  Object.defineProperty(oStorage, "length", {
    get: function () { return aKeys.length; },
    configurable: false,
    enumerable: false
  });

  // localStorage.removeItem(key)
  Object.defineProperty(oStorage, "removeItem", {
    value: function (sKey) {
      if (!sKey) { return; }
      document.cookie = encodeURI(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
    },
    writable: false,
    configurable: false,
    enumerable: false
  });

  this.get = function () {
    var iThisIndx;
    for (var sKey in oStorage) {
      iThisIndx = aKeys.indexOf(sKey);
      if (iThisIndx === -1) {
        oStorage.setItem(sKey, oStorage[sKey]);
      } else {
        aKeys.splice(iThisIndx, 1);
      }
      delete oStorage[sKey];
    }
    for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) {
      oStorage.removeItem(aKeys[0]);
    }
    for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
      aCouple = aCouples[nIdx].split(/\s*=\s*/);
      if (aCouple.length > 1) {
        oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
        aKeys.push(iKey);
      }
    }
    return oStorage;
  };
  this.configurable = false;
  this.enumerable = true;
})());