本地存储之Window.localStorage

html5中localStorage提供了存储机制，通过该机制，浏览器可以安全地存储键值对，比使用cookie更加直观。

属性

Storage.length

只读属性，返回一个整数，表示存储在Storage对象里的数据项（data items）数量。

返回值：一个整数。

localStorage.setItem('bgcolor', 'yellow');
localStorage.setItem('font', 'Helvetica');
localStorage.setItem('image', 'cats.png');
localStorage.length; // 返回 3

方法

Storage.key()

接受一个数值n作为参数，返回存储对象第n个数据项的键名。

返回值：一个字符串。

localStorage.setItem('bgcolor', 'yellow');
localStorage.setItem('font', 'Helvetica');
localStorage.setItem('image', 'cats.png');
localStorage.key(2); // 应该返回 'image'

Storage.getItem()

接受一个键名（key name）作为参数，并返回对应键名的值（key's value）。

返回值：键名对应的值。如果键名不存在于存储中，则返回 null。

localStorage.getItem('font');// 应该返回 'Helvetica'

Storage.setItem()

接受一个键名和值作为参数，将会把键名添加到存储中，如果键名已存在，则更新其对应的值。

返回值:无

localStorage.setItem('bgcolor', 'yellow');
localStorage.setItem('font', 'Helvetica');
localStorage.setItem('image', 'cats.png');

Storage.removeItem()

接受一个键名作为参数，会把该键名从存储中移除。

返回值:无

localStorage.removeItem('image');

Storage.clear()

调用它可以清空存储对象里所有的键值。无参数，无返回值。

localStorage.clear();

浏览器兼容性：IE8+

localStorage与cookie的区别

• localStorage为了更大容量存储设计的一般为5MB，Cookie的大小是受限的一般为4K左右。

• 每次都会携带在HTTP头中，如果使用cookie保存过多数据，这样无形中浪费了带宽。localStorage仅仅是为了在本地“存储”数据而生，不参与和服务器的通信。

• localStorage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie等。

• localStorage、cookie都存在跨域问题，localStorage连子域都跨不了，但cookie可以通过键值对后可选的domain设置跨子域;domain='.example.com' (包括所有子域名)

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

• 目前微信浏览器下localStorage好像支持不是太好，不过可以通过下面的Polyfill来兼容，在支持localStorage下优先使用localStorage，不支持的情况下才用cookie来实现。

并不那么严谨的Polyfill兼容IE6+

if (!window.localStorage) {
  window.localStorage = {
    getItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
    },
    key: function (nKeyId) {
      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
    },
    setItem: function (sKey, sValue) {
      if(!sKey) { return; }
      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
      this.length = document.cookie.match(/\=/g).length;
    },
    length: 0,
    removeItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
      this.length--;
    },
    hasOwnProperty: function (sKey) {
      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
    }
  };
  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
}

存储简单值

localStorage.setItem('strorState',1);//设置键值
localStorage.getItem('strorState');//获取键值为1
localStorage.removeItem('tabState');//删除键值

存储数组对象

localStorage键值只能存储字符串的数据，但我们可以通过JSON对象提供的stringify将其他数据类型转化成字符串，再存储到localStorage键值中。取出时再通过JSON对象提供的parse方法解析JSON字符串，返回由字符串描述的JavaScript值或对象。

var ary = [{age:30,name:'jin'},{age:27,name:'ren'}];

localStorage.setItem('user', JSON.stringify(ary) );//"[{"age":30,"name":"jin"},{"age":27,"name":"ren"}]"

console.log(  JSON.parse( localStorage.getItem('user') ) );//[{age:30,name:'jin'},{age:27,name:'ren'}]