如何在javascript中保存更改状态

如何解决如何在javascript中保存更改状态

从第二个标签中的链接返回时，即从 swiggy，它总是重定向到第一个标签

如何保存状态更改？

<div class="tab">
  <button class="tablinks" onclick="openFood(event,'Zomato')" id="defaultOpen">Zomato</button>
  <button class="tablinks" onclick="openFood(event,'Swiggy')">Swiggy</button>
</div>

<div id="Zomato" class="tabcontent">
  <h3>Zomato</h3>
  <a href="https://www.zomato.com/kingman-ks">Zomato</a>
</div>

<div id="Swiggy" class="tabcontent">
  <h3>Swiggy</h3>
   <a href="https://www.swiggy.com/">Swiggy</a>
</div>
<script>
function openFood(evt,Foodvendor) {
  var i,tabcontent,tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active","");
  }
  document.getElementById(Foodvendor).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
   

解决方法

简而言之，每次刷新页面时，您的 JavaScript 都会运行；当用户点击 DOM 中的链接之一（或您在 html 标签之间编写的内容）时，脚本会从上到下运行，不知道之前发生了什么。

状态管理是现代用户界面中一个困难但常见的问题，这就是为什么我们拥有 Angular、React、Vue、JQuery UI 等 JavaScript 库的原因处理复杂的底层问题，并允许您的 UI 状态保持不变，并使您的组件具有反应性（即用户单击选项卡并应用活动类而无需刷新）。

如果您需要一个超级简单的实现，可以在刷新后保持不变，您可以：

1. 使用 Local Storage or Session Storage 维护活动标签，例如

window.localStorage.setItem('activeTab','Swiggy');
// after user refreshes
const id = window.localStorage.getItem('activeTab');
const el = document.getElementById(id);
el.className += "active";
// (you'll also have to remove the active class from the "default" active tab etc.)

2. 使用 query string，例如

// user navigates to https://yoursite.com/yourendpoint?activeTab=Swiggy
function checkForActiveTabQueryString() {
  const params = new URLSearchParams(window.location.search);
  const activeTab = params.get("activeTab");

  if (activeTab) {
    const el = document.getElementById(activeTab);
    if (el) {
      el.className += "active";
    }
    // you'll have to remove the active class from the "default" tab,// etc.
  }
}

,

您可以使用 HTML5 LocalStorage Object 在浏览器中本地保存当前选项卡的一些参数，并将其取回以在页面重新加载时选择最后一个活动选项卡。查看 this 教程。

我更改（添加/删除）的内容：

1. 删除DefaultOpen

   但我向 Zomato 按钮添加了“active”类。并将 display:none 设置为 tabcontent。

2. 添加本地存储

   • 每次标签更改即每次调用 openFood() 时， 我们使用变量名将 currentState 保存到 localStorage activeTab（值为“Zomato”或“Swiggy”）。

     localStorage.setItem('activeTab',FoodVendor);

   • 当页面加载时，我们检查 activeTab 值并决定打开哪个标签。

     $(document).ready(function(){
        var activeTab = localStorage.getItem('activeTab');
        if (activeTab == 'Swiggy'){
          openFood('SwiggyTab','Swiggy');
        }
        else if(activeTab == 'Zomato'){
          openFood('ZomatoTab','Zomato');
        }
     });
     

CSS

<style type="text/css">
    div.tabcontent{
        display: none;
    }
</style>

HTML

<div class="tab">
  <button class="tablinks active" id="ZomatoTab" onclick="openFood('ZomatoTab','Zomato')">Zomato</button>
  <button class="tablinks" id="SwiggyTab" onclick="openFood('SwiggyTab','Swiggy')">Swiggy</button>
</div>

<div id="Zomato" class="tabcontent">
  <h3>Zomato</h3>
  <a href="https://www.zomato.com/kingman-ks">Zomato</a>
</div>

<div id="Swiggy" class="tabcontent">
  <h3>Swiggy</h3>
   <a href="https://www.swiggy.com/">Swiggy</a>
</div>

JavaScript

<script type="text/javascript">
    $(document).ready(function(){
        //get activeTab from LocalStorage
        var activeTab = localStorage.getItem('activeTab');
        //Decide which tab to open
        if (activeTab == 'Swiggy'){
            openFood('SwiggyTab','Swiggy');
        }
        else{
            openFood('ZomatoTab','Zomato');
        }
    });
    function openFood(id,FoodVendor) {
      var i,tabcontent,tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active","");
      }
      
      document.getElementById(FoodVendor).style.display = "block";
      document.getElementById(id).className += " active";
      
      //Save the latest activeTab
      localStorage.setItem('activeTab',FoodVendor);
    }
</script>