本地存储中的数据在从本地主机的第二个窗口登录时被覆盖

Question

提交(索引.html)时，我执行以下ajax操作，我需要将用户数据保存到localStorage，因为我重定向到另一个路由，除非它不会有数据。这一切都工作正常，但是当我在新的本地主机窗口中打开页面并再次登录时，我在localStorage中的旧数据被覆盖。

为什么会这样？

// Login index.js 
$('#frm-login').submit(function (e) {
event.preventDefault()
$('button').text('Please wait ...').prop('disabled')
$.ajax({
url: "/login-user",
type: "POST",
data: $('#frm-login').serialize(),
dataType: "json"
}).always(function (response) {
$('button').text('Logging in').prop('disabled')
console.log("Login", response)
if (response.status == "error") {
$('button').removeClass('lime').addClass('red').text('Log in failed. Try again.');
return
}
if (response.token) {
localStorage.setItem('token', response.token);
console.log(localStorage.token)
if (localStorage.token) {
$.ajax({
type: "GET",
url: "/verify-user",
headers: {
'Authorization': 'Bearer ' + localStorage.token
},
dataType: "json"
}).always(function (response) {
console.log("Auth", response)
if (response.status == "error") {
$('button').removeClass('lime').addClass('red').text('Log in failed. Try again.');
return
}
if (response.status == 302) {
console.log(response)
$jUser = response.responseJSON.authData.user
$sjUser = JSON.stringify($jUser);
localStorage.setItem('user', $sjUser);
$(location).attr('pathname', '/LIMELine/chatroom/')
}
})
}
}
})
})

从本地存储主获取数据.js

$jUser = JSON.parse(localStorage.user)
$('#frame #sidepanel #profile-img').attr('src', $jUser.avatar)
$('#frame #sidepanel #profile .wrap #full-name').text($jUser.first_name + ' ' + $jUser.last_name)

Answer 1

localStorage

在给定域的所有选项卡之间共享。 如果您不希望出现这种情况，则可以改用sessionStorage。 但是，作为使用sessionStorage的副作用，当与之关联的窗口/标签关闭时，数据将被销毁。

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

只读 localStorage 属性允许您访问文档源的 Storage 对象;存储的数据跨浏览器会话保存。 localStorage 类似于 sessionStorage，不同之处在于存储在 localStorage 中的数据没有过期时间，但存储在 sessionStorage 中的数据会在页面会话结束时(即页面关闭时)清除。

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

sessionStorage 属性允许您访问当前源的会话存储对象。sessionStorage 类似于 Window.localStorage;唯一的区别是，虽然存储在 localStorage 中的数据没有设置过期，但存储在 sessionStorage 中的数据会在页面会话结束时被清除。只要浏览器处于打开状态，页面会话就会持续存在，并且在页面重新加载和还原后仍然存在。在新选项卡或窗口中打开页面将导致启动新会话，这与会话 Cookie 的工作方式不同。