Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >vue中sessionStorage的使用

vue中sessionStorage的使用

作者头像
kirin
发布于 2020-10-09 03:12:43
发布于 2020-10-09 03:12:43
4K0
举报
文章被收录于专栏:Kirin博客Kirin博客

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。 sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。 提示: 如果你想在浏览器窗口关闭后还保留数据,可以使用 localStorage 属性, 改数据对象没有过期时间,今天、下周、明年都能用,除非你手动去删除。

1.方法

代码语言:javascript
AI代码解释
复制
sessionStorage.key(int index) //返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。
sessionStorage.getItem(string key) //返回键名(key)对应的值(value)。若没有返回null。
sessionStorage.setItem(string key, string value) //该方法接受一个键名(key)和值(value)作为参数,将键值对添加到存储中;如果键名存在,则更新其对应的值。
sessionStorage.removeItem(string key) //将指定的键名(key)从 sessionStorage 对象中移除。
sessionStorage.clear() //清除 sessionStorage 对象所有的项。

2,存储数据

2.1 采用setItem()方法存储

代码语言:javascript
AI代码解释
复制
sessionStorage.setItem(‘testKey’,’这是一个测试的value值’); // 存入一个值

2.2 通过属性方式存储

代码语言:javascript
AI代码解释
复制
sessionStorage[‘testKey’] = ‘这是一个测试的value值’;

2.3 存储Json对象

代码语言:javascript
AI代码解释
复制
sessionStorage也可存储Json对象:存储时,通过JSON.stringify()将对象转换为文本格式;读取时,通过JSON.parse()将文本转换回对象。
 var userEntity = {
 name: ‘tom’,
 age: 22
 };
// 存储值:将对象转换为Json字符串
 sessionStorage.setItem(‘user’, JSON.stringify(userEntity));
// 取值时:把获取到的Json字符串转换回对象
 var userJsonStr = sessionStorage.getItem(‘user’);
 userEntity = JSON.parse(userJsonStr);
 console.log(userEntity.name); // => tom

3,读取数据

3.1 通过getItem()方法取值

代码语言:javascript
AI代码解释
复制
sessionStorage.getItem(‘testKey’); // => 返回testKey对应的值

3.2 通过属性方式取值

