js-前端存储之sessionStorage

1.使用场景

   sessionStorage 是 Web Storage API 提供的一种客户端存储机制,用于在浏览器中保存会话级别(session-level)的数据。与 localStorage 不同,sessionStorage 中存储的数据在用户关闭标签页或浏览器窗口时会被清除。

2.使用方法

        使用 sessionStorage 对象来存储键值对数据,并在当前会话期间访问这些数据。以下是一些常见的 sessionStorage 方法:

  • sessionStorage.setItem(key, value): 将键值对数据存储到会话存储中。
  • sessionStorage.getItem(key): 获取指定键对应的值。
  • sessionStorage.removeItem(key): 从会话存储中移除指定键及其对应的值。
  • sessionStorage.clear(): 清空会话存储中的所有数据。

3.示例 

// 将数据存储到会话存储中
sessionStorage.setItem('username', 'johnDoe');// 从会话存储中获取特定键对应的值
const username = sessionStorage.getItem('username');
console.log(username); // 输出 'johnDoe'// 从会话存储中移除指定键及其对应的值
sessionStorage.removeItem('username');// 清空会话存储中的所有数据
sessionStorage.clear();

        需要注意的是,sessionStorage 中存储的数据仅在当前会话期间有效。如果用户关闭标签页或浏览器窗口,这些数据将被清除。

sessionStorage.setItem与sessionStorage.getItem

        sessionStorage.getItem 是 Web Storage API 中的一种方法,用于从会话存储中获取特定键对应的值。会话存储(session storage)是浏览器提供的一种存储机制,可以在当前会话期间(即在同一个标签页或窗口打开的情况下)保存数据。

// 将数据存储到会话存储中
sessionStorage.setItem('username', 'johnDoe');// 从会话存储中获取特定键对应的值
const username = sessionStorage.getItem('username');
console.log(username); // 输出 'johnDoe'

        使用 sessionStorage.setItem 方法将键为 'username' 的值设置为 'johnDoe'。然后使用 sessionStorage.getItem 方法来获取键为 'username' 的值,并将其赋给变量 username

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/689736.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp小程序因使用 uni.switchTab传不了值使用vuex(简单明了)

