首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将多个值保存到sessionStorage并显示它们?

在前端开发中,我们可以使用sessionStorage来保存多个值,并通过sessionStorage来显示它们。

首先,sessionStorage是HTML5提供的一种在浏览器端临时存储数据的机制,它是基于key-value的形式存储数据,而且仅在当前会话期间有效。当用户关闭浏览器标签页或浏览器窗口时,sessionStorage中的数据将被清除。

要将多个值保存到sessionStorage中并显示它们,我们可以按照以下步骤进行操作:

  1. 使用JavaScript代码创建一个存储对象,并将需要保存的值以key-value的形式存储到对象中。例如:
  2. 使用JavaScript代码创建一个存储对象,并将需要保存的值以key-value的形式存储到对象中。例如:
  3. 使用sessionStorage.setItem()方法将存储对象转换为字符串并保存到sessionStorage中。例如:
  4. 使用sessionStorage.setItem()方法将存储对象转换为字符串并保存到sessionStorage中。例如:
  5. 这里将存储对象使用JSON.stringify()方法转换为字符串,再通过sessionStorage.setItem()方法保存到sessionStorage中。其中,'myStorage'是存储的键名,可以自定义。
  6. 当需要显示保存的值时,我们可以使用sessionStorage.getItem()方法将保存的字符串取出,并将其转换为存储对象。例如:
  7. 当需要显示保存的值时,我们可以使用sessionStorage.getItem()方法将保存的字符串取出,并将其转换为存储对象。例如:
  8. 这里通过sessionStorage.getItem()方法获取到保存的字符串,然后使用JSON.parse()方法将字符串转换为存储对象。
  9. 现在,我们可以根据存储对象中的键名来获取对应的值,并将其显示在页面中。例如:
  10. 现在,我们可以根据存储对象中的键名来获取对应的值,并将其显示在页面中。例如:
  11. 这里通过存储对象的键名来获取对应的值,并将其输出到控制台中。你也可以根据具体需求来显示在页面的其他位置。

需要注意的是,sessionStorage只能存储字符串类型的值,所以在保存对象之前需要使用JSON.stringify()方法将对象转换为字符串,而在取出对象时需要使用JSON.parse()方法将字符串转换回对象。

如果你使用腾讯云进行云计算相关的开发,可以考虑使用腾讯云的COS(对象存储)服务来存储和管理文件。你可以通过访问腾讯云COS的官方文档来了解更多关于该服务的详细信息:腾讯云COS产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

localStorage 的相关运用

localStorage 类似 sessionStorage,但其区别在于:存储在 localStorage 的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage...应注意,无论数据存储在 localStorage 还是 sessionStorage它们都特定于页面的协议。 另外,localStorage 中的键值对总是以字符串的形式存储。...比如静态保存某个设置参数,可以将其写入数组中,然后通过 localStorage 存储,原本刷新就会显示默认设置,现在可以在每次刷新的适合读取存入的参数。...清除 localStorage,分为清除所以的存储和清除某个特定的 key。...// 清除本地存储中的所有 localStorage.clear(); // 本地存储中删除特定项 localStorage.removeItem(key);

