如何让本地存储在Chrome的新标签页中保存变量

Question

我正在创建一个Flask应用程序，用户可以在其中相互发送消息。 目前，我试图让我在打开的其他标签中记住在一个标签中设置的显示名称。

if (!localStorage.getItem('name'))
  var username = prompt('What is your Display Name');
  localStorage.setItem('name',username);

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#name').innerHTML = 'Welcome to Flack '+ 
localStorage.getItem('name') + '!';

因此，当我第一次在第一个选项卡上启动应用程序时，用户会在提示框中设置其名称，并会收到“ Welcome User123！”字样。 消息，当我打开一个新标签时，它会显示“ Welcome undefined！”，而不是我在原始标签中设置的用户名。 如何确保新标签页记住了我在第一个标签页中设置的原始名称？ 上面的javascript代码是我目前尝试过的代码。

Answer 1

我在您的代码中看到：

if (!localStorage.getItem('name')) {
    var username = prompt('What is your Display Name');
}

localStorage.setItem('name',username);

因此，如果未执行If块，则用户名始终未定义。 要解决此问题，只需添加{}

if (!localStorage.getItem('name')) {
    var username = prompt('What is your Display Name');
    localStorage.setItem('name',username);
}