sessionStorage使用不同方法打开新页面

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会复

道甚夷

1822人浏览 · 2021-08-25 16:05:13

道甚夷 · 2021-08-25 16:05:13 发布

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookies 的运行方式不同。
打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
关闭对应浏览器窗口（Window）/ tab，会清除对应的sessionStorage。
应该注意，存储在sessionStorage或localStorage中的数据特定于页面的协议。也就是说http://example.com 与 https://example.com的sessionStorage相互隔离。

面试有时候会被问到这类的问题，是运用中经常用到吗？网上看到的用例真的是很少。可能我的应用场景中比较少所以没有深入去研究，但想起被问过这类问题，就会激起我的好奇心去一探究竟。今天做个测试如下，如果有使用用例再做补充。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sessionStorage</title>
</head>
<body>
	<a href="./item.html" >_blank</a>
    <a href="./item.html" target="_blank">_blank</a>
    <div onclick="location.href='./item.html'">location.href</div>
    <div onclick="open1()">window.open </div>
    <div onclick="open2()">window.open 新浏览器窗口</div>
    <script>
    	// 手动打开在新页面不保留
   		// a链接跳转新页面在新页面不保留
   		// window.open 单独打开在新的页面不保留
        // location.href 在新页面保留 （定义2）
        // window.open 打开新的浏览器窗口，在在新页面保留 （定义2）
		// 同时开两个页面，删除掉其中一个的sessionStroage，另一个是不会改变的（定义5）
        function open1() {
            window.open('./item.html')
        }
        function open2() {
            window.open('./item.html', '子页面', "width=100%")
        }
        sessionStorage.setItem('data', '11');
        

    </script>
</body>
</html>

参考：MDN

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

【免费下载】 index-tts-vllm：高性能文本转语音解决方案

`index-tts-vllm` 是一款开源的文本转语音（TTS）项目，基于 `index-tts` 进行了优化，通过引入 `vllm` 库重新实现了 GPT 模型的推理过程，大幅提升了推理速度和并发处理能力。项目旨在为开发者提供一个高效、稳定、易于集成的 TTS 解决方案。## 项目技术分析`index-tts-vllm` 采用了以下核心技术：- **vllm 库**：用于加速 GP

AI Agent技术社区

AgentScope示例应用：多智能体对话

在人工智能快速发展的今天，单一智能体已经难以满足复杂任务的需求。想象一下这样的场景：一个项目团队需要讨论技术方案，不同专业背景的成员各抒己见，最终达成共识。这正是多智能体对话要解决的问题——让多个AI智能体像真实团队成员一样进行有意义的交流。AgentScope作为面向开发者的多智能体编程框架，提供了强大的多智能体对话能力。本文将深入探讨如何使用AgentScope构建高效的多智能体对话系统。..