localStorage

_不吃猫的鱼_2023-11-22 23:03

localStoragelocalStorage可以将第一次请求的数据直接存储到本地，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小(不同的浏览器有所不同)。

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

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

localStorage生命周期是永久
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了

复制代码

//判断浏览器是否支持
if(!window.localStorage){
    alert("浏览器不支持localstorage");
    return false;
}else{
    //主逻辑业务
    var storage=window.localStorage;
    //写入a字段
    storage["a"]=1;
    //写入b字段
    storage.b=2;
    //写入c字段
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    console.log(typeof storage["b"]);
    console.log(typeof storage["c"]);//打印出来的都是string类型
}

官方推荐的是getItem\setItem这两种方法对其进行存取

复制代码

var storage=window.localStorage;
//增
storage["a"]=1;
storage.b=2;
storage.setItem("c",3);
//删
storage.clear();//删除所有内容
storage.removeItem("a");//删除某个键值对
//改
storage.a=4;
//查
for(var i=0;i<storage.length;i++){
    var key=storage.key(i);
    console.log(key);
}

JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式,可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

复制代码

var data={
    name:'xiecanyong',
    sex:'man',
    hobby:'program'
};
//将JSON对象转换成为字符串
var d=JSON.stringify(data);
storage.setItem("data",d);
//将字符串转换成为JSON对象
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);