Mehrere Möglichkeiten zum Festlegen der Ablaufzeit von localStorage

Wenn es um localStorage geht, müssen Freunde, die mit dem Front-End vertraut sind, damit vertraut sein. Wir können die bereitgestellten APIs getItem, setItem, removeItem und clear verwenden, um problemlos „Lese-, Schreib- und Löschvorgänge“ für die lokal im Browser gespeicherten Daten durchzuführen. Im Vergleich zu Cookies besteht der einzige Nachteil von localStorage jedoch darin, dass „die Ablaufzeit jedes Schlüssels nicht festgelegt werden kann“.

Über die Eigenschaft „localStorage“ können wir auf einen Speicher für ein Dokumentenursprungsobjekt zugreifen. Die gespeicherten Daten werden in der Browser-Sitzung gespeichert. localStorage ähnelt sessionStorage, der Unterschied besteht jedoch darin, dass die in localStorage gespeicherten Daten für lange Zeit gespeichert werden können. Wenn die Seitensitzung endet, d. h. wenn die Seite geschlossen wird, werden die in sessionStorage gespeicherten Daten gelöscht.

Wir sollten auch beachten, dass Schlüssel-Wert-Paare im localStorage immer als Zeichenfolgen gespeichert werden.

Problembeschreibung

In tatsächlichen Anwendungsszenarien müssen wir häufig einen bestimmten im localStorage festgelegten „Schlüssel“ innerhalb einer angegebenen Zeit automatisch ungültig machen. Wie können wir das also basierend auf diesem Szenario lösen?

1. Basislösung

Wer sich nur mit dem Frontend auskennt, erhält die Antwort vielleicht gleich:

localStorage.setItem('dooring', '1.0.0')
// Gültigkeitsdauer auf eine Stunde festlegen const expire = 1000 * 60 * 60;
setzeTimeout(() => {
  localStorage.setItem('Türöffnung', '')
}, erlöschen)

Natürlich kann diese Lösung das Problem vorübergehend lösen, aber wenn Sie die Gültigkeitsdauer eines Schlüssels festlegen möchten, müssen Sie mit dieser Lösung mehrere Timer schreiben, was „extrem hohe Wartungskosten verursacht und der technischen Wiederverwendung nicht förderlich ist“.

2. Zwischenlösung

Nachdem Front-End-Ingenieure über einige Berufserfahrung verfügen, berücksichtigen sie häufig die Probleme der Entwicklung und Wiederverwendbarkeit und verfügen über ein gewisses Verständnis von Datenstrukturen, sodass sie möglicherweise über die folgenden Lösungen verfügen:

• Verwenden Sie **„localStorage**“, um eine Zuordnungstabelle von {key(key): expire(Ablaufzeit)} zu speichern.
• Schreiben Sie **"localStorage API"** neu und kapseln Sie die Methode zweimal

Ein ähnlicher Code sieht wie folgt aus:

const speichern = {
  //Ablaufzeitkarte speichern setExpireMap: (Schlüssel, Ablauf) => {
    const expireMap = localStorage.getItem('EXPIRE_MAP') || "{}"
    localStorage.setItem(
      'EXPIRE_MAP', 
      JSON.stringify({
      ...JSON.parse(expireMap),
      Schlüssel: ablaufen
    }))
  },
  setItem: (Schlüssel, Wert, Ablauf) => {
    store.setExpireMap(Schlüssel, Ablauf)
    localStorage.setItem(Schlüssel, Wert)
  },
  getItem: (Schlüssel) => {
    //Bestimmen Sie, ob es abgelaufen ist, bevor Sie den Wert abrufen const expireMap = JSON.parse(
      localStorage.getItem('EXPIRE_MAP') || "{}"
    )
    wenn(expireMap[Schlüssel] && expireMap[Schlüssel] < Date.now()) {
      returniere localStorage.getItem(Schlüssel)
    }anders {
      localStorage.removeItem(Schlüssel)
      return null
    }
  }
  // ...
}

Auf den ersten Blick löst diese Lösung zwar das Problem der Wiederverwendbarkeit und verschiedene Teams können diese Lösung verwenden, sie hat jedoch dennoch einige Nachteile:

• Beim Betrieb des Speichers müssen zwei Kopien der Daten verwaltet werden, und der Cache-Speicherplatz ist belegt
• Wenn EXPIRE_MAP versehentlich gelöscht wird, werden alle Ablaufzeiten ungültig.
• Fehlende flexiblere Kontrolle über den Betriebsablauf (wie etwa Betriebsstatus, Betriebsrückruf usw.)

3. Erweiterte Lösung

Was sollten wir tun, um die Wartungskosten und den Platzbedarf zu senken und bestimmte flexible Steuerungs- und Fehlertoleranzfunktionen zu unterstützen?
Hier fallen mir zwei ähnliche Lösungen ein:

1. Speichern Sie die Ablaufzeit im Schlüssel, z. B. dooring|6000. Verwenden Sie jedes Mal, wenn Sie einen Wert nehmen, das Trennzeichen "|", um den Schlüssel und den Ablauf herauszunehmen und eine Entscheidung zu treffen
2. Speichern Sie die Ablaufzeit in einem Wert wie 1.0.0|6000, der Rest ist gleich 1

Um mehr Kapselung und Zuverlässigkeit zu erreichen, können wir auch Rückrufe in verschiedenen Zuständen konfigurieren, die einfach wie folgt implementiert werden können:

const speichern = {
  vorherige ID: 'xi-',
  Zeitzeichen: '|-Tür-|',
  Status: {
    ERFOLG: 0,
    FEHLER: 1,
    ÜBERLAUF: 2,
    ZEITÜBERSCHREITUNG: 3,
  },
  Speicher: localStorage || window.localStorage,
  getKey: Funktion (Schlüssel: Zeichenfolge) {
    gib this.preId + Schlüssel zurück;
  },
  set: Funktion (
    Schlüssel: Zeichenfolge,
    Wert: Zeichenfolge | Zahl,
    Zeit?: Datum & Nummer,
    cb?: (Status: Nummer, Schlüssel: Zeichenfolge, Wert: Zeichenfolge | Nummer) => ungültig,
  ) {
    let _status = this.status.SUCCESS,
      _key = this.getKey(Schlüssel),
      _Zeit;
    // Legen Sie die Ablaufzeit fest. Wenn die Zeit nicht festgelegt ist, wird standardmäßig ein Monat verwendet. Versuchen Sie {
      _time = Zeit
        ? neues Datum(Uhrzeit).getTime() || Zeit.getTime()
        : neues Date().getTime() + 1000 * 60 * 60 * 24 * 31;
    } fangen (e) {
      _time = neues Date().getTime() + 1000 * 60 * 60 * 24 * 31;
    }
    versuchen {
      this.storage.setItem(_Schlüssel, _Zeit + this.timeSign + Wert);
    } fangen (e) {
      _status = dieser.status.OVERFLOW;
    }
    cb && cb.call(dieser, _status, _schlüssel, wert);
  },
  get: Funktion (
    Schlüssel: Zeichenfolge,
    cb?: (Status: Zahl, Wert: Zeichenfolge | Zahl | null) => ungültig,
  ) {
    let status = this.status.SUCCESS,
      _key = this.getKey(Schlüssel),
      Wert = null,
      Zeitzeichenlänge = diese.Zeitzeichenlänge,
      das = dies,
      Index,
      Zeit,
      Ergebnis;
    versuchen {
      Wert = that.storage.getItem(_key);
    } fangen (e) {
      Ergebnis = {
        Status: dieser.Status.FEHLER,
        Wert: null,
      };
      cb && cb.call(dieses, Ergebnis.Status, Ergebnis.Wert);
      Ergebnis zurückgeben;
    }
    wenn (Wert) {
      index = Wert.indexOf(that.timeSign);
      Zeit = +Wert.Slice(0, Index);
      wenn (Zeit > neues Date().getTime() || Zeit == 0) {
        Wert = Wert.Slice(Index + Zeitzeichenlänge);
      } anders {
        (Wert = null), (Status = das.Status.TIMEOUT);
        das.entfernen(_key);
      }
    } anders {
      Status = dieser.Status.FEHLER;
    }
    Ergebnis = {
      Status: Status,
      Wert: Wert,
    };
    cb && cb.call(dieses, Ergebnis.Status, Ergebnis.Wert);
    Ergebnis zurückgeben;
  },
  // ...
};

Standardspeicher exportieren;

Auf diese Weise können wir erreichen, dass jeder Schlüssel eine unabhängige Ablaufzeit hat und den Status verschiedener Operationsergebnisse problemlos steuern kann ~

4. Hardcore-Lösung

Die beste Lösung ist natürlich, die JavaScript-Bibliothek xijs direkt zu verwenden, da ich die obige vollständige Implementierung in die Bibliothek gekapselt habe. Wir müssen nur die folgende Lösung verwenden, um die leistungsstarke Methode „localStorage“ mit Ablaufzeit einfach zu verwenden:

// Installieren Sie zuerst yarn add xijs
importiere { store } von 'xijs';
//Setze einen Schlüssel mit Ablaufzeit
store.set('name', 'dooring', Datum.jetzt() + 1000);
Konsole.log(store.get('Name'));
setzeTimeout(() => {
  Konsole.log(store.get('Name'));
}, 1000);

// Rückruf nach erfolgreichem Setzen store.set('dooring', 'xuxiaoxi', Date.now() + 1000, (status, key, value) => {
  console.log('Erfolg');
});

Gleichzeitig erweitert xijs kontinuierlich weitere nützliche Toolfunktionen, um die Geschäftsentwicklung effizienter zu gestalten. Aktuell sind folgende Toolfunktionen integriert:

• „store“ Eine Cache-Bibliothek, die auf der Kapselung der oberen Ebene von localStorage basiert und die Einstellung der Ablaufzeit sowie den Rückruf von Vorgängen unterstützt.
• „uuid“ Generiert eine eindeutige ID, unterstützt die Festlegung der Länge
• "randomStr" Erzeugt eine bestimmte Anzahl zufälliger Zeichenfolgen
• „formatDate“ Sofort einsatzbereites Zeitformatierungstool
• "Debounce" Anti-Shake-Funktion
• Drosselfunktion „throttle“
• „url2obj“ Konvertiert eine URL-Zeichenfolge in ein Objekt
• "obj2url" konvertiert ein Objekt in einen codierten URL-String
• „isPC“ Bestimmen Sie, ob das Gerät ein PC-Typ ist

GitHub-Adresse: https://github.com/MrXujiang/xijs

Dokumentadresse: h5.dooring.cn/xijs

Damit ist dieser Artikel über verschiedene Methoden zum Festlegen der Ablaufzeit von localStorage abgeschlossen. Weitere Informationen zur Ablaufzeit von localStorage 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!