首页 > 其他分享 >sessionStorage可以在多个Tab之间共享数据吗?

sessionStorage可以在多个Tab之间共享数据吗?

时间:2023-07-11 09:55:51浏览次数:36  
标签:选项卡 sessionStorage 会话 window Tab 窗口 共享

不可以。sessionStorage是浏览器会话级别的存储机制,它只在单个浏览器标签页(tab)或窗口之间共享数据。每当用户打开一个新的标签页或窗口时,会话存储会被重新初始化,每个标签页或窗口都会有自己的独立的sessionStorage。

如果您需要在多个标签页或窗口之间共享数据,可以考虑使用其他的机制,如localStorage或IndexedDB。localStorage是在同一域名下的所有标签页或窗口之间共享数据的持久性存储机制。IndexedDB是一个更强大的客户端数据库,可以在多个标签页或窗口之间共享和同步数据。

localStorage的数据是持久化的,只要我们不主动清除它,它就会一直存在。关闭选项卡/窗口会结束会话并清除 sessionStorage 中的对象。

数据可以在同一网站下的不同选项卡或窗口之间共享

什么是会话存储?

来自 MDN:只读 sessionStorage 属性访问当前源的会话存储对象。sessionStorage与localStorage类似;不同之处在于,localStorage 中的数据不会过期,而 sessionStorage 中的数据会在页面会话结束时被清除。

每当文档加载到浏览器的特定选项卡中时,就会创建一个唯一的页面会话并将其分配给该特定选项卡。该页面会话仅对特定选项卡有效。

只要选项卡或浏览器打开,页面会话就会持续,并且在页面重新加载和恢复后仍然存在。

在新选项卡或窗口中打开页面会创建一个具有顶级浏览上下文值的新会话,这与会话 cookie 的工作方式不同。

使用相同的 URL 打开多个选项卡/窗口会为每个选项卡/窗口创建 sessionStorage。

复制选项卡会将选项卡的 sessionStorage 复制到新选项卡中。

请注意第三点!或者我们可以在这里找到答案!

假设我们在https://medium.com/page/1中写了这样一段代码:

btn.addEventListener('click', () => {  window.sessionStorage.setItem('name', 'fatfish')  window.open('https://medium.com/page/2')})

我可以在 https://medium.com/page/2 获取名称值吗?
console.log(window.sessionStorage.getItem('name')) // null or fatfish?

是的,答案就是fatfish。那么,我们确定 sessionStorage 可以在多个选项卡之间共享数据吗?

最终答案

让我们尝试再次继续执行 https://medium.com/page/1 上的一段代码。

window.sessionStorage.setItem('name', 'medium')window.sessionStorage.setItem('age', '1000')
如果sessionStorage可以在不同窗口或选项卡之间共享数据,那么https://medium.com/page/2也可以获取name和age的最新值
console.log(window.sessionStorage.getItem('name')) // 111console.log(window.sessionStorage.getItem('age')) // null

所以,我们可以得出结论,sessionStorage不能在多个窗口或选项卡之间共享数据,但是,当通过window.open或链接打开新页面时,新页面会复制上一个页面的sessionStorage。

您还可以使用服务器端的存储解决方案,如数据库,将数据存储在服务器上,并通过网络进行访问和共享。这样在不同的浏览器标签页或窗口之间也可以共享数据。

标签:选项卡,sessionStorage,会话,window,Tab,窗口,共享
From: https://www.cnblogs.com/mo3408/p/17543086.html

相关文章

  • matlab程序,文章付现,关键词:共享储能电站,日前优化调度,工业用户。
    matlab程序,文章付现,关键词:共享储能电站,日前优化调度,工业用户。非原价拍之前问清楚可以运行看结果,售出不退不换ID:7250651359992408......
  • 纯CSS实现table固定thead,tbody进行滚动
    代码一<!--*@Descripttion:*@version:*@Author:yang_ft*@Date:2020-09-2913:59:26*@github:famensaodiseng*@LastEditTime:2020-10-1017:13:17--><!DOCTYPEhtml><htmllang="zh-CN"><head><metachar......
  • sessionStorage可以在多个Tab之间共享数据吗
    问题1:“你知道localStorage和sessionStorage有什么区别吗?”localStorage的数据是持久化的,只要我们不主动清除它,它就会一直存在。关闭选项卡/窗口会结束会话并清除sessionStorage中的对象。问题2:同一个网站下localStorage可以共享数据吗?localStorage数据可以在同一网站下的不同选......
  • optimize table 治理mysql 高水位和空间碎片
    问题背景随着系统上线时间的增长,mysql数据库的数据目录的文件系统使用率已经快要耗尽。从最初的两三个月truancate一次日志表,到最后每周要truancate多次日志表。业务侧将数据库中历史数据(超过全部数据的2/3)逐渐进行了迁移(采用目标库insert,源库delete的方式),这些表中有多个超过1......
  • [数据分析与可视化] 基于plottable库绘制精美表格
    plottable是一个Python库,用于在matplotlib中绘制精美定制的图形表格。plottable的官方仓库地址为:plottable。本文主要参考其官方文档,plottable的官方文档地址为:plottable-doc。plottable安装命令如下:pipinstallplottable本文所有代码见:Python-Study-Notes#jupyternoteboo......
  • AI绘画:StableDiffusion炼丹Lora攻略-实战萌宠图片生成
    写在前面的话近期在小红书发现了许多极其可爱、美观的萌宠图片,对这些美妙的图像深深着迷于是想着看看利用AI绘画StableDiffusion以下简称(SD)做出来。以下是详细实操的全过程,包括所有用的资料已经打包到网盘。最后尝试的最终效果如下:更多图片请查看网盘:「萌宠图片及关键词」......
  • stable
      快速启动StableDiffusionWebUI详情  实验手册实验报告 4.运行教程文件在打开的教程文件stable_diffusion_webui.ipynb文件中,您可以直接看到教程文本,您可以在教程文件中直接运行教程。本教程一共4个运行步骤:1.1下载stable-diffu......
  • R语言中 table函数统计不了NA
     001、vec2<-c(3,NA,6,5,NA,NA,8,9,NA,4,7,8)##测试向量vec2table(vec2)vec2table(vec2,useNA="always")##统计NA,增加参数useNA="always".  ......
  • element table列表根据数据设置背景色
    效果页面代码通过:cell-class-name动态绑定类名<el-table:data="tableData"style="width:100%":cell-class-name="myclass"><el-table-columnprop="date"label="日期"width="180"></el-ta......
  • AI绘画:StableDiffusion制作AI赛博机车图保姆级教程
    本教程收集于:AIGC从入门到精通教程汇总如果你具备StableDiffusion的基础知识,那制作AI赛博机车图会更为顺畅。即便没有这个基础,只要严格按照教程的步骤执行,也能成功制作出来。本教程的重点是指导操作过程,而不会深入解析StableDiffusion的各项功能原理。如果想详细学习SD基础可......