Detaillierte Erläuterung des Beispiels der Caching-Methode von Vue

Kürzlich wurde die neue Anforderung „Front-End-Cache“ eingeführt

Anforderungshintergrund: Um das Problem des häufigen wiederholten Ausfüllens von Formularen zu lösen, ist es erforderlich, dass die zuletzt eingegebenen Daten beim Öffnen der Seite automatisch ausgefüllt werden und die Datenspeicherdauer eine Woche beträgt (gültig für 7 Tage).
Wenn es um Caching geht, denkt man zuerst an localstorage und sessionStorage

Sitzungsspeicher

Die Daten werden auch als Sitzungscache bezeichnet und gelöscht, wenn der Benutzer das Browserfenster schließt.

sessionStorage.setItem("key","value");//Speicher sessionStorage.getItems("key");//Drücken, um den Wert abzurufen sessionStorage.removeItems("key");//Taste drücken, um ein einzelnes zu löschen sessionStorage.clear();//Alle Daten löschen sessionStorage.length;//Anzahl der Daten abrufen sessionStorage.valueOf();//Alle Werte abrufen

lokaler Speicher

Für die gespeicherten Daten gibt es keine zeitliche Begrenzung. Solange sie nicht gelöscht werden, bleiben sie bestehen.

localstorage.setItem("key","value");//Daten speichern localstorage.getItem("key");//Daten lesen localstorage.removeItem("key",);//Einzelne Daten löschen localstorage.clear();//Alle Daten löschen localstorage.key(index);//Den Schlüssel eines bestimmten Index abrufen
Sowohl Schlüssel als auch Wert müssen Zeichenfolgen sein. Die Web Storage API kann nur mit Zeichenfolgen arbeiten.

Da sessionStorage-Daten gelöscht werden, wenn das Browserfenster geschlossen wird, sind sie für die Anforderungen, die ich entwickeln möchte, nicht anwendbar. Wenn wir nur diese beiden Lösungen in Betracht ziehen, scheint LocalStorage relativ geeignet zu sein, wenn jedoch LocalStorage zur Speicherung verwendet wird und ein Ablaufdatum festgelegt ist, wird es aus Code-Sicht problematischer.

Konkrete Implementierungsideen für Localstorage

1. Fügen Sie beim Speichern von Daten einen Zeitstempel hinzu

Bei großen Datenmengen können Sie beim Speichern der Daten mithilfe von LocalStorage eine Zeitangabe machen und diese beim Abrufen mit der aktuellen Zeit vergleichen.

In der Projektentwicklung können wir eine allgemeine Methode schreiben, um beim Speichern einen Zeitstempel hinzuzufügen

  Exportfunktion setLocalStorageAndTime (Schlüssel, Wert) {
  window.localStorage.setItem(Schlüssel, JSON.stringify({Daten: Wert, Zeit: neues Date().getTime() }))
  }

Anwendung im Projekt

  Wenn Daten vorhanden sind, speichern Sie sie erneut. setLocalStorageAndTime('XXX', {name: 'XXX'})

2. Vergleichen Sie mit der aktuellen Zeit beim Abrufen der Daten

Exportfunktion getLocalStorageAndTime (Schlüssel, exp = 86400000) {
 // Daten abrufen let data = window.localStorage.getItem(key)
 wenn (!data) return null
 let dataObj = JSON.parse(Daten)
 // Vergleiche mit Ablaufzeit if (new Date().getTime() - dataObj.time > exp) {
  //Gibt null zurück, wenn abgelaufen
  removeLocalStorage(Schlüssel)
  console.log('Informationen sind abgelaufen')
  return null
 } anders {
  Datenobjekt.Daten zurückgeben
 }
}

Die größte Eigenschaft von Programmierern ist Faulheit. Sie werden nie ein Plug-In verpassen und wenn möglich nie einen Lebenslauf manuell eingeben. Da das Schreiben zu umständlich ist, habe ich entschieden auf die Verwendung von LocalStorage verzichtet und nach einer einfacheren und bequemeren Methode gesucht. Auf Empfehlung eines Kollegen habe ich mich schließlich für Vue.ls entschieden, daher möchte ich Vue.ls vorstellen.

