it-swarm.com.de

Wie erhält man die JS-Variable, um den Wert nach der Seitenaktualisierung beizubehalten?

Ist es möglich, eine Javascript-Variable dauerhaft zu ändern? Wie in, wenn ich die Variable X setze und dies gleich 1 mache. Dann ändere onClick of a button diese Variable auf 2. Wie kann ich diese Variable dazu bringen, beim Aktualisieren der Seite auf 2 zu bleiben?

110
Josh Woelfel

Dies ist mit window.localStorage Oder window.sessionStorage Möglich. Der Unterschied besteht darin, dass sessionStorage so lange anhält, wie der Browser geöffnet bleibt, localStorage nach einem Neustart des Browsers überlebt. Die Persistenz gilt für die gesamte Website nicht nur für eine einzelne Seite.

Wenn Sie eine Variable festlegen müssen, die auf den nächsten Seiten angezeigt werden soll, verwenden Sie:

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

Und in jeder Seite (wie wenn die Seite geladen wurde), erhalten Sie es wie:

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

.getItem() gibt null zurück, wenn kein Wert oder der Wert gespeichert ist.

Beachten Sie, dass nur Zeichenfolgenwerte in diesem Speicher gespeichert werden können. Dies kann jedoch mit JSON.stringify Und JSON.parse Behoben werden. . Technisch gesehen ruft es beim Aufruf von .setItem().toString() für den Wert auf und speichert diesen.

Das DOM-Speicherhandbuch von MDN (siehe unten) enthält Problemumgehungen/Polyfills, die auf Dinge wie Cookies zurückgreifen, wenn localStorage nicht verfügbar ist.

Es wäre keine schlechte Idee, eine vorhandene zu verwenden oder eine eigene Minibibliothek zu erstellen, die die Fähigkeit zum Speichern eines beliebigen Datentyps (wie Objektliterale, Arrays usw.) abstrahiert.


Referenzen:

225
Ian

Neben Cookies und localStorage gibt es noch mindestens einen weiteren Ort, an dem Sie "semi-persistente" Kundendaten speichern können: window.name. Jeder Zeichenfolgenwert, den Sie window.name Zuweisen, bleibt dort, bis das Fenster geschlossen wird.

Öffnen Sie zum Testen einfach die Konsole und geben Sie window.name = "foo" Ein. Aktualisieren Sie dann die Seite und geben Sie window.name Ein. es sollte mit foo antworten.

Dies ist ein kleiner Hack, aber wenn Sie nicht möchten, dass bei jeder Anfrage Cookies mit unnötigen Daten an den Server gesendet werden, und wenn Sie localStorage aus irgendeinem Grund nicht verwenden können (Legacy-Clients), es könnte eine Option sein, die in Betracht gezogen werden sollte.

window.name Hat eine weitere interessante Eigenschaft: Es ist für Fenster sichtbar, die von anderen Domänen aus bedient werden. Es unterliegt nicht der gleichen Ursprungsrichtlinie wie fast jede andere Eigenschaft von window. Sie können also nicht nur "semi-persistente" Daten speichern, während der Benutzer auf der Seite navigiert oder diese aktualisiert, sondern sie auch für die domänenübergreifende CORS-freie Kommunikation verwenden.

Beachten Sie, dass window.name Nur Zeichenfolgen speichern kann. Bei der großen Verfügbarkeit von JSON sollte dies selbst bei komplexen Daten kein großes Problem darstellen.

19
Dagg Nabbit

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

Wenn Sie nur HTML5 unterstützen möchten, können Sie sich Storage api wie localStorage / sessionStorage vorstellen

Beispiel: Verwenden von localStorage und Cookie-Bibliothek

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);
    }
}
8
Arun P Johny

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

2
hieu.do