如何在 Localstorage 中保存 state？

Question

早上好谁正在阅读此消息

我对编程还是比较陌生，我有一个问题......我做了一个导航栏：body > div > nav > div > ul > li*10

我在 CSS 中完成了运动

 //Barra de Navegacion
  const list = document.querySelectorAll('.list');

  function activeLink(){
    list.forEach((item)=>
    item.classList.remove('active'));
    this.classList.add('active');
  
  if(list.classlist.contains('active')){
    localStorage.setItem('on','true');
  } else{
   localStorage.setItem('on','false');
  }
  };
  
  if (localStorage.getItem('on') === 'true'){
    list.classList.add('active');
            
  } else {
    list.classList.remove('active');
    
  };


  list.forEach((item)=>
  item.addEventListener('click',activeLink));

问题是当我刷新页面或 go 到它的另一部分时，它不会保存更改。 我怎么能用本地存储呢？

我尝试了几种方法，但我找不到方法

非常感谢您提前

视频 视频 视频 视频 视频

Answer 1

我认为这段代码太低了。

if (localStorage.getItem('on') === 'true'){
  list.classList.add('active');
} else {
    list.classList.remove('active');
};

您应该在页面加载时立即设置此设置，之后立即

const list = document.querySelectorAll('.list');

所以列表从一开始就有正确的类。

Answer 2

我怀疑使用 localStorage 是实现您想要做的事情的正确方法。 我建议每个页面在打开时都应突出显示其链接。 这可以通过手动向每个页面的链接添加类来实现，记住导航中的链接不会那么多。

Answer 3

不确定您要使用这部分代码实现什么，但您使用的语法是正确的。 下面是一些使用本地存储 API的示例来重复。

您可以使用以下语法将键值对保存到本地存储：

localStorage.setItem('key', 'value');

您可以使用以下语法检索保存的值：

localStorage.getItem('key');

如果您仍然无法让代码正常工作，您可以尝试打开浏览器的开发人员工具并查看存储。 如果您的开发人员的工具说没有条目保存到本地存储，那么您就知道主要问题是保存键值对。

以下是在 Chrome 中打开开发者工具的方法：

• 首先按键盘上的 F12（或 Ctrl+Shift+J）
• 按照下图所示的步骤操作

如果您仍然无法使代码正常工作，您应该检查您的浏览器设置，以确保没有启用阻止您的应用程序保存到本地存储的安全设置。