Standardwert für lokales HTML5-Speicherelement angeben?

Lesezeit: 3 Minuten

Falls Sie versuchen, ein lokales Speicherelement zu erhalten, das nicht existiert, ist es möglich, einen Standardwert für dieses Element festzulegen?

Nehmen wir beispielsweise an, dass in Ihrer Web-App verschiedene UI-Einstellungen im lokalen Speicher gespeichert werden. Wenn ein Benutzer Ihre Website verlässt und dann zurückkommt, wird die Benutzeroberfläche gemäß den Werten eingerichtet, die aus seinem lokalen Speicher abgerufen werden. Das funktioniert super.

Wenn ein Benutzer Ihre Web-App jedoch zum ersten Mal besucht, sind diese lokalen Speicherwerte noch nicht vorhanden. Wenn Ihr JavaScript also versucht, diese lokalen Speicherelemente abzurufen, sind sie alle undefiniert. Gibt es keine Möglichkeit, Standardwerte für jedes lokale Speicherelement anzugeben, falls es nicht vorhanden ist?

Die meisten Programmiersprachen, die sich mit dem Speichern von Schlüssel/Wert-Paaren befassen, bieten eine Art Möglichkeit, Standardwerte anzugeben (denken Sie an .ini-Konfigurationsdateischnittstellen). Ich hatte so etwas erwartet:

var preference = localStorage.getItem('some-key', 'Default Value');

Außerdem weiß ich, dass ich Standardwerte einfach programmgesteuert festlegen kann, indem ich teste, ob sie null/undefiniert sind oder nicht, und den Wert entsprechend festlegen, aber ich wollte sehen, ob dies in das Abrufen von Schlüssel/Wert-Paaren des lokalen Speichers integriert ist und das vielleicht ich sah es einfach nicht. Wenn diese Funktion nicht vorhanden ist, werde ich am Ende nur einige grundlegende lokale Speicher-Wrapper-Funktionen schreiben, die diese Funktion hinzufügen.

Nein, es gibt keine solche eingebaute Funktionalität. Siehe die Spezifikation für die Storage Schnittstelle:

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

Und die folgende Zeile, nur um das weiter zu bestätigen:

Das getItem(key) -Methode muss den aktuellen Wert zurückgeben, der dem angegebenen Schlüssel zugeordnet ist. Wenn der angegebene Schlüssel nicht in der Liste vorhanden ist, die dem Objekt zugeordnet ist, dann Diese Methode muss null zurückgeben.

Sie können einfach die üblichen Techniken anwenden. So etwas sollte in Ordnung sein:

var preference = localStorage.getItem('some-key') || 'Default Value';

  • @JanDvorak – Ja, aber bei der Frage bin ich davon ausgegangen, dass das Fehlen eines Werts, z. B. der leere String, den Standardwert erfordern würde 🙂

    – James Allardice

    9. Dezember 2012 um 20:44 Uhr

  • Ich musste die Zeile in a einschließen try-catch Block. Andernfalls konnte mein Code nicht fortgesetzt werden. Ich habe sessionStorage verwendet.

    – Dharmaraj

    5. Mai 2020 um 13:12 Uhr

Die Lösung von James:

var preference = localStorage.getItem('some-key') || 'Default Value';

Funktioniert nur, wenn Sie niemals leere Zeichenfolgen ODER Boolesche Werte speichern ODER wenn Ihre Variable 0 sein kann.

Lösung, die länger ist, aber immer funktioniert:

var preference = localStorage.getItem('some-key');
if(null === preference)
{
    preference="Default Value";
}

  • var val = localStorage.getItem (Schlüssel); Rückgabewert === null ? def : val;

    – Vansuita jr.

    21. November 2017 um 23:24 Uhr

  • Wenn wir das berücksichtigen alles du speicherst darin lokaler Speicher wird als gespeichert SchnurJames-Lösung ist richtig und würde ordnungsgemäß zurückkehren “FALSCH” und “0”. Mir hat Ihre Beobachtung gefallen, dass Sie sich bewusst sind, wie das Szenario mit leeren Zeichenfolgen gehandhabt wird. Ich denke, sowohl Ihre als auch seine Lösungen sind gleichermaßen gültig, und welche zu wählen ist, hängt vom Kontext und von den Vorlieben ab.

    – Manuel Valle

    23. Januar 2018 um 4:51 Uhr

Sie können diese Methode für Objekte verwenden

/*
Helper function that return an object from local storage or a default value
*/
function getObjectFromLocalstorage(key, default_value){
  var value = localStorage.getItem(key);
  if (value === null){
    return default_value;
  }
  return JSON.parse(value);
}

Und hier sind einige Beispielausgaben:

console.log(getObjectFromLocalstorage("some_undefined_key", {}));
>>> {}

console.log(getObjectFromLocalstorage("some_undefined_key", []));
>>> []

var value = {a: 1}; 
localStorage.setItem("defined_key", JSON.stringify(value));
getObjectFromLocalstorage("defined_key", {});
>>> {a: 1}

Der beste Weg ist eine einfache Überprüfung beim Laden der Seite

let preference = localStorage.getItem('some-key');

window.addEventListener("load", () => {
  if (null === preference) {
    localStorage.setItem("some-key", "Default Value");
  }
});

1433980cookie-checkStandardwert für lokales HTML5-Speicherelement angeben?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy