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

最后编辑于：2017.12.20 13:09:58