Schnelle LocalStorage-Nutzung in Vue

localStorage kann ein unglaublich nützliches Werkzeug zur Erstellung von Erlebnissen für Anwendungen, Erweiterungen, Dokumentationen und eine Vielzahl von Anwendungsfällen sein. Ich persönlich habe es bei jedem einzelnen davon verwendet! In Fällen, in denen Sie etwas Kleines für den Benutzer speichern, das nicht dauerhaft aufbewahrt werden muss, ist localStorage unser Freund. Kombinieren wir localStorage mit Vue, was ich persönlich als eine großartige und leicht lesbare Entwicklungserfahrung empfinde.

Vereinfachtes Beispiel

Ich habe kürzlich einen Frontend Masters-Kurs unterrichtet, in dem wir eine Anwendung von Anfang bis Ende mit Nuxt erstellt haben. Ich suchte nach einer Möglichkeit, die Art und Weise, wie wir sie erstellten, in kleinere Abschnitte zu zerlegen und sie nach und nach abzuhaken, da wir viel zu behandeln hatten. localStorage war eine Lösung, da jeder seinen eigenen Fortschritt persönlich verfolgte und ich nicht unbedingt all diese Informationen in etwas wie AWS oder Azure speichern musste.

Hier ist das Endprodukt, das wir erstellen, eine einfache To-do-Liste

Speichern der Daten

Wir beginnen mit der Festlegung der Daten, die wir für alle Elemente benötigen, die wir möglicherweise abhaken möchten, sowie einem leeren Array für alles, was vom Benutzer abgehakt wird.

export default {
  data() {
    return {
      checked: [],
      todos: [
        "Set up nuxt.config.js",
        "Create Pages",
        // ...
        ]
     }
   }
}

Wir werden es auch auf der Seite im Template-Tag ausgeben

  <div id="app">
    <fieldset>
      <legend>
        What we're building
      </legend>
      <div v-for="todo in todos" :key="todo">
        <input
          type="checkbox"
          name="todo"
          :id="todo"
          :value="todo"
          v-model="checked"
        />
       <label :for="todo">{{ todo }}</label>
     </div>
   </fieldset>
 </div>

Mounting und Watching

Derzeit reagieren wir auf die Änderungen in der Benutzeroberfläche, aber wir speichern sie noch nicht irgendwo. Um sie zu speichern, müssen wir localStorage mitteilen: „Hallo, wir sind daran interessiert, mit Ihnen zu arbeiten.“ Dann müssen wir auch in die Reaktivität von Vue eingreifen, um diese Änderungen zu aktualisieren. Sobald die Komponente gemountet ist, verwenden wir den mounted Hook, um ausgewählte Elemente in der To-do-Liste auszuwählen und sie dann in JSON zu parsen, damit wir die Daten in localStorage speichern können.

mounted() {
  this.checked = JSON.parse(localStorage.getItem("checked")) || []
}

Jetzt beobachten wir diese checked Eigenschaft auf Änderungen, und wenn sich etwas ändert, aktualisieren wir ebenfalls localStorage!

watch: {
  checked(newValue, oldValue) {
    localStorage.setItem("checked", JSON.stringify(newValue));
  }
}

Das ist alles!

Das ist eigentlich alles, was wir für dieses Beispiel brauchen. Dies zeigt nur einen kleinen möglichen Anwendungsfall, aber Sie können sich vorstellen, wie wir localStorage für so viele performante und persönliche Erlebnisse im Web nutzen könnten!