24110
  • localStorage和sessionStorage本地存储 | 打卡每天一份劝退技能

    sessionStorage: 数据只保存到存储它的窗口或标签关闭时,数据在构建它们的窗口或标签内也可见 localStorage: 数据的生命周期比窗口或浏览器的生命周期长,数据可被同源的每个窗口或者标签共享...Storage对象是同源的,length属性只能反映同源的键/对数量 key方法,获取指定位置的键。 getItem方法,根据键返回相应的数据。...; storage.setItem("name",frm.name.value); storage.setItem("age", frm.age.value); } 遍历显示sessionStorage...storageArea属性:该属性是一个引用,指向发生改变的localStorage或sessionStorage。...sessionStorage存储的数据有些苛刻,页面刷新仍然有效,选项卡关闭时数据丢失。但是在相同标签页打开的多个iframe之间数据可以共享(同源的情况下)。

    98820

    关于 HTML5 LocalStorage 的 5 个不为人知的事实

    这种隔离的结果意味着保存到http://htmlui.com上的 LocalStorage 的不能被从https://htmlui.com的页面访问(反之亦然)。...SessionStorage 在某些浏览器重启后仍然存在 SessionStorage 与 LocalStorage 不同,它不是为在用户浏览器中长期保存而设计的。...这使得 SessionStorage 成为一种理想的存储技术,用于临时“备份”用户表单、在输入时将输入保存到 SessionStorage 以及在页面加载时恢复(如果存在),以进一步帮助用户从浏览器崩溃或意外页面刷新中恢复...这意味着当隐私浏览会话关闭时,保存到 LocalStorage 的任何内容都将被销毁,从而使 LocalStorage 的行为更像 SessionStorage。...并且由于两个站点位于同一来源,因此它们可以访问彼此的。(安全方面注意:这也意味着共享域上的站点,例如 apphost.com,都共享一个 HTML5 存储对象。请谨慎操作!)

    84730

    localStorage和sessionStorage本地存储

    image 知识点 使用HTML5中的Web Storage API, 可以在客户端存储更多的数据,,可以实现数据在多个页面中共享甚至是同步,对于复杂的数据,可以使用 Web SQL Database...sessionStorage: 数据只保存到存储它的窗口或标签关闭时,数据在构建它们的窗口或标签内也可见 localStorage: 数据的生命周期比窗口或浏览器的生命周期长,数据可被同源的每个窗口或者标签共享...; storage.setItem("name",frm.name.value); storage.setItem("age", frm.age.value); } 遍历显示sessionStorage...storageArea属性:该属性是一个引用,指向发生改变的localStorage或sessionStorage。...sessionStorage存储的数据有些苛刻,页面刷新仍然有效,选项卡关闭时数据丢失。但是在相同标签页打开的多个iframe之间数据可以共享(同源的情况下)。

    2K30

    浏览器之客户端存储

    名和在发送时都会经过 「URL 编码」。 浏览器会「存储」这些会话信息,并在之后的「每个请求」中都会通过 HTTP 头部 cookie 再「将它们发回服务器」。...❝子 cookie 是在「单个 cookie 存储的小块数据」,本质上是使用 「cookie 的」在「单个」 cookie 中存储「多个名/对」 ❞ name=name1=value1&name2=...也可以结合 sessionStorage 的 length 属性和 key()方法遍历「所有的」 + let len = sessionStorage.length; for (let i = 0;...(`${key}=`${value}`); } 也可以使用 for-in 循环迭代 sessionStorage: for (let key in sessionStorage){ let...let transaction = db.transaction("users"); 在事务期间只加载 users 对象存储的信息。(参数也可以是数组)。

    2.4K20

    每日一学vue2:浏览器本地存储(webStorage)

    webStorage分为:localStorage、sessionStorage    特点: 1.存储容量一般支持5MB左右(不同浏览器也有所不同) 2.浏览器通过window.localStorage...1.首先我们要在某个浏览器中输入东西后,关闭它,在重更新打开 2.开启开发者工具中的Application(应用)选项,在Local Storage里面有两个选项         (有一个或两个或多个网站...xxx:写入的是密钥的数据(key) yyy:写入的是的数据(Value) 如果我们用字符串的形式直接项存到本地储存的话,会出现如下情况: localStorage</h2...解决办法:JSON.parse(xxx)前提是xxx为{"name":"lqj","age":"20"}的key!...:  注意:如果我们不小心写了一个没有给的key 读取时会报:null 当读取一个没有给的对象数据时,报出null,然后我们再用JSON.parse()来解析它时,还会报null,并不是undefined

    1.9K30

    DOM存储——客户端存储

    DOM存储与cookie的相同点: 本地存储和cookie一样提供了把数据保存到本地的能力,页面刷新或者关掉浏览器后,数据依然存在。 本地存储cookie一样只能存字符串数据。...('company', 'Hudao'); 上面代码表示访问当前域名的会话DOM存储对象,使用setItem()访问往里面添加一个数据条目。...('company')) { //将文本框中的设置成sessionStorage中的company键值 company.value = sessionStorage.getItem...company'); } //添加监听文本输入框的change事件 company.addEventListener("change", function(){ //将文本框的存到...sessionStorage中的company键值 sessionStorage.setItem("company", company.value); }); 捕捉存储异常 不同的浏览器,分配给本地存储的空间是不一样的

    2.7K20

    面试官:sessionStorage可以在多个Tab之间共享数据吗?

    面试题是:sessionStorage可以在多个选项卡之间共享数据吗? 具体面试中涉及到的一些问题与面试流程 问题1:“你知道localStorage和sessionStorage有什么区别吗?”...关闭选项卡/窗口会结束会话清除 sessionStorage 中的对象。 问题二:同一个网站下localStorage可以共享数据吗? 我的朋友:“这又是一件简单的事!...问题3:sessionStorage可以在多个选项卡之间共享数据吗?”...我的朋友:“不,每个窗口或选项卡都有一个单独的sessionStorage它们之间没有数据共享” 面试官:“你真的确定是这样吗?” 我的朋友:“呃!我不确定,也许吧!”...使用相同的 URL 打开多个选项卡/窗口会为每个选项卡/窗口创建 sessionStorage。 复制选项卡会将选项卡的 sessionStorage 复制到新选项卡中。 请注意第三点!

    36220

    前端|HTML5中的网络存储

    (2)快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。加上网页本身也可以有缓存,整个页面和数据都在本地的话,可以立即显示。...2.2.1 localStorage中的方法属性 方法属性 描述 setItem(key,value) 该方法接收一个键名和作为参数,将会把键值对添加到存储中,如果键名存在,则更新其对应的 getItem...(key) 该方法接收一个键名作为参数,返回键名对应的 romoveItem(key) 该方法接收一个键名作为参数,并把该键名从存储中删除 length 类似数组的length属性,用于访问Storage...removesessionStorageId"> document.getElementById("localStorageId").onclick=function(){ //把用户在input 里面数据的数据保存到...document.getElementById("sessionStorageId").onclick = function() { //获取姓名和年龄输入框的 var username

    1.4K10

    前端面试宝典(一)

    Hello大家好,兔妞想着咱们分享也有好多了,而且新一轮的秋招又快到了,要不咱收集收集题目,也好自己查缺补漏一下吧~所以最近会有一些面试题目分享给大家,答案也会一送出哦。...它们有何意义? (1)声明位于文档中的最前面,处于 标签之前。告知浏览器的解析器,用什么文档类型规范来解析这个文档。 (2)严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。...(3)在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 (4)DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 3) HTML5的离线储存有几种方式?...触发方式 • float除了none以外的 • overflow除了visible 以外的(hidden,auto,scroll ) • display(table-cell,table-caption...当两个或多个垂直边距相遇的时候,形成一个外边距。外边距的高度等于两个发生叠加的外边距高度中的较大者。只有普通文档流中块框的垂直外边距才会发生外边距叠加。

    70030

    cookie、localStorage、sessionStorage区别?

    创建访问一个 sessionStoragesessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); 下面的例子对用户在当前...针对登录过的用户,服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码,下次只要读取这个就可以判断当前用户是否登录啦。...如果遇到一些内容特别多的表单,为了优化用户体验,我们可能要把表单页面拆分成多个子页面,然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。...使用它们的时候,需要时刻注意是否有代码存在 XSS (不是太清楚XSS)注入的风险。...因为只要打开控制台,你就随意修改它们,也就是说如果你的网站中有 XSS 的风险,它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。

    52130

    Vuex数据页面刷新丢失问题解决方案

    因此下文中统一使用sessionStorage来做补充,解决问题。...有了补充对象之后,我们要做的只有两点 1、每次在mutation中set state的时候,同步的塞到sessionStorage一份 2、状态初始化的时候,从sessionStorage中读取相应内容并作为默认...(key) && parseInt(sessionStorage.getItem(key))) { state[key] = parseInt(sessionStorage.getItem...= userLevel } }, modules: { } }) 内容不多,主要定义了一个storeMaker的函数实现了两个功能 1、对传入的state初始判断类型...,尝试从sessionStorage中读取数据替换默认 2、通过Proxy重置state的set逻辑,添加同步保存到sessionStorage的逻辑 其实本来可以通过Proxy重置get逻辑处理取值的问题

    2.8K30

    香~来自己动手做一款基于Pinia的可持久化插件吧~

    这次也一升级。 值得一说的是这次升级也给大家带来的了一款基于Pinia的可持久化插件。只需要简单的几个配置就可以让 state 进行本地化存储。...1、可以进行对 state 对象进行保存到 localStorage 或者 sessionStorage 2、可以把localStorage 或者 sessionStorage的数据恢复到 state对象中...enable 类型:boolean 默认:false 说明:该选项默认是false,也就是说需要你显示的指定为 true,才会开启对某个Store的持久化功能。...option 类型:object 默认:undefined 说明:该选项包含着一系列其它选项,没有实际意义,具体看里面的选项 option.key 类型:string 默认:某store中的id...' 默认:'local' 说明:该选项只能指定 'local' | 'session' 其中的一种,可以指定是用哪种方式进行存储,如常用的 localStoreag 和 sessionStorage

    49120

    【Python全栈100天学习笔记】Day45 Cookie和Session介绍及使用

    sessionid=123456,服务器通过获取sessionid参数的来取到与之对应的session对象。 隐藏域(隐式表单域)。...还有一点需要说明的是,使用关系型数据库保存session中的数据在大多数时候并不是最好的选择,因为数据库可能会承受巨大的压力而成为系统性能的瓶颈,在后面的章节中我们会告诉大家如何将session的数据保存到缓存服务中...接下来我们可以稍微对首页的代码进行调整,在页面的右上角显示出登录用户的用户名。...上面提到的方法,如果不清楚它们的具体用法,可以自己查阅一下Django的官方文档,没有什么资料比官方文档能够更清楚的告诉你这些方法到底如何使用。...的数据可以长期保留;而存储在sessionStorage的数据会在浏览器关闭时会被清除 。

    83830

    前端开发面试题总结之——HTML

    一个网页从请求到最终显示的完整过程一般可以分为如下7个步骤: (1)在浏览器中输入网址; (2)发送至DNS服务器获得域名对应的WEB服务器IP地址; (3)与WEB服务器建立TCP连接; (4)浏览器向...,解析完成后在浏览器中显示基础页面; (7)分析页面中的超链接显示在当前页面,重复以上过程直至无超链接需要发送,完成全部数据显示。...负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)渲染(显示)网页。...如果需要使用iframe,最好通过JavaScript动态给iframe添加src属性,这样可以绕开以上两个问题。 Label的作用是什么?如何使用?...如何实现浏览器内多个标签页之间的通信?(阿里) 调用 localStorage、cookies 等本地存储方式 webSocket 如何兼容低浏览器?

    1.8K80

    HTML相关的面试题

    很多早期的浏览器对齐图片至包含它们的盒子的下边框,虽然 CSS 的规范要求它们被对齐至盒内文本的基线。标准模式下,基于 Gecko 的浏览器将会对齐至基线,而在 怪癖模式下它们会对齐至底部。...元素必须被正确地嵌套,元素必须被关闭,空标签也必须被关闭,标签名和属性对大小写敏感,属性名称必须小写,属性必须加引号等。一旦遇到错误,立刻停止解析,显示错误信息。...标签及属性 地理位置 画布 视频 音频 拖放 微数据 应用缓存 Web存储 web workers 服务器发送事件 请描述一下 cookies,sessionStorage 和 localStorage...,包括IE6+;IE6,IE7不支持sessionStorage 和 localStorage sessionStorage 和 localStorage中能存的数据比cookie大 sessionStorage...和 localStorage的区别: sessionStorage存的数据在每次关闭浏览器后被删除,localStorage不会。

    43930
    领券