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中的键值对会被清空