html5本地存储

localStorage 和 sessionStorage

户端存储数据的两个对象为：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

缺点:

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
请在这里输入引用内容
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
请在这里输入引用内容
3、localStorage在浏览器的隐私模式下面是不可读取的
请在这里输入引用内容
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
请在这里输入引用内容
5、localStorage不能被爬虫抓取到
———————————————————————————————————————

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

让我看一下代码

if(!window.localStorage ){
  console.log("你的浏览器不支持这个属性")
}else{
  console.log("你的浏览器指出这个属性");
}

localStorage 对象

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

看这个实例

if (!window.localStorage){
       console.log("您的浏览器不支持")
   }else{
       console.log("您的浏览器支持");
       //存储数据
       let data = window.localStorage;
       data.setItem("name","徐世龙");
       data.setItem("age","12");
       console.log(data);
       // 读取数据
       let dataA = data.getItem("name");
       let dataB =data.getItem("age");
       console.log("我的名字:"+dataA);
       console.log("我的年龄:"+dataB);
       // 删除数据
       if(dataA != null){
            localStorage.removeItem("name");
            alert("数据删除了");
       }else{
           alert("hello"+dataA);
       }
       //清除所有数据
       localStorage.clear();

       // 写一条json数据
       let json = {"name":"xsl","age":"12"};
       console.log(json);
       // 转换成json
       let json1 = JSON.stringify(json);
       console.log(json1);
       //存储json数据
       data.setItem("aa",json1);
      // 读取数据
        let a = data.getItem("aa");
        console.log(a);
        let a1 =JSON.parse(a);
        console.log(a1);
        console.log(typeof a1);
   }

sessionStorage 对象同上 他们的方法都是相同的