Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >localStorage 的相关运用

localStorage 的相关运用

作者头像
子舒
发布于 2023-08-23 06:31:03
发布于 2023-08-23 06:31:03
35400
代码可运行
举报
运行总次数:0
代码可运行

localStorage 是浏览器自带的一个属性,只读的localStorage 属性允许你访问一个Document 源(origin)的对象 Storage;存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage,但其区别在于:存储在 localStorage 的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除。

应注意,无论数据存储在 localStorage 还是 sessionStorage ,它们都特定于页面的协议。

另外,localStorage 中的键值对总是以字符串的形式存储。 (需要注意,和 js 对象相比,键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).

localStorage 的使用也非常简单,分为存入和读取,可以将其绑定在事件方法中。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 存入
const arr= 100;
localStorage.setItem("key", JSON.stringify(arr));

// 读取
const arr = JSON.parse(localStorage.getItem("key"));

这里 "key" 指的是存到浏览器中的参数名,arr 则是参数值。

  1. localStorage.setItem("key", JSON.stringify(arr)); 这个方法就是将数组arr存到了浏览器的localStorage 中,它的参数名叫 key
  2. const arr = JSON.parse(localStorage.getItem("key")); 就是读取浏览器中参数名为 key 的参数值。

比如静态保存某个设置参数,可以将其写入数组中,然后通过 localStorage 存储,原本刷新就会显示默认设置,现在可以在每次刷新的适合读取存入的参数。

在一些场景下非常好用,比如开发一个油猴脚本等等。

清除 localStorage,分为清除所以的存储值和清除某个特定的 key。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 清除本地存储中的所有值
localStorage.clear(); 

// 本地存储中删除特定项
localStorage.removeItem(key);
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-10-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
js本地存储:localStorage
localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库
超级小可爱
2023/03/24
5K0
js本地存储:localStorage
每日一学vue2:浏览器本地存储(webStorage)
xxxStorage.setItem('key','value'):该方法接收一个键和参数,会把键值对添加到存储中,如果键名存在,更新起对应内容
淼学派对
2022/11/20
2K1
每日一学vue2:浏览器本地存储(webStorage)
vue中使用localStorage存储信息
对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage
py3study
2021/03/15
3.2K0
LocalStorage与SessionStorage
localStorage和sessionStorage是HTML5提供的对于Web存储的解决方案
WindRunnerMax
2020/08/27
6530
VUE2.0 学习(十九)浏览器本地存储localStorage 和 sessionStorage
目录 localStorage sessionStorage 两者区别 localStorage <script type="text/javascript" > let p = {name:'张三',age:18} // 保存一个数据 function saveData(){ localStorage.setItem('msg','hello!!!') localStorage.setItem('msg2',666) localStorage.setItem('pe
一写代码就开心
2021/10/26
6990
Vue localStorage使用
localStorage #1 环境 "vue": "^2.5.2", "axios": "^0.19.0", "vue-axios": "^2.1.4", "vue-router": "^3.0.1" #2 使用 localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。 sessionStorage默认的有效期是浏览器的会话时间(也就是说标签页关闭后就消失了)。 localStorage作用域是协议、主机名、端口。(理论
Autooooooo
2020/11/09
8830
Vue localStorage使用
localStorage和sessionStorage用法小总结
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
OECOM
2020/07/01
1.1K0
本地存储——sessionStorage和localStorage
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。
岳泽以
2022/10/26
9790
本地存储
为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。
星辰_大海
2020/10/09
1.6K0
一个比 Cookie 更好的本地存储方式 – HTML5 Web 存储
这些功能不需要长期保存,也不需要入数据库,所以有人可能会考虑使用 Cookie 去进行存储,但是 Cookie 中每条的存储空间为 4k,存储太多的数据时可能会出现存储空间不足的问题
沈唁
2018/12/25
2.1K1
vue浏览器缓存问题_vue兼容浏览器能兼容到几
localStorage -持久化的本地存储,除非主动删除数据,否则数据永远不会过期.
全栈程序员站长
2022/09/27
7370
运用惰性删除和定时删除实现可过期的localStorage缓存
使用localStorage可以在浏览器中存储键值对的数据。经常被和localStorage一并提及的是sessionStorage,它们都可以在当浏览器中存储键值对的数据。但是它们之间的区别是:存储在localStorage的数据可以长期保留;而当页面会话结束(也就是当页面被关闭)时,存储在sessionStorage的数据会被清除。
万猫学社
2022/04/22
1.4K0
HTML5规范的本地存储
在HTML5 中定义了两种本地存储的,Web Storage 和本地数据库 SQL Database .   用来检查判断浏览器是否支持 Web Storage   if(window.localStorage){     //浏览器支持localStorage   }   if(window.sessionStorage){     //浏览器支持sessionStorage   } localStorage 主要作用是将数据保存在客户端中,也就是用户的计算机上。 是基于域的,
用户1197315
2018/01/19
2.4K0
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
鉴于目前浏览器技术的进步(主要是HTML5的普及),在Web网页端IM聊天应用的技术选型阶段,很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地,还是像传统Web端即时通讯那样继续存储在服务端?本文将为你简洁明了地讲清楚浏览器本地存储技术(Web Storage),然后你就知道到底该怎么选择了。
JackJiang
2024/11/28
1060
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
【Vuejs】总结- Vue 存储插件的底层原理,你不知道的 localStorage API
当谈到 Web 应用的客户端存储时,localStorage API 脱颖而出,它允许开发者直接在浏览器中存储键值对。
pingan8787
2024/05/30
3460
【Vuejs】总结- Vue 存储插件的底层原理,你不知道的 localStorage API
【前端工具类】001-本地存储工具类:LocalStorageUtil
訾博ZiBo
2025/01/06
840
webapi(六)- BOM
Window是浏览器内置的全局对象(也叫顶级对象),我们学习的所有Webapi知识都是基于Window对象实现的。 DOM BOM都是属于window对象
且陶陶
2023/04/12
1K0
webapi(六)- BOM
vue2知识点:浏览器本地缓存
<font color='red'>浏览器本地缓存实际是js的知识点,这里只是提一下加深下印象</font>
刘大猫
2024/10/27
1360
测试开发必备!webStorage 浏览器本地存储数据(附项目实战案例!)
前期分享的 200行纯前端Vue代码!教你写一个专属TodoList【零基础友好】
Wu_Candy
2022/07/05
6040
localstorage跟sessionstorage
能查到证明有人指引,直接上代码 <script type="text/javascript"> function cunchu1(){ var arr = [ 1, 2, 3 ]; localStorage.setItem("temp", arr); //存入 参数: 1.调用的值 2.所要存入的数据 console.log(localStorage.getItem("temp"));//输出 }
陈灬大灬海
2018/09/12
9810
相关推荐
js本地存储:localStorage
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验