Vue.ls

Eine von Vue gekapselte lokale Speichermethode. Ein Vue-Plugin zur Verwendung von lokalem Speicher, Sitzungsspeicher und Arbeitsspeicher innerhalb eines Vue-Kontexts. Es ist einfach zu verwenden und die API-Beschreibung ist umfassend.

Installieren

NPM

npm installiere vue-ls --save

Garn

Garn hinzufügen vue-ls

verwenden

Vue-ls-Speicher-API

Speicher von „vue-ls“ importieren;
 
Optionen = {
 Namespace: „vuejs__“, // Schlüsselpräfixname: „ls“, // Benennen Sie die Vue-Variable.[ls] oder dies.[$ls],
 Speicher: „lokal“, // Speichername: Sitzung, lokal, Speicher
};
 
Vue.use(Speicher, Optionen);
// oder Vue.use(Storage);
 
neuer Vue({
  el: '#app',
  montiert: Funktion () {
    Vue.ls.set('foo', 'buu');
    // Gültigkeitsdauer festlegen Vue.ls.set('foo', 'boo', 60 * 60 * 1000); // 1 Stunde gültig Vue.ls.get('foo');
    Vue.ls.get('boo', 10); // Wenn boo nicht gesetzt ist, gib den Standardwert 10 zurück 
    
    let callback = (val, alterVal, uri) => {
     console.log('localStorage-Änderung', Wert);
    } 
    
    Vue.ls.on('foo', callback) // Änderungen an der Taste foo erkennen und den Rückruf auslösen Vue.ls.off('foo', callback) // Nicht erkennen Vue.ls.remove('foo'); // Entfernen }
});

Allgemein

Vue.ls

Kontext

dies.$ls

API-Beschreibung

Vue.ls.get(Name, Definition)

Gibt den Wert des Namens im Speicher zurück. Analysieren Sie den Wert intern aus JSON, bevor Sie ihn zurückgeben.

def: Der Standardwert ist null. Wenn nicht festgelegt, wird der Name zurückgegeben.
Vue.ls.set(Name, Wert, Ablauf)

Legen Sie den Wert des Namens im Speicher fest und konvertieren Sie den Wert in JSON

Ablauf: Standard ist null, die Gültigkeitsdauer des Namens wird in Millisekunden angegeben

Vue.ls.remove(Name)

Namen aus dem Speicher entfernen. Gibt „true“ zurück, wenn die Entfernung erfolgreich war, andernfalls „false“.

Vue.ls.clear()

Speicher leeren.

Vue.ls.on(Name, Rückruf)

Überwachen Sie weiterhin Änderungen am Namen anderer Tags und lösen Sie bei Änderungen einen Rückruf aus. Übergeben Sie dabei die folgenden Parameter:

• newValue: Name im aktuellen Speicher, analysiert aus dem persistenten JSON
• oldValue: Name im alten Speicher, analysiert aus dem persistenten JSON
• url: Ändern Sie die URL auf der Registerkarte
  

Vue.ls.off(Name, Rückruf)

Entfernen Sie den vorherigen Listener Vue.ls.on(name, callback)

Üben

Speicherung: Schlüssel-Wert-Paar-Format, der letzte Parameter ist die Gültigkeitsdauer

Wert: Der Parameter ist der zu speichernde Schlüssel

Anzeigen: Die gespeicherten Daten können im lokalen Speicher angezeigt werden

Zusammenfassen

Localstorage (lokaler Speicher) dient zur lokalen Speicherung als Datei zur dauerhaften Speicherung, Sessionstorage (Sitzungsspeicher) dient zur temporären Speicherung. Vue.ls ist eine von Vue gekapselte lokale Speichermethode, die einfach, bequem und benutzerfreundlich ist. localStorage und sessionStorage können nur Zeichenfolgentypen speichern. Für komplexe Objekte können Sie die von ECMAScript bereitgestellten Methoden stringify und parse der JSON-Objekte verwenden, um sie zu verarbeiten.

Dies ist das Ende dieses Artikels über die Caching-Methode von Vue. Weitere relevante Inhalte zur Caching-Methode von Vue finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!