Persist javascript client browser / HTML data without cookies

I have a website that I created that uses Python, HTML and javascript. There are 19 editable variable fields on the main home page. If I change any of these field values, then leave the page (click on one of my other links) and then return to my home page, all my variables will get reset back to the default values, because the page reloads the code, To be clear, using the back button will save the variables, but most of the time the user will click on the home link.

How can I remember the website of these variables, at least for the session? That is, when I close the browser and restart the web page, it will have default values. I do not want to use cookies or AJAX. I read something about a property window.namethat can store variables, but I don’t understand how to use it, and it looks like a cookie, since it can only store one variable.

If I understand correctly, if I use cookies, I will need to have a cookie created for each variable, right? It seems messy.

Is there an easy way to do this? Should I create a temporary text file with Python to store a list of variables? Or is there something easier?

Edit: this code uses document.getElementById everywhere in the variable initialization fields and enables / disables elements.

Here is the solution I came up with ... More work than JAndy. It turns out that localStorage () requires you to convert the variables to strings in order to store them, and then do the opposite when you retrieve them. I created two functions. One for saving and one for extracting variables. I created an object to store variables. I also had to update local HTML fields every time I left 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;
            }
        }
+5
source share
2 answers

Use an object localStoragethat is widely supported in browsers (IE8 +).

localStorage.setItem( 'someData', 42 );

( - )

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

MDN .

+3

:

  • cookie . . JSON.
  • ( javascript , ), , .
0

All Articles