代码语言:javascript
AI代码解释
复制
sessionStorage[‘testKey’]; // => 这是一个测试的value值
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/10/02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
复制标签页导致的Vue动态路由失效问题解决思路
自己开发的快速开发框架,前端自己开发的动态路由,但我发现通过浏览器复制标签页打开的新标签页无法加载动态路由。
全栈开发日记
2025/09/28
2760
复制标签页导致的Vue动态路由失效问题解决思路
Vue+ElementUI 搭建后台管理系统(实战系列二)
使用ElementUI已经有一段时间了,在一边上手开发后台管理系统的同事,也记录了一些笔记,一直都没有时间将这些零零散散的笔记总结起来,整理成一个比较系统详细一点的教程,可以留着以后来看。
王小婷
2021/11/24
2.9K0
Vue+ElementUI 搭建后台管理系统(实战系列二)
web本地存储localStorage和sessionStorage
记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息
用户1055830
2019/05/25
5.3K0
JavaScript localStorage 的使用
在 HTML5 问世后,介绍了 Web Storage 的使用 — 可以将网页中的数据存储在用户的浏览器当中 — 也就是说可以在客户端存储数据。使用上的好处在于大部分浏览器都有支持、可以存储数据的容量大多有 5MB 以上、且数据存储和提取相对简单方便。
写bug的高哈哈
2025/01/19
3690
都2022年了你还不知道Stronge本地存储么
前言:我们这篇主要是说JavaScript的本地存储web Storage,首先我们需要了解一下客户端存储的几种方式。
大熊G
2022/11/18
8640
都2022年了你还不知道Stronge本地存储么
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
7660
localStorage和sessionStorage用法小总结
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
OECOM
2020/07/01
1.1K0
vuex存储和本地存储(localstorage、sessionstorage)的区别
1.区别:vuex存储在内存,localstorage(本地存储)则以文件的方式存储在本地,永久保存;sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。
TimothyJia
2020/04/02
2.3K0
一个比 Cookie 更好的本地存储方式 – HTML5 Web 存储
这些功能不需要长期保存,也不需要入数据库,所以有人可能会考虑使用 Cookie 去进行存储,但是 Cookie 中每条的存储空间为 4k,存储太多的数据时可能会出现存储空间不足的问题
沈唁
2018/12/25
2.2K1
vue sessionStorage存值取值问题
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
王小婷
2022/01/09
2.8K0
vue sessionStorage存值取值问题
医美小程序实战教程(三)
我们上一篇介绍了javascript中的export、import语法,本篇我们继续。
低代码布道师
2021/11/07
8060
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
鉴于目前浏览器技术的进步(主要是HTML5的普及),在Web网页端IM聊天应用的技术选型阶段,很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地,还是像传统Web端即时通讯那样继续存储在服务端?本文将为你简洁明了地讲清楚浏览器本地存储技术(Web Storage),然后你就知道到底该怎么选择了。
JackJiang
2024/11/28
2570
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
H5 App实战三:H5 App的本地存储
这篇文章介绍了以Java语言为基础,详解如何开发一个游戏客户端。我们会讨论客户端的基本架构设计,数据处理流程,以及与服务器的通信机制。通过源码解析和应用案例分享,进一步分析客户端开发中的常见挑战和解决方案。此外,文章将通过优缺点分析、核心类方法介绍以及测试用例。整体内容全面,步骤清晰,非常适合读者学习和参考。
china马斯克
2024/11/23
6360
Vuex数据页面刷新丢失问题解决方案
用Vue做项目开发很久了,对于vuex能用、会用,但是因为状态脱离页面和刷新丢失两个原因,一直都有种抵触,特别是一些简单的数据都是通过query或者本地存储就解决了,然而对于一些复杂内容,不可避免的还是要使用Vuex去处理(真香),但是刷新丢失的问题,的确叫人头大。最近闲下来,我们来研究下怎么干掉这个问题~
木子墨
2019/03/01
3K0
vuex + sessionstorage 解决vue项目刷新后页面空白/数据丢失
首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里:
xing.org1^
2018/08/02
3.4K0
vuex + sessionstorage  解决vue项目刷新后页面空白/数据丢失
关于HTML5中的sessionStorage和localStorage
需求:     做项目的时大多数情况下我们需要对请求的数据进行多次复用,为了降低请求次数我们需要对请求的数据进行本地存储;    以前用的cooking来存储为本地数据,HTML5后提出sessioStorage、localStorage,那么我们来看看三者的区别(大致了解下,不是本博文重点)。 cooking Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。 SessionStorage: 将数
大当家
2018/06/28
1.5K0
vue浏览器缓存问题_vue兼容浏览器能兼容到几
localStorage -持久化的本地存储,除非主动删除数据,否则数据永远不会过期.
全栈程序员站长
2022/09/27
8380
JS如何使用sessionStorage实现计数器功能
http://mpvideo.qpic.cn/0bc3rmaheaaadeaayq3ipvrvbc6dokfqa4qa.f10002.mp4?dis_k=4031fc91448cb61bf867060
itclanCoder
2022/12/07
1.9K0
本地存储——sessionStorage和localStorage
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。
岳泽以
2022/10/26
1.1K0
本地存储之sessionStorage
  复制链接地址打开网页不会复制seessionStorage内的数据
ProsperLee
2018/10/24
1.7K0
相关推荐
复制标签页导致的Vue动态路由失效问题解决思路
更多 >
交个朋友
加入前端学习入门群
前端基础系统教学 经验分享避坑指南
加入腾讯云技术交流站
前端技术前沿探索 云开发实战案例分享
加入前端趋势交流群
追踪前端新趋势 交流学习心得
换一批
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
首页
学习
活动
专区
圈层
工具
MCP广场
首页
学习
活动
专区
圈层
工具
MCP广场