关于LocalStorage

最新推荐文章于 2022-06-24 14:12:32 发布

爱学习的廖某

最新推荐文章于 2022-06-24 14:12:32 发布

阅读量256

点赞数 1

分类专栏： JS 文章标签：爬虫 javascript

本文链接：https://blog.youkuaiyun.com/qq_48739475/article/details/121123123

版权

JS 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了浏览器中的本地存储技术，包括cookie、localStorage和sessionStorage的区别与使用方法。对比了它们的存储容量，探讨了localStorage的持久性和sessionStorage的会话限制特性，并提供了具体的实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cookie中每个cookie的存储空间为4k

localStorage中一般浏览器支持的是5M（不同浏览器会有不同）

localStorage不能被爬虫抓取到

localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

localStorage的使用：

//1.首先判断浏览器是否支持 localStorage
if(!window.localStorage){
  alert("浏览器支持localStorage")
}else{
  alert("换种方式吧")
}

//2.获得该对象
var st = window.loacalStorage;

//3.设置值的三种方式
st["a"] = 1;         
st.b = 20;
st.setItem("c",3);     //重点

//4.读取值的三种方式（注意：存进去什么，取出来都是String）
console.log(st.a)
console.log(st["b"])
console.log(st.getItem("c"))

console.log(storage)  //Storage {b:'2',c:'3',a:'1',length:3}  --> 有自带length属性

//删除一个数据
st.removeItem("a")
console.log(st.getItem("a"))   //null

//删除所有数据
st.clear();
console.log(st.length)    //0

JSON使用要注意：

1.存入: localStorage 会自动将 json 转为字符串 --> JSON.stringify()

2.读取: 要将读出来的 Json 字符串转为JSON对象 --> JSON.parse()

应用：通常我们所见的刷新网页搜索历史，或者用户已经选定的一些选项（并未登陆，不通过数据库取值），这些都是通过localStorage或sessionStorage保存到本地浏览器的，可以保证刷新页面但不改变用户之前的一些操作