Hvordan får jeg en JS-variabel til å beholde verdien etter at siden er oppdatert?

Dette er mulig med window.localStorage eller window.sessionStorage. Forskjellen er at sessionStorage varer så lenge nettleseren er åpen, mens localStorage overlever etter at nettleseren startes på nytt. Persistensen gjelder for hele nettstedet, ikke bare en enkelt side av det.

Bruk localStorage når du skal angi en variabel som skal gjenspeiles på neste side(r):

var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);

Og på en hvilken som helst side (f.eks. når siden er lastet inn), gjør du det slik:

var someVarName = localStorage.getItem("someVarKey");

.getItem() returnerer null hvis ingen verdi er lagret, eller den lagrede verdien.

Merk at kun strengverdier kan lagres i dette lageret, men dette kan løses ved å bruke JSON.stringify og JSON.parse. Teknisk sett, når du kaller .setItem(), vil den kalle .toString() på verdien og lagre den.

MDN's DOM-lagringsguide (lenket nedenfor), har løsninger/polyfills, som ender opp med å falle tilbake til ting som informasjonskapsler, hvis localStorage ikke er tilgjengelig.

Det ville ikke være en dårlig idé å bruke et eksisterende, eller lage ditt eget minibibliotek, som abstraherer muligheten til å lagre en hvilken som helst datatype (som objektbokstaver, matriser osv.).

**Referanser

• Nettleserens 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
• Kompatibilitet med nettleserlagring - http://caniuse.com/namevalue-storage
• Lagring av objekter - https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage

Du må bruke en informasjonskapsel for å lagre verdien på tvers av sideoppdateringer. Du kan bruke et av de mange javascript-baserte informasjonskapselbibliotekene for å forenkle tilgangen til informasjonskapsler, som dette.

Hvis du bare vil støtte html5, kan du tenke på Storage api som localStorage/sessionStorage.

Eks: ved hjelp av localStorage og 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);
    }
}

Det kan du gjøre ved å lagre informasjonskapsler på klientsiden.