Persist browser client javascript/HTML data without cookies

Question

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;
            }
        }

Answer 1

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.