如何在用户关闭网页时删除链接颜色的本地存储

如何解决如何在用户关闭网页时删除链接颜色的本地存储

我知道以前有人问过类似的问题，但该解决方案会在页面刷新时清除本地存储。 我有一个本地存储来显示哪个链接当前处于活动状态，以便用户知道上次按下哪个菜单选项，即使页面已刷新。

  
  /*===== LINK ACTIVE  =====     keeps the colour in the clicked link even after refresh*/
  const linkColor = document.querySelectorAll('.nav__link')
  
  function colorLink() {
    linkColor.forEach(l => l.classList.remove('active'))
    this.classList.add('active')
    
    // Added this to read data attribute
    let this_index = this.getAttribute("data-nav_link_index")
    localStorage.setItem("active_nav_link",this_index)
  }
  linkColor.forEach((l,i) => {
    l.addEventListener('click',colorLink);
    
    // Added this to set data attribute
    l.setAttribute("data-nav_link_index",i);
    
    // Added this to add the active class
    if(localStorage.getItem("active_nav_link")==i){
      l.classList.add("active");
    }else if(localStorage.getItem("active_nav_link")!==null){
      l.classList.remove("active");
    }
  })
  
 

现在，当我登录主仪表板页面时，颜色仍保留在上次单击的菜单中。有没有办法可以在退出页面时清除此颜色，以便用户在登录时看不到颜色。非常感谢您抽出宝贵时间。

解决方法

登录时尝试LAMBDA

,

您可以使用会话存储代替本地存储。

关闭选项卡或浏览器时会清除会话存储。

,

• 如果您想从 localStorage 中清除项目，只需使用 localStorage.removeItem('item')，如果您想清除所有项目，只需使用 localStorage.clear()，如果您想在用户离开页面时删除该项目，请使用 {{ 1}} 事件