Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >VUE2.0 学习(二十)浏览器本地存储localStorage 和 sessionStorage

VUE2.0 学习(二十)浏览器本地存储localStorage 和 sessionStorage

作者头像
一写代码就开心
发布于 2022-05-09 01:53:48
发布于 2022-05-09 01:53:48
52500
代码可运行
举报
文章被收录于专栏:java和pythonjava和python
运行总次数:0
代码可运行

目录

  • localStorage
  • sessionStorage
  • 两者区别

localStorage

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript" >
			let p = {name:'张三',age:18}
		// 保存一个数据
			function saveData(){
				localStorage.setItem('msg','hello!!!')
				localStorage.setItem('msg2',666)
				localStorage.setItem('person',JSON.stringify(p))
			}


			// 读取一个数据
			function readData(){
				console.log(localStorage.getItem('msg'))
				console.log(localStorage.getItem('msg2'))

				const result = localStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(localStorage.getItem('msg3'))
			}

			// 删除一个数据
			function deleteData(){
				localStorage.removeItem('msg2')
			}


			// 清空一个数据
			function deleteAllData(){
				localStorage.clear()
			}
		</script>

sessionStorage

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript" >
			let p = {name:'张三',age:18}
			// 保存一个数据
			function saveData(){
				sessionStorage.setItem('msg','hello!!!')
				sessionStorage.setItem('msg2',666)
				sessionStorage.setItem('person',JSON.stringify(p))
			}

			// 读取一个数据
			function readData(){
				console.log(sessionStorage.getItem('msg'))
				console.log(sessionStorage.getItem('msg2'))

				const result = sessionStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(sessionStorage.getItem('msg3'))
			}


			// 删除一个数据
			function deleteData(){
				sessionStorage.removeItem('msg2')
			}


			// 清空一个数据
			function deleteAllData(){
				sessionStorage.clear()
			}
		</script>

两者区别

localStorage 浏览器关闭之后,数据打开还在

sessionStorage浏览器关闭之后,数据打开不在

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-10-24,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue2知识点:浏览器本地缓存
<font color='red'>浏览器本地缓存实际是js的知识点,这里只是提一下加深下印象</font>
刘大猫
2024/10/27
1360
每日一学vue2:浏览器本地存储(webStorage)
xxxStorage.setItem('key','value'):该方法接收一个键和参数,会把键值对添加到存储中,如果键名存在,更新起对应内容
淼学派对
2022/11/20
2K1
每日一学vue2:浏览器本地存储(webStorage)
本地存储——sessionStorage和localStorage
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。
岳泽以
2022/10/26
9790
vue浏览器缓存问题_vue兼容浏览器能兼容到几
localStorage -持久化的本地存储,除非主动删除数据,否则数据永远不会过期.
全栈程序员站长
2022/09/27
7370
本地存储
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。
梨涡浅笑
2022/05/08
1.5K0
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
鉴于目前浏览器技术的进步(主要是HTML5的普及),在Web网页端IM聊天应用的技术选型阶段,很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地,还是像传统Web端即时通讯那样继续存储在服务端?本文将为你简洁明了地讲清楚浏览器本地存储技术(Web Storage),然后你就知道到底该怎么选择了。
JackJiang
2024/11/28
1060
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
LocalStorage与SessionStorage
localStorage和sessionStorage是HTML5提供的对于Web存储的解决方案
WindRunnerMax
2020/08/27
6520
H5 App实战三:H5 App的本地存储
这篇文章介绍了以Java语言为基础,详解如何开发一个游戏客户端。我们会讨论客户端的基本架构设计,数据处理流程,以及与服务器的通信机制。通过源码解析和应用案例分享,进一步分析客户端开发中的常见挑战和解决方案。此外,文章将通过优缺点分析、核心类方法介绍以及测试用例。整体内容全面,步骤清晰,非常适合读者学习和参考。
china马斯克
2024/11/23
3950
浏览器本地存储方案
浏览器本地存储方案可以分为三个方面,分别为Cookie、Web Storage、IndexedDB。
WindRunnerMax
2021/01/18
7550
sessionStorage和localStorage的语法使用,区别和联系
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
德顺
2019/11/12
1.2K0
localStorage和sessionStorage用法小总结
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
OECOM
2020/07/01
1.1K0
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
HTML5本地存储:从入门到精通
💡 概念: HTML5本地存储是一种允许Web应用程序在用户浏览器端本地保存数据的技术,无需依赖服务器。它增强了Web应用的离线功能、个性化设置保留以及性能优化。
空白诗
2024/06/14
2760
本地存储
为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。
星辰_大海
2020/10/09
1.6K0
H5缓存
1.sessionStorage <script type="text/javascript"> var txt = document.querySelector('input'); var btns = document.querySelectorAll('button'); //存储数据 btns[0].onclick=function(){ sessionStorage.setItem('userName',txt.value); ses
天天_哥
2018/09/29
1.1K0
vue中sessionStorage的使用
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。 sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。 提示: 如果你想在浏览器窗口关闭后还保留数据,可以使用 localStorage 属性, 改数据对象没有过期时间,今天、下周、明年都能用,除非你手动去删除。
kirin
2020/10/09
3.8K0
vue中使用localStorage存储信息
对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage
py3study
2021/03/15
3.2K0
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
8820
Vue localStorage使用
JavaScript强化教程——sessionStorage和localStorage
本文介绍了JavaScript中的Web Storage,包括sessionStorage和localStorage,以及如何使用它们来存储和读取数据。同时,还介绍了如何判断浏览器是否支持localStorage和sessionStorage,以及如何使用JavaScript操作它们。
IMWeb前端团队
2018/01/08
9740
JavaScript localStorage 的使用
在 HTML5 问世后,介绍了 Web Storage 的使用 — 可以将网页中的数据存储在用户的浏览器当中 — 也就是说可以在客户端存储数据。使用上的好处在于大部分浏览器都有支持、可以存储数据的容量大多有 5MB 以上、且数据存储和提取相对简单方便。
写bug的高哈哈
2025/01/19
1960
相关推荐
vue2知识点:浏览器本地缓存
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验