坚持浏览器客户端JavaScript / HTML数据没有cookie [英] Persist browser client javascript/HTML data without cookies
问题描述
我有一个使用Python，HTML和javascript创建的网站。主主页有19个可编辑变量字段。如果我更改这些字段值中的任何一个，然后离开页面（单击其中一个链接选项卡），然后返回到我的主页，则所有变量都会重置为默认值，因为页面会重新加载代码。要清楚，使用后退按钮可以保留变量，但大多数情况下，用户将点击主页链接。
如何可以我有网站记住这些变量，至少在会议上？也就是说，当我关闭浏览器并重新启动网页时，它将具有默认值。
我不想使用Cookie或AJAX。我读了一些关于可以存储变量的 window.name 属性，但我不明白如何使用它，它看起来像一个cookie，它只能存储一个变量。
如果我的理解正确，如果我使用cookie，我必须为每个变量创建一个cookie吗？这似乎混乱。
有没有简单的方法来做到这一点？我应该使用Python创建一个临时文本文件来存储变量列表吗？或者有更简单的方法吗？编辑：代码将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'，客户端：'n_client'，TX：'tx'};
result = new Object（）; //变量对象来保存检索的数据
函数saveTheVars（）{
//用变量填充对象
varObjects.Step = document.getElementById（'step' ）。值;
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;
尝试{
localStorage.setItem（theVars，JSON.stringify（varObjects））; //如果定义了localstorage id，则将变量保存到它。
} catch（e）{
return false;
}
}
函数retrieveTheVars（）{
try {
result = JSON.parse（localStorage.getItem（theVars））;
if（result == null）//在内存中没有对象，因此设置缺省值
{
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（）; //保存新创建的变量
}
else
{
//用获取的数据
更新页面变量。 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.getItem（'someData'）// === 42
阅读MDN文档以获取快速howto和限制。
I have a web site I created that uses Python, HTML, and javascript. The main home page has 19 editable variable fields. If I change any of these field values, and then leave the page (click on one of my other link tabs), and then return to my home page, all my variables get reset back to the defaults because the page reloads the code. To be clear, using the "back" button would keep the variables, but most of the time, the user will be clicking on a "home" link.
How can I have the website remember these variables, at least for the session? That is, when I close the browser and relaunch the webpage, it will have the default values.
I don't want to use cookies or AJAX. I read something about the window.name property being able to store variables, but I don't understand how to use that, and it seems to be like a cookie in that it only can store one variable.
If I understand it correctly, if I use cookies, I would have to have a cookie created for every variable right? That seems messy.
Is there any easy way to do this? Should I create a temp text file with the Python to store a list of the variables? Or is there something easier?
Edit: the code is using document.getElementById all throughout to init variable fields and enable/disable elements.
Here is the solution I came up with... More work than JAndy posted. Turns out the localStorage() requires you to convert the variables to strings, to store them, and then do the opposite when you retrieve them. I created two functions. One to save and one to retrieve the variables. I created an Object to store the variables in. I had to also update my local HTML fields each time I clicked away from the input field. I used onchange="saveTheVars()" and called my save function.
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;
}
}
Use the localStorage object, which is widely supported across browsers (IE8+).
localStorage.setItem( 'someData', 42 );
later (even when the website or browser was closed)
localStorage.getItem( 'someData' ) // === 42
Read the MDN documentation for a quick howto and restrictions.
这篇关于坚持浏览器客户端JavaScript / HTML数据没有cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
