Wie JS-Variable zu bekommen, um Wert nach Seite aktualisieren behalten?

Dies ist mit window.localStorage oder window.sessionStorage möglich. Der Unterschied besteht darin, dass sessionStorage so lange besteht, wie der Browser geöffnet bleibt, localStorage überlebt den Neustart des Browsers. Die Persistenz gilt für die gesamte Website und nicht nur für eine einzelne Seite davon.

Wenn Sie eine Variable setzen müssen, die sich in den nächsten Seiten widerspiegeln soll, verwenden Sie:

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

Und in jeder Seite (z.B. wenn die Seite geladen ist), erhalten Sie es wie:

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

.getItem()wirdnull` zurückgeben, wenn kein Wert gespeichert ist, oder den gespeicherten Wert.

Beachten Sie, dass nur String-Werte in diesem Speicher gespeichert werden können, aber dies kann durch die Verwendung von JSON.stringify und JSON.parse überwunden werden. Technisch gesehen wird jedes Mal, wenn Sie .setItem() aufrufen, .toString() für den Wert aufgerufen und dieser gespeichert.

MDN's DOM Storage Guide (unten verlinkt), hat Workarounds/Polyfills, die am Ende auf Dinge wie Cookies zurückgreifen, wenn localStorage nicht verfügbar ist'.

Es wäre keine schlechte Idee, eine bestehende oder eine eigene Minibibliothek zu verwenden, die die Fähigkeit zum Speichern beliebiger Datentypen (wie Objektliterale, Arrays usw.) abstrahiert.

Referenzen:

• Browser Speicher - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
• Lokale Ablage" - https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage
• JSON" - https://developer.mozilla.org/en-US/docs/JSON
• Browser-Speicher-Kompatibilität - http://caniuse.com/namevalue-storage
• Speichern von Objekten - https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage

Sie müssen ein Cookie verwenden, um den Wert über einen Seitenaufruf hinweg zu speichern. Sie können eine der vielen javascriptbasierten Cookie-Bibliotheken verwenden, um den Cookie-Zugriff zu vereinfachen, z. B. diese

Wenn Sie nur html5 unterstützen wollen, dann können Sie an Storage api wie localStorage/sessionStorage denken.

Beispiel: mit localStorage und 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);
    }
}

Sie können dies tun, indem Sie Cookies auf der Client-Seite speichern.