本地存储之Window.localStorage

2019-06-16174次阅读javascript

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'}]
上一篇: ES6 Promise 对象  下一篇: 客户端存储之cookie  

本地存储之Window.localStorage相关文章