sessionstorage open
时间: 2023-11-02 08:02:39 浏览: 51
sessionStorage是一种Web API,它允许你在浏览器会话期间存储键值对的数据。与localStorage不同的是,sessionStorage中的数据在页面会话结束时会被清除。页面会话在浏览器打开期间保持,并且重新加载或恢复页面时仍会保持原来的会话状态。在打开一个新的标签页或窗口时,会复制顶级浏览会话的上下文作为新的会话上下文,这与会话cookies的运行方式不同。因此,在多个相同URL的标签页中,每个标签页都会有自己的sessionStorage。
sessionStorage主要用于在页面之间共享数据,可以像使用普通对象一样对其进行操作。常见的用例包括在页面之间传递数据、缓存数据以便后续使用以及实现用户登录状态的管理。
然而需要注意的是,存储在sessionStorage中的数据是特定于页面的协议的。也就是说,使用http协议和https协议打开的同一个网站,它们的sessionStorage是相互隔离的。
相关问题
sessionStorage
sessionStorage是一个用于在浏览器端存储会话数据的属性。它与localStorage相似,但有一些区别。首先,localStorage存储的数据没有过期时间设置,而sessionStorage中存储的数据在页面会话结束时会被清除。其次,sessionStorage在浏览器打开期间一直保持,并且重新加载或恢复页面时会保持原来的会话数据。另外,即使两个页面的URL相同,不同的标签页之间的sessionStorage也是不会共享的,它只存在于当前会话中。当在一个页面中使用window.open或点击链接跳转到另一个页面时,新页面的sessionStorage会复制老页面的数据,但两者之间没有关联,仍然是两个独立的会话。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [cookie 、sessionstorage 、localstorage三者的区别](https://blog.csdn.net/weixin_45541388/article/details/125367823)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
通过 window.open打开不同源链接 设置sessionStorage和localStorage
在通过`window.open`打开不同源链接的新窗口时,由于跨域安全策略的限制,无法直接在新窗口中设置sessionStorage和localStorage。但是,你可以使用postMessage API来实现在新窗口中设置这些存储。
以下是一个示例代码:
```javascript
var newWindow = window.open('https://example.com');
newWindow.onload = function() {
// 在新窗口中设置sessionStorage
newWindow.postMessage({ action: 'setSessionStorage', key: 'key', value: 'value' }, 'https://example.com');
// 在新窗口中设置localStorage
newWindow.postMessage({ action: 'setLocalStorage', key: 'key', value: 'value' }, 'https://example.com');
};
```
在上述代码中,我们使用`window.open`打开了一个新窗口,并将其赋值给变量`newWindow`。然后,我们使用`onload`事件监听器确保新窗口完全加载后执行代码。在`onload`事件处理程序中,我们使用`postMessage`方法向新窗口发送一个消息。
在新窗口的页面中,你需要添加以下代码来接收并处理消息:
```javascript
window.addEventListener('message', function(event) {
// 判断消息来源是否可信
if (event.origin === 'https://example.com') {
var data = event.data;
if (data.action === 'setSessionStorage') {
// 在新窗口中设置sessionStorage
sessionStorage.setItem(data.key, data.value);
} else if (data.action === 'setLocalStorage') {
// 在新窗口中设置localStorage
localStorage.setItem(data.key, data.value);
}
}
});
```
在新窗口的页面中,我们添加了一个事件监听器来接收来自主窗口的消息。然后,我们检查消息来源是否可信,并根据消息的action属性来设置sessionStorage或localStorage的值。
通过以上方法,你可以在通过`window.open`打开的不同源链接的新窗口中设置sessionStorage和localStorage的值。
注意:使用postMessage API时,确保消息来源可信,以防止恶意代码的注入和跨站点脚本攻击。
希望这个示例对你有帮助!如果你还有其他问题,请随时向我提问。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)