localStorage、sessionStorage 可用于本地暂时存储 如cookie一样

什么是localStorage、sessionStorage


在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
  • localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空

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不能被爬虫抓取到

检测浏览器是不是支持

<script>
	if(!window.localStorage)
	{
		alert("不支持");
	}else{
		alert("支持");
	}
</script>

localStorage与sessionStorage语法写法

如存储语句,写成window.localStorage.setItemlocalStorage.setItem都可以
sessionStorage也是一样,我们只需要将localStorage换成sessionStorage即可

localStorage存储

我们通过以下方式将数据储存到localStorage中
localStorage.setItem('key',value)

Object类型的存储,如JSON数据

后面的读取也一样
但有时value为一个对象Object,以上面的方式写入,会出现读取的返回值为
{object Object}的情况,但这并不是我们想要的,此时我们需要使用新的方式
传入Object,如我们的
localStorage.setItem('param',JSON.stringify(Object))
通过JSON.stringify(Object)方法将对象转化为一个json格式的字符串进行存储

localStorage读取

我们通过以下方式来读取localStorage中的值
localStorage.getItem("key")
相对的在读取json格式字符串只有我们也无法直接使用,需要将它转换为josn对象之后才是我们想要的结果,所以我们需要调用 JSON.parse()方法来进行转化,
之后在继续使用
JSON.parse(localStorage.getItem("key"))

localStorage删除

我们通过以下方法来删除对应key以及key中的内容
localStorage.removeItem('key')

清空localStorage中所有的key

注意:请谨慎使用,它会清空所有的本地存储数据
localStorage.clear()

遍历存储的数据

当你不清楚本地localStorage存储了多少数据的时候,用key(index)方法绝对是一个不错的选择,key(index)方法可以遍历localStorage存储的key。写个简单的例子:

for(i=0;i<localStorage.length;i++){
  document.write(localStorage.key(i)+":"+localStorage.getItem(localStorage.key(i))+"<br/>");
}

 

  • ocalStorage.length表示本地存储数据的总量;
  • localStorage.key(i),表示获取第i个数据的key;
  • localStorage.getItem(localStorage.key(i)),表示获取第i个数据的value。

一个存储 读取 localStorage的小例子

<script>
	var arr = {"name":"moomoo","age":2,"eat":"apple"};
	//存储
	localStorage.setItem("arrs",JSON.stringify(arr));
	//读取
	ar = JSON.parse(localStorage.getItem("arrs"));
</script>

打开控制台,便可看到刚才的内容已经存储,关闭浏览器后再打开依然存在

适合

非常适合于编辑器编辑数据,隔几秒本地存储一次,这样如果一不小心浏览器关闭,依然可以从本地读取出来刚才的数据,我们只需要在读取时加上一些小判断就可以。

localStorage、sessionStorage 可用于本地暂时存储 如cookie一样

对于不支持的浏览器进行支持的方法

可以在你编写的 JavaScript代码的首部插入下面两段代码中的任意一种方法
第一种方法
if (!window.localStorage) {
  Object.defineProperty(window, "localStorage", new (function () {
    var aKeys = [], oStorage = {};
    Object.defineProperty(oStorage, "getItem", {
      value: function (sKey) { return sKey ? this[sKey] : null; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "key", {
      value: function (nKeyId) { return aKeys[nKeyId]; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "setItem", {
      value: function (sKey, sValue) {
        if(!sKey) { return; }
        document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "length", {
      get: function () { return aKeys.length; },
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "removeItem", {
      value: function (sKey) {
        if(!sKey) { return; }
        var sExpDate = new Date();
        sExpDate.setDate(sExpDate.getDate() - 1);
        document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; 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 iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) {
        iCouple = aCouples[iCouplId].split(/\s*=\s*/);
        if (iCouple.length > 1) {
          oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]);
          aKeys.push(iKey);
        }
      }
      return oStorage;
    };
    this.configurable = false;
    this.enumerable = true;
  })());
}
第二种方法
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) + "; path=/";
      this.length = document.cookie.match(/\=/g).length;
    },
    length: 0,
    removeItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
      var sExpDate = new Date();
      sExpDate.setDate(sExpDate.getDate() - 1);
      document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; 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;
}


评论

大侠名号:   验证暗号: 点击我更换图片

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND