localStorage本地存储

localStorage

  • 首先要 var storage = window.localStorage
  var storage=window.localStorage;

三种方式分别是:. 和 [] 和 setItem("key","val")

    var storage=window.localStorage;
    storage.a="warm";
    storage['b']="warm1";
    storage.setItem("c","warm2");
    console.log(storage.a) //warm
    console.log(storage.b) //warm1
    console.log(storage.c) //warm2
    

三种方式分别是:.和[]和 storage.getItem("key")

   var storage=window.localStorage;
    storage.a="warm";
    storage['b']="warm1";
    storage.setItem("c","warm2");
    console.log(storage.a)
    console.log(storage["b"])
    console.log(storage.getItem("c"))

clear() 全部删除 和 removeItem("key")移除某一个

var storage=window.localStorage;
    storage.a="warm";
    storage['b']="warm1";
    storage.setItem("c","warm2");

    storage.clear()//全部移除
    storage.removeItem("b")//只移除b

  • 循环
  var storage=window.localStorage;
    storage.a="warm";
    storage['b']="warm1";
    storage.setItem("c","warm2");
   //console.dir(storage);
    var ary=[]
   for(var i=0;i<storage.length;i++){
       console.log(storage.key(i))//a,b,c
       ary.push(storage.getItem(storage.key(i)))// 取value
    }
    console.log(ary);//["warm", "warm1", "warm2"]
  • 注意事项
    • 一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式;
      这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串
    • 读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法
  • localStorage 优缺点
  • 优势:
    1、localStorage拓展了cookie的4K限制
    2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,IE8以上支持
  • 不足:
    1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
    2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
    3、localStorage在浏览器的隐私模式下面是不可读取的
    4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
    5、localStorage不能被爬虫抓取到

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