localStorage-cookie-sessionStorage

localStorage 与 cookie :

localStorage 中一般浏览器支持的是 5M大小,在不同浏览器中 localStorage 会有所不同。

  • cookie 中每条 cookie 的存储空间为 4K
  • 优点:拓展了 cookie 的 4k 限制, 可以将第一次请求的数据直接存储到本地,但只有在高版本的浏览器中才支持。

localStorage 与 sessionStorage :

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

使用

使用前先判断浏览器是否支持 localStorage 这个属性:

if(!window.localStorage){
alert(“浏览器不支持localstorage");
return false;
}else{
//主逻辑业务
}

localStorage 写入的三种方法( localStorage 只支持 string 类型的存储)

var storage=window.localStorage;
// 1、写入a字段
storage[“a”] = 1;
// 2
storage.a = 1;
// 3
storage.setItem(“a”, 3);

localStorage 读取的三种方法

// 1
var a = storage.a;
// 2
var a = storage[“a”];
// 3
var a = storage.getItem(“a”);

官方推荐 getItem/setItem 这两种方法进行存取

localStorage 更改

storage[“a”] = 1;
storage.a=4;

localStorage 删除

// 全部清除
storage.clear();
// 某个键值对删除
storage.removeItem(“a”);

localStorage 键获取

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}

注意事项

当我们将 json 存入到 localStorage 中时,localStorage 会自动将 localStorage 转换为字符串形式,我们需要用 JSON.stringify() 方法,将 JSON 转换为 JSON 字符串。
读取之后要将 Json 字符串转换为 json 对象, 使用 JSON.parse() 方法

常言道:学然后知不足,教然后知困。

我知道你的焦虑,一起共进加油:P

关不关注都无所谓,会根据生活节奏紧凑都定期分享些开发经验、搬砖生涯、痛点、感悟。

欢迎关注我的订阅号:P