localStorage 与 sessionStorage 浏览器缓存调用API

原创已于 2022-11-28 16:25:56 修改 · 177 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#缓存

于 2022-10-21 16:19:44 首次发布

前端专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在前端使用localStorage和sessionStorage进行数据存储和读取，包括将对象转化为字符串进行存储，以及如何通过JSON.parse()恢复数据。同时，列举了这两种存储方式的基本操作，如设置、获取、移除和清空数据。

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

存储内容为对象时需要转回为字符串存储

存储

 let oldQuery= {
    name:'xy',
    age:'21'
}
let objStr = JSON.stringify(obj)
sessionStorage.setItem('data-xy',objStr)
console.log(sessionStorage.getItem('oldQuery'))		// {"name":"xy","age":"21"}

使用

JSON.parse(sessionStorage.getItem('oldQuery'))

localStorage

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
 
localStorage.getItem("key");//获取名称为“key”的值
 
localStorage.removeItem("key");//删除名称为“key”的信息。
 
localStorage.clear();//清空localStorage中所有信息

sessionStorage

sessionStorage.setItem("key","value");//以“key”为名称存储一个值“value”
 
sessionStorage.getItem("key");//获取名称为“key”的值
 
sessionStorage.removeItem("key");//删除名称为“key”的信息。
 
sessionStorage.clear();//清空sessionStorage中所有信息