在没有 cookie 的情况下保留浏览器客户端 javascript/HTML 数据

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

阅读 MDN 文档以了解快速操作方法和限制。

Answer 2

一些想法：

1. 您不必为每个变量都创建一个 cookie。您可以将所有变量打包成一个变量。尝试为此使用 JSON 格式。
2. 让您的网站使用锚点导航而不是真正的导航（使用 javascript 响应当前锚点的更改以显示不同的内容），并且由于页面永远不会重新加载，因此您的所有变量状态仍然完好无损。