坚持浏览器客户端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响应当前锚点的变化，以使不同的内容显示），并且由于页面永不重新加载，所有您的变量状态仍然完好无损。