如何在javascript中保存更改狀態

Question

從第二個選項卡中的鏈接返回時，即從 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>
   

Answer 1

簡而言之，每次刷新頁面時，您的 JavaScript 都會運行； 當用戶單擊 DOM 中的鏈接之一（或您在 html 標簽之間編寫的內容）時，腳本從上到下運行，不知道之前發生了什么。

狀態管理在現代用戶界面中是一個困難但常見的問題，這就是為什么我們擁有Angular 、 React 、 Vue 、 JQuery UI等 JavaScript 庫來處理復雜的底層問題並允許您的 UI 狀態持久化並且您的組件是反應式的（即用戶單擊選項卡，並且無需刷新即可應用活動類）。

如果您需要一個在刷新中持續存在的超級簡單實現，您可以：

1. 使用本地存儲或會話存儲來維護活動選項卡，例如

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. 使用查詢字符串，例如

// 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.
  }
}

Answer 2

您可以使用 HTML5 LocalStorage Object在瀏覽器中本地保存當前選項卡的一些參數，並將其取回以在頁面重新加載時選擇最后一個活動選項卡。 檢查本教程。

我改變了什么（添加/刪除） ：

1. 刪除默認打開

   但相反，我向Zomato按鈕添加了“活動”類。 並將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>