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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
亿级流量客户端缓存之Http缓存与本地缓存对比
客户端缓存分为Http缓存和本地缓存,使用缓存好处很多,例如减少相同数据的重复传输,节省网络带宽资源缓解网络瓶颈,降低了对原始服务器的要求,避免出现过载,这样服务器可以更快响应其他的请求
架构之家
2022/09/01
1.9K0
亿级流量客户端缓存之Http缓存与本地缓存对比
一文读懂什么是http的强缓存以及协商缓存?简单易懂
浏览器首次请求资源后,需要再次请求时,浏览器会首先获取该资源缓存的header信息,然后根据Cache-Control和expires来判断该资源在本地缓存否过期。若没过期则直接从本地缓存中获取资源信息,浏览器就不再向服务器重新请求资源,如过期则需重新发送请求,重新缓存资源,更新缓存时间。
inline705
2021/12/09
3.2K0
一文读懂什么是http的强缓存以及协商缓存?简单易懂
如何通过Nginx配置来优化你的网络请求
为什么需要优化 缓存可以减少冗余的数据传输。节省了网络带宽,从而更快的加载页面。 缓存降低了服务器的要求,从而服务器更快的响应。 那么我们使用缓存,缓存的资源文件到什么地方去了呢?首先来看下有哪几种缓
兔云小新LM
2019/12/05
1.6K0
如何让浏览器不缓存文件
最近在项目开发中遇到一个需求:项目打包后,可以根据修改配置文件,进而动态替换页面上的文本。由于项目基本不涉及到后端,因此不考虑通过接口来修改。这就需要前端项目打包后需要暴露一个配置文件,每次页面刷新时会获取到最新的配置,达到动态替换页面文本的目的。
chuckQu
2022/08/19
3K0
浏览器 & HTTP 缓存策略
强缓存是指在缓存期间,请求不会发送到服务器,浏览器直接返回缓存结果,需要设置 Header:
leocoder
2020/03/27
6260
图解 HTTP 缓存
本文首发于政采云前端团队博客:图解 HTTP 缓存 https://www.zoo.team/article/http-cache
前端劝退师
2020/05/20
6640
强缓存与协商缓存
浏览器缓存是浏览器在本地磁盘对用户最近请求过的资源进行存储,当访问者再次访问同一资源时,浏览器就可以直接从本地磁盘加载资源,通过缓存的方式就可以减少与服务器的数据传输,减少服务器的负担,加快页面响应速度等。
WindRunnerMax
2020/08/27
1K0
HTTP 缓存机制
完整高频题库仓库地址:https://github.com/hzfe/awesome-interview
HZFEStudio
2021/09/28
1K0
【Http原理】请问 HTTP 是怎么进行缓存的?
HTTP 缓存是一块重要的内容,这是作为一个前端工程师必须要掌握的优化技能,也能让自己明白自己的工作,此次主要分了几个点进行总结
神仙朱
2019/08/02
6100
【Http原理】请问 HTTP 是怎么进行缓存的?
Web 性能优化-缓存-HTTP 缓存
HTTP 缓存通常要配合客户端(浏览器)使用才能发挥效果,所以又被称之为浏览器缓存,是 Web 性能优化的一大利器。
李振
2021/11/26
5880
HTTP缓存策略
缓存的作用就是提升网页加载速度。浏览器加载一个完整的网页势必会引用外部资源(图片,js,css)。若每次加载网页都要去加载这些外部资源则会引起不必要的时间和资源浪费,且会影响用户体验。而解决上述问题需要一个优秀的缓存策略。除此之外,web缓存的优点还有很多,例如:减轻服务器压力
ruochen
2021/11/25
6440
强制缓存和协商缓存的区别
浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档。
用户9914333
2022/12/14
1.1K0
强制缓存和协商缓存的区别
浏览器缓存机制剖析
“缓存一直是前端优化的主战场,利用好缓存就成功了一半。本篇从HTTP请求和响应的头域入手,让你对浏览器缓存有个整体的概念。最终你会发现强缓存,协商缓存 和 启发式缓存是如此的简单。 ” 导读 浏览器对
CSDN技术头条
2018/02/12
1.4K0
浏览器缓存机制剖析
设计一个完美的HTTP缓存策略
作为一个前端,了解http缓存是非常必要,它不仅是面试的必要环节,也更是实战开发中必不可少需要了解的知识点,本文作者将从缓存的概念讲到如何在业务中设计一个合理的缓存架构,带你一步一步解开http缓存的神秘面纱。
星哥玩云
2022/07/28
6430
设计一个完美的HTTP缓存策略
HTTP缓存和浏览器的本地存储
http请求做为影响前端性能极为重要的一环,因为请求受网络影响很大,如果网络很慢的情况下,页面很可能会空白很久。对于首次进入网站的用户可能要通过优化接口性能和接口数量来解决。但是,对于重复进入页面的用户,除了浏览器缓存,http缓存可以很大程度对已经加载过的页面进行优化。
用户5807183
2019/10/20
2K0
一文彻底搞懂前端缓存机制_2023-03-15
1)浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务器。比如某个css文件,如果浏览器在加载它所在的网页时,这个css文件的缓存配置命中了强缓存,浏览器就直接从缓存中加载这个css,连请求都不会发送到网页所在服务器;
用户10377405
2023/03/15
8340
详解web缓存(转)
缓存分为服务端侧(server side,比如 Nginx、Apache)和客户端侧(client side,比如 web browser)。常用的服务端缓存有CDN缓存,客户端缓存就是指浏览器缓存。
山河木马
2019/03/05
6200
详解web缓存(转)
HTTP缓存,浏览器缓存
可分为两大类:http缓存和浏览器缓存。我们今天重点讲的是http缓存,所以关于浏览器缓存大家自行去查阅。下面这张图是前端缓存的一个大致知识点:
回忆大大
2023/03/19
1.1K0
HTTP缓存,浏览器缓存
相关推荐
亿级流量客户端缓存之Http缓存与本地缓存对比
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验