How to get JS variable to retain value after page refresh

Question

Is it possible to permanently change a javascript variable  As in  if I set the variable X and make that equal to 1  Then onClick of a button change that variable to 2  How can I get that variable to stay at 2 on refresh of the page

User · Answer

You will have to use cookie to store the value across page refresh. You can use any one of the many javascript based cookie libraries to simplify the cookie access, like this one

If you want to support only html5 then you can think of Storage api like localStorage/sessionStorage

Ex: using localStorage and cookies library

var mode = getStoredValue('myPageMode');

function buttonClick(mode) {
    mode = mode;
    storeValue('myPageMode', mode);
}

function storeValue(key, value) {
    if (localStorage) {
        localStorage.setItem(key, value);
    } else {
        $.cookies.set(key, value);
    }
}

function getStoredValue(key) {
    if (localStorage) {
        return localStorage.getItem(key);
    } else {
        return $.cookies.get(key);
    }
}

User · Answer

In addition to cookies and localStorage  there s at least one other place you can store   semi-persistent  client data  window name  Any string value you assign to window name will stay there until the window is closed   To test it out  just open the console and type window name    foo   then refresh the page and type window name  it should respond with foo   This is a bit of a hack  but if you don t want cookies filled with unnecessary data being sent to the server with every request  and if you can t use localStorage for whatever reason  legacy clients   it may be an option to consider   window name has another interesting property  it s visible to windows served from other domains  it s not subject to the same-origin policy like nearly every other property of window  So  in addition to storing  semi-persistent  data there while the user navigates or refreshes the page  you can also use it for CORS-free cross-domain communication   Note that window name can only store strings  but with the wide availability of JSON  this shouldn t be much of an issue even for complex data

User · Answer

You can do that by storing cookies on client side

User · Answer

This is possible with window localStorage or window sessionStorage  The difference is that sessionStorage lasts for as long as the browser stays open  localStorage survives past browser restarts   The persistence applies to the entire web site not just a single page of it   When you need to set a variable that should be reflected in the next page s   use   var someVarName    value   localStorage setItem  someVarKey   someVarName     And in any page  like when the page has loaded   get it like   var someVarName   localStorage getItem  someVarKey       getItem   will return null if no value stored  or the value stored   Note that only string values can be stored in this storage  but this can be overcome by using JSON stringify and JSON parse  Technically  whenever you call  setItem    it will call  toString   on the value and store that   MDN s DOM storage guide  linked below   has workarounds polyfills  that end up falling back to stuff like cookies  if localStorage isn t available   It wouldn t be a bad idea to use an existing  or create your own mini library  that abstracts the ability to save any data type  like object literals  arrays  etc       References    Browser Storage - https   developer mozilla org en-US docs Web Guide API DOM Storage localStorage - https   developer mozilla org en-US docs DOM Storage localStorage JSON - https   developer mozilla org en-US docs JSON Browser Storage compatibility - http   caniuse com namevalue-storage Storing objects - Storing Objects in HTML5 localStorage

[javascript] How to get JS variable to retain value after page refresh?

Examples related to javascript

Examples related to html