Ist es möglich, eine Javascript-Variable dauerhaft zu ändern? Wenn ich z. B. die Variable X setze und sie auf 1 setze und dann beim Klicken auf eine Schaltfläche die Variable auf 2 ändere, wie kann ich dann erreichen, dass die Variable beim Aktualisieren der Seite auf 2 bleibt?
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()wird
null` 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:
Speicher
- https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/StorageSie 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);
}
}