堅持瀏覽器客戶端JavaScript/HTML數據沒有cookie

Question

我有一個我創建的網站使用Python，HTML和JavaScript。主主頁有19個可編輯變量字段。如果我更改了這些字段值中的任何一個，然後離開頁面（單擊其中一個鏈接選項卡），然後返回到我的主頁，則所有變量都會重置爲默認值，因爲頁面會重新加載代碼。要清楚，使用「後退」按鈕可以保留變量，但大多數情況下，用戶將點擊「主頁」鏈接。

我該如何讓網站記住這些變量，至少在會話中？也就是說，當我關閉瀏覽器並重新啓動網頁時，它將具有默認值。 我不想使用cookie或AJAX。我讀了一些關於window.name屬性能夠存儲變量，但我不明白如何使用它，它似乎像一個cookie，它只能存儲一個變量。

如果我理解正確，如果我使用cookie，我將不得不爲每個變量創建一個cookie嗎？這似乎很混亂。

有沒有簡單的方法來做到這一點？我應該使用Python創建一個臨時文本文件來存儲變量列表嗎？還是有一些更容易？

編輯：代碼使用document.getElementById貫穿初始化變量字段和啓用/禁用元素。

這是我想出的解決方案......比JAndy發佈的更多的工作。結果localStorage（）要求你將變量轉換爲字符串，存儲它們，然後在檢索它們時做相反的事情。我創建了兩個函數。一個保存，一個檢索變量。我創建了一個對象來存儲變量。 我每次單擊輸入字段時都必須更新本地HTML字段。我用onchange =「saveTheVars（）」並調用我的保存功能。

varObjects = {Step:'step', Dwell:'dwell', Min:'min_att', Max:'max_att', Hold:'hold', Roam:'roam', Dur:'duration', Clients:'n_client', TX:'tx' }; 

result = new Object(); // variable object to hold the retrieved data 

function saveTheVars() { 
      //fill up the object with the variables 
      varObjects.Step = document.getElementById('step').value; 
      varObjects.Dwell = document.getElementById('dwell').value; 
      varObjects.Min = document.getElementById('min_att').value; 
      varObjects.Max = document.getElementById('max_att').value; 
      varObjects.Hold = document.getElementById('hold').value; 
      varObjects.Dur = document.getElementById('duration').value; 
      varObjects.Roam = document.getElementById('roamID').value; 
      varObjects.Clients = document.getElementById('n_client').value; 
      varObjects.TX = document.getElementById('tx').value; 

      try{ 

       localStorage.setItem("theVars", JSON.stringify(varObjects)); // if localstorage id defined then save variables to it. 

      } catch(e) { 

       return false; 
       } 

}

function retrieveTheVars() { 

      try { 
        result = JSON.parse(localStorage.getItem("theVars")); 

       if(result == null) // no object exist in memory so set defaults 
       { 
        alert("Test variables not saved: Loading defaults"); 
        document.getElementById('duration').value= '300'; 
        document.getElementById('n_client').value= '0'; 
        document.getElementById('manual').value= ""; 
        document.getElementById('step').value= '1'; 
        document.getElementById('dwell').value= '0.45'; 
        document.getElementById('min_att').value= '0'; 
        document.getElementById('max_att').value= '30'; 
        document.getElementById('hold').value= '3'; 
        document.getElementById('roamID').value= '10'; 
        document.getElementById('tx').value= '15'; 

        saveTheVars(); //save the newly created variables 
       } 
       else 
       { 

        //update the page variables with the retrieved data 

        document.getElementById('dwell').value= result.Dwell; 
        document.getElementById('step').value= result.Step; 
        document.getElementById('min_att').value= result.Min; 
        document.getElementById('max_att').value= result.Max; 
        document.getElementById('hold').value= result.Hold; 
        document.getElementById('roamID').value= result.Roam; 
        document.getElementById('duration').value= result.Dur; 
        document.getElementById('n_client').value= result.Clients; 
        document.getElementById('tx').value= result.TX; 
       } 

      } catch(e) { 

       return false; 
      } 
     } 

Answer 1

使用localStorage對象，它被廣泛地跨瀏覽器（IE8 +）的支持。

localStorage.setItem('someData', 42); 

後（即使當網站或瀏覽器被關閉）

localStorage.getItem('someData') // === 42 

閱讀快速HOWTO和限制MDN文檔。

Answer 2

一些想法：

1. 您不必創建每個變量的cookie。您可以將所有變量打包到一個變量中。嘗試使用JSON格式。
2. 使您的網站使用錨定導航，而不是真正的導航（使用JavaScript響應當前錨點的變化，以使不同的內容顯示），並且由於頁面永不重新加載，所有您的變量狀態仍然完好無損。