通过 _blank打开新窗口 设置sessionStorage和localStorage
时间: 2023-10-13 18:04:10 浏览: 52
要在通过`target="_blank"`打开的新窗口中设置sessionStorage和localStorage,你可以使用JavaScript的`window.open`方法来打开新窗口,并在新窗口中设置sessionStorage和localStorage的值。以下是一个示例代码:
```javascript
var newWindow = window.open('about:blank', '_blank');
newWindow.onload = function() {
// 在新窗口中设置sessionStorage
newWindow.sessionStorage.setItem('key', 'value');
// 在新窗口中设置localStorage
newWindow.localStorage.setItem('key', 'value');
};
```
在上述代码中,我们使用`window.open`方法打开一个新窗口,并将其赋值给变量`newWindow`。然后,我们使用`onload`事件来确保新窗口完全加载后执行代码。在`onload`事件处理程序中,我们在新窗口中设置了sessionStorage和localStorage的值。
当用户点击a标签时,会触发页面加载事件,从而打开一个新窗口,并在新窗口中设置了sessionStorage和localStorage的值。
希望这个示例对你有帮助!如果你还有其他问题,请随时向我提问。
相关问题
通过 window.open打开不同源新窗口 设置sessionStorage和localStorage
在使用`window.open`打开不同源的新窗口时,由于跨域安全策略的限制,无法直接在新窗口中设置sessionStorage和localStorage。这是因为浏览器对不同源的窗口之间的数据访问进行了限制。
但是,你可以通过以下方法在不同源的新窗口中传递数据:
1. 使用URL参数:将需要传递的数据作为URL参数附加到打开的URL中,然后在新窗口中解析URL参数来获取数据。例如:
```javascript
var newWindow = window.open('https://example.com?data=value');
```
在新窗口的页面中,你可以使用JavaScript解析URL参数来获取数据。
2. 使用postMessage API:使用postMessage API可以实现窗口间的安全跨域通信。在打开的新窗口中,你可以使用`window.postMessage`发送消息,并在新窗口的页面中添加事件监听器来接收消息。例如:
在当前窗口:
```javascript
var newWindow = window.open('https://example.com');
newWindow.postMessage('value', 'https://example.com');
```
在新窗口的页面中添加事件监听器:
```javascript
window.addEventListener('message', function(event) {
// 判断消息来源是否可信
if (event.origin === 'https://example.com') {
// 获取传递的数据
var data = event.data;
// 在新窗口中处理数据
sessionStorage.setItem('key', data);
}
});
```
通过以上方法,你可以在不同源的新窗口中传递数据,并在新窗口中进行处理。
请注意,使用postMessage API时需要确保消息来源可信,以防止恶意代码的注入和跨站点脚本攻击。
希望这可以帮助到你!如果你有更多问题,请随时问我。
通过 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时,确保消息来源可信,以防止恶意代码的注入和跨站点脚本攻击。
希望这个示例对你有帮助!如果你还有其他问题,请随时向我提问。