使用window.open向打开页面的localStorage传递token
时间: 2024-05-03 16:23:00 浏览: 93
由于安全性考虑,localStorage只在同一域名下的页面之间共享,所以需要在打开的新页面中通过JavaScript代码获取父页面的localStorage,并从中获取token。
以下是示例代码:
在父页面中,使用window.open打开新页面,并将token存储在localStorage中:
```javascript
var token = "my_token";
var newWindow = window.open("new_page.html");
newWindow.localStorage.setItem("token", token);
```
在新页面中,可以通过以下代码获取父页面的localStorage,并从中获取token:
```javascript
var token = window.opener.localStorage.getItem("token");
console.log(token);
```
需要注意的是,如果在新页面中反复使用localStorage获取token,可能会导致性能问题。为了避免这种情况,可以将token存储在全局变量或者通过URL参数传递。
相关问题
localstorage 新窗口 免登录
如果你想在一个新窗口中打开一个已经登录的网页并免去再次登录的步骤,可以考虑使用浏览器的 localStorage 功能。
localStorage 是 HTML5 提供的一种在客户端存储数据的机制,可以将数据以键值对的形式保存在浏览器中。
首先,在已登录的网页中,将用户的登录信息保存到 localStorage 中:
```javascript
// 将登录信息保存到 localStorage 中
localStorage.setItem('username', 'user123');
localStorage.setItem('token', 'abc123');
```
然后,在新窗口中读取 localStorage 中的登录信息并设置到请求头中:
```javascript
// 从 localStorage 中读取登录信息
const username = localStorage.getItem('username');
const token = localStorage.getItem('token');
// 设置请求头中的登录信息
const headers = {
'Authorization': `Bearer ${token}`,
'username': username
};
// 在新窗口中发送请求
window.open('https://example.com', '_blank');
```
这样在新窗口中发送的请求就会携带登录信息,服务器就可以识别用户并自动登录。当然,这需要服务器端做出相应的处理,以便能够正确地识别并验证登录信息。
react antd 退出登录之后需要关闭所有打开的页签 再次登录时只展示首页,实例
要实现关闭所有打开的页签,可以使用 `localStorage` 存储一个随机数作为标识,在每个打开的页面中读取该标识,如果标识不匹配,则说明该页面已经被关闭,需要重新加载主页。具体实现步骤如下:
1. 在登录时,生成一个随机数,并将其存储到 `localStorage` 中。
```javascript
function login() {
// 登录成功后,生成一个随机数
const token = Math.random().toString(36).slice(2);
// 将随机数存储到 localStorage 中
localStorage.setItem('token', token);
// 跳转到主页
window.location.href = '/main';
}
```
2. 在主页中,读取 `localStorage` 中存储的随机数,并将其存储到组件的状态中。
```javascript
class MainPage extends React.Component {
constructor(props) {
super(props);
this.state = {
token: localStorage.getItem('token') || ''
};
}
render() {
return (
<div>
// 主页内容...
</div>
);
}
}
```
3. 在主页的 `componentDidMount` 生命周期钩子中,将组件的状态中存储的随机数写入到 `localStorage` 中。
```javascript
class MainPage extends React.Component {
constructor(props) {
super(props);
this.state = {
token: localStorage.getItem('token') || ''
};
}
componentDidMount() {
// 将组件的状态中的随机数写入到 localStorage 中
localStorage.setItem('token', this.state.token);
}
render() {
return (
<div>
// 主页内容...
</div>
);
}
}
```
4. 在退出登录时,删除 `localStorage` 中存储的随机数,并使用 `window.open()` 方法打开一个新的空白页面,并将所有页面重定向到该页面,最后再关闭该页面即可。
```javascript
function logout() {
// 删除 localStorage 中的随机数
localStorage.removeItem('token');
// 关闭所有打开的页面
const newWindow = window.open('', '_self');
newWindow.document.write('<html><head><title></title></head><body></body></html>');
newWindow.close();
}
```
这样就可以实现关闭所有打开的页面,并在重新登录时只展示首页的功能了。需要注意的是,由于 `localStorage` 中存储的随机数是作为标识使用的,所以需要保证随机数的唯一性,否则可能会导致页面无法正确关闭或者重新加载。
阅读全文