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

我有一个我创建的网站,使用Python,HTML和JavaScript.主页有19个可编辑的变量字段.如果我更改任何这些字段值,然后离开页面(单击我的其他链接选项卡之一),然后返回到我的主页,我的所有变量都会重置为默认值,因为页面会重新加载代码.要清楚,使用“后退”按钮可以保留变量,但大多数时候,用户将点击“主页”链接.

我怎样才能让网站记住这些变量,至少对于会话?也就是说,当我关闭浏览器并重新启动网页时,它将具有默认值.
我不想使用cookie或AJAX.我读了一些关于window.name属性能够存储变量的东西,但我不明白如何使用它,它似乎就像一个cookie,因为它只能存储一个变量.

如果我理解正确,如果我使用cookies,我必须为每个变量创建一个cookie吗?这看起来很混乱.

有没有简单的方法来做到这一点?我应该用Python创建临时文本文件来存储变量列表吗?还是有更容易的事情?

编辑:代码在整个init变量字段和启用/禁用元素中使用document.getElementById.

这是我提出的解决方案……比JAndy发布的更多工作.事实证明,localStorage()要求您将变量转换为字符串,以存储它们,然后在检索它们时执行相反的操作.我创建了两个函数.一个保存,一个检索变量.我创建了一个Object来存储变量.
每次我点击输入字段时,我还必须更新我的本地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;
            }
        }
最佳答案
使用localStorage对象,该对象在浏览器(IE8)中得到广泛支持.

localStorage.setItem( 'someData', 42 );

稍后(即使网站或浏览器关闭)

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

阅读MDN文档以获得快速的方法和限制.

转载注明原文:在没有cookie的情况下保留浏览器客户端javascript / HTML数据 - 代码日志