uniapp里面不需要npm下载vuex,自带vuex直接用就行 一、先建立一个index.js文件夹 里面写如以下代码 import Vue from vueimport Vuex from vuexVue.use(Vuex)const store new Vuex.Store({state: {userExt: null},mutations: {//相当于同步的操作setUserExt(sta…

查询获取SMBIOS的方法

一、用于在本地查询 SMBIOS 的示例 PowerShell 脚本 Microsoft网站参考 以下 ChassisTypes 列表是从最新的 DMTF SMBIOS 规范复制的。 # Set-ExecutionPolicy or Script Signing documentation needs to be reviewed # Current script is designed to run on individual mach…

x86下使用硬件实现的任务切换(TSS表)---使用代码讲解

实现任务切换(使用TSS) 视频讲解可以看这一个课程 • The current program, task, or procedure executes a JMP or CALL instruction to a TSS descriptor in the GDT. • The current program, task, or procedure executes a JMP or CALL instruction to a task-gate descri…

Spring Event详解

Spring Event详解 1.详细介绍2.使用场景3.注意事项4.案例分析5.代码实现6.与消息队列的区别7.SpringEvent结合线程池异步实现 1.详细介绍 Spring Event是Spring框架内建的一种发布/订阅(Publish-Subscribe)模式的实现,它允许应用内部不同组件…

并查集,真好用,一次AC不是梦!

文章目录 🚀前言🚀并查集🚀并查集的两个优化✈️路径压缩✈️按秩合并 🚀并查集代码模板 🚀前言 大家好啊!今天阿辉来给大家介绍一种简洁而优雅的数据结构——并查集,不知道各位是否了解它&…

ssh连接服务器需要子网掩码吗?

IP寻址需要同时知道IP地址和子网掩码,但是在通过ssh连接服务器时,只需要知道IP地址和端口号就可以了,ssh通讯为什么不需要子网掩码呢。在不知道子网掩码的前提下,可以正确找到IP对应的主机吗? 不需要,SSH&a…

桌面显示器应用Type-C接口

随着科技的飞速发展,桌面显示器作为我们日常工作中不可或缺的设备之一,也在不断地更新换代。其中,Type-C接口的应用成为了桌面显示器发展的一个重要趋势。那么,桌面显示器应用Type-C接口究竟有什么好处呢? 首先&#x…

职场隐私守则:关系再好也别碰这些“雷区”

在职场中,与同事建立良好的关系是非常重要的,它有助于提高工作效率、增进团队协作,并且能够为日常的工作带来便利。 然而,即便与同事的关系再亲密,也有一些隐私话题是绝对不能轻易透露的。 在与同事和领导相处时&…

文章复现 | 差异分析和PPI网络构建

原文链接:差异分析和PPI网路图绘制教程 写在前面 在原文中,作者获得285个DEG,在此推文中共获得601个DEG。小杜的猜想是标准化的水段不同的原因吧,或是其他的原因。此外,惊奇的发现发表医学类的文章在附件中都不提供相…

【微信小程序】wxss 和 css 、wxml 和 html 区别

wxss 和 css 区别 wxss 支持小程序特有的选择器和 样式属性 scroll-into-view cover-view 等wxss 引入了 rpx 单位,可以根据屏幕宽度进行自适应,使得开发者可以更方便的处理不同尺寸屏幕的适配问题。wxss 背景图片只能引入外链,不能使用本地…

golang 获取域名 ip dns 信息

1 Go语言查找DNS A记录 A (Address) 记录是用来指定主机名(或域名)对应的IP地址记录. 用户可以将该域名下的网站服务器指向到自己的web server上. 同时也可以设置您域名的二级域名. 使用 Go 语言的标准库 net.LookupIP() 接受域名的字符串参数,返回 ne…

【零基础学习CAPL】——CAN报文的发送(LiveCounter——生命信号)

🙋‍♂️【零基础学习CAPL】系列💁‍♂️点击跳转 文章目录 1.概述2.面板创建3.系统变量创建4.CAPL实现5.效果5.1.0~15循环发送5.2.固定值发送6.全量脚本1.概述 本章主要介绍带有生命信号LiveCounter的报文发送脚本 一般报文可使用CANoe的IG模块直接发送,但存在循环冗余…

代码随想录算法训练营第三十六天|435.无重叠区间、763.划分字母区间、56.合并区间

435.无重叠区间 思路:找到删除几个区间,让题目给出的区间没有重叠部分,那么首先我们先进行排序(按照左边界排序),那么下一个区间的左边界小于上一个区间的右边界,那么这两个区间一定有重叠的部分…

燃气热水器水箱的气密性测试密封方案介绍—格雷希尔快速接头

家用燃气热水器的气密性检测是保障其安全性的重要环节之一,如热水器的水箱,它的周围缠绕着一圈铜管,这圈铜管和水箱之间有数量不等的焊接点,为了保证热水器的正常运行,必须要对它们进行气密性测试。   燃气热水器水箱…

文件且目录损坏无法读取怎么办?

文件及目录损坏无法读取是计算机使用过程中的常见故障,这可能是由于多种原因导致的,例如硬件故障、文件系统错误、病毒感染或不当操作等。本文将对这一问题进行深入分析,探讨其根本原因,并提供相应的解决方法,包括数据…

Gemini API模型详细信息一览表

Gemini API模型详细信息一览表,api模型:gemini-pro\gemini-pro-vision\embedding-001\aqa VariationAttributeDescriptionGemini ProModel last updatedFebruary 2024Model codemodels/gemini-proModel capabilities Input: textOutput: textGenerates …

ubuntu linux kernel内核操作

替换linux内核 实验步骤(在root权限下进行) 1.内核编译前的准备工作 2.下载内核 4. 编译新内核 5. 内核安装 6. 安装模块 7. 生成initrd.img文件 8. 切换到/boot/grub/目录下,自动查找新内核,并添加至grub引导 9. 重启Ubantu,在previous version中选择启动新编译的内核 …

Collectors.toMap使用记录

最近看到一行比较有趣的代码,他的功能就是将List转换为Map。我觉得挺有意思的,先前没遇到过,于是打算写篇文章记录一下。 public enum CodeEnum {USER("user"),AGE("age"),INTEREST("interest"),;private Str…

揭秘:一行代码搞定.Net API高并发的烦恼

高并发下的接口请求重复提交问题 在.Net开发中,我们经常遇到用户疯狂点击同一按钮,或者服务响应慢时重复发送请求,导致数据重复添加或混乱。这不仅浪费资源,更会得到错误的业务结果。如何高效解决这一普遍问题呢? 常规…

vscode 命令无法执行

以管理员启动powershell 输入set-ExecutionPolicy RemoteSigned yarn : 无法加载文件 D:\node\node_global\yarn.ps1。未对文件 D:\node\node_global\yarn.ps1 进行数字签名。无法在当前系统上运行该脚本。有关运行脚本和设置执行策略的详细信息,请参阅 https:/go…