Verwalten und legen Sie den Gültigkeitszeitraum von localstorage fest

Um die Ablaufzeit von Localstorage zu verstehen und zu verstehen, wie man es verwaltet, sind spezifische Codebeispiele erforderlich

In der modernen Front-End-Entwicklung ist lokaler Speicher ein sehr wichtiges Konzept. Unter diesen ist Localstorage die am häufigsten verwendete lokale Speichermethode. Es speichert die Daten zur späteren Verwendung in der lokalen Umgebung des Browsers. Bei der Verwendung von Localstorage müssen wir jedoch auch die Ablaufzeit der Daten und die Verwaltung dieser Daten berücksichtigen.

Localstorage verfügt nicht über einen nativen Mechanismus zum Festlegen der Ablaufzeit. Standardmäßig bleiben in localstorage gespeicherte Daten im Browser des Benutzers, bis der Benutzer sie manuell löscht oder der Browser-Cache geleert wird. In vielen praktischen Anwendungen müssen wir jedoch normalerweise die Ablaufzeit von Daten festlegen, um die Aktualität der Daten sicherzustellen.

Beim Umgang mit der Ablaufzeit lokaler Speicherdaten besteht die übliche Methode darin, sie durch Hinzufügen eines Zeitstempels (Zeitstempel) oder eines Ablaufzeitstempels (Ablaufzeitstempel) zu verwalten. Ein Zeitstempel ist eine Zahl, die die aktuelle Zeit darstellt, normalerweise ausgedrückt als Unix-Zeitstempel, also die Anzahl der Sekunden, die seit dem 1. Januar 1970, 00:00:00 Uhr, vergangen sind. Durch den Vergleich der aktuellen Zeit mit dem gespeicherten Zeitstempel können wir feststellen, ob die Daten abgelaufen sind.

Das Folgende ist ein Beispielcode, der zeigt, wie die Ablaufzeit von lokalen Speicherdaten festgelegt und verwaltet wird:

// 设置localstorage数据，并添加过期时间
function setLocalStorageData(key, value, expirationHours) {
  const expirationMS = expirationHours * 60 * 60 * 1000; // 将小时转换为毫秒
  const expirationTime = Date.now() + expirationMS; // 计算过期时间戳
  const data = {
    value: value,
    expirationTime: expirationTime
  };
  localStorage.setItem(key, JSON.stringify(data));
}

// 获取localstorage数据，并检查是否过期
function getLocalStorageData(key) {
  const data = JSON.parse(localStorage.getItem(key));
  if (data && data.expirationTime && data.expirationTime > Date.now()) {
    return data.value;
  }
  return null; // 数据已过期或不存在时返回null
}

// 示例用法
setLocalStorageData('username', 'JohnDoe', 24); // 设置一个过期时间为24小时的数据
const username = getLocalStorageData('username'); // 获取数据
console.log(username); // 输出 "JohnDoe"

setTimeout(() => {
  const expiredUsername = getLocalStorageData('username'); // 延迟后再次获取数据
  console.log(expiredUsername); // 输出 null，数据已过期
}, 25 * 60 * 60 * 1000); // 延迟25小时

Im obigen Beispielcode verwenden wir die Methode setLocalStorageData, um die lokalen Speicherdaten festzulegen und hinzuzufügen eine Ablaufzeit. Bei dieser Methode konvertieren wir zunächst die abgelaufenen Stunden in Millisekunden und erhalten den aktuellen Zeitstempel über die Methode Date.now(). Anschließend speichern wir die Daten und den berechneten Ablaufzeitstempel in einem Objekt, serialisieren das Objekt über die Methode JSON.stringify in einen String und speichern ihn im lokalen Speicher. setLocalStorageData方法来设置localstorage数据，并添加一个过期时间。在这个方法中，我们先将过期的小时数转换为毫秒，并通过Date.now()方法获取当前时间戳。然后，我们将数据和计算得到的过期时间戳保存在一个对象中，并通过JSON.stringify方法将对象序列化成字符串后存储在localstorage中。

同时，我们还编写了getLocalStorageData方法来获取localstorage数据，并检查数据是否过期。在这个方法中，我们首先通过JSON.parse方法将localstorage数据解析成一个对象。然后，我们检查解析的对象中是否有过期时间戳，并且过期时间戳是否大于当前时间戳。如果数据未过期，则返回数据的值；否则，返回null。

示例的最后部分展示了如何使用这两个方法。我们首先使用setLocalStorageData方法设置一个过期时间为24小时的数据。然后，通过getLocalStorageData方法获取这个数据，并将结果打印到控制台中。接着，我们使用setTimeout函数延迟执行代码，并在代码中使用getLocalStorageData

Gleichzeitig haben wir auch die Methode getLocalStorageData geschrieben, um lokale Speicherdaten abzurufen und zu überprüfen, ob die Daten abgelaufen sind. Bei dieser Methode analysieren wir zunächst die lokalen Speicherdaten mithilfe der Methode JSON.parse in ein Objekt. Anschließend prüfen wir, ob im analysierten Objekt ein Ablaufzeitstempel vorhanden ist und ob der Ablaufzeitstempel größer als der aktuelle Zeitstempel ist. Wenn die Daten nicht abgelaufen sind, wird der Wert der Daten zurückgegeben; andernfalls wird null zurückgegeben.

Der letzte Teil des Beispiels zeigt, wie diese beiden Methoden verwendet werden. Wir verwenden zunächst die Methode setLocalStorageData, um Daten mit einer Ablaufzeit von 24 Stunden festzulegen. Rufen Sie diese Daten dann über die Methode getLocalStorageData ab und geben Sie das Ergebnis auf der Konsole aus. Als nächstes verwenden wir die Funktion setTimeout, um die Ausführung des Codes zu verzögern, und verwenden die Methode getLocalStorageData im Code, um die Daten erneut abzurufen. Da unsere Verzögerung die Ablaufzeit der Daten überschreitet, ist das erhaltene Ergebnis null, was darauf hinweist, dass die Daten abgelaufen sind. 🎜🎜Anhand des obigen Codebeispiels können wir lernen, wie man die Ablaufzeit lokaler Speicherdaten festlegt und verwaltet. Durch das Hinzufügen von Zeitstempeln oder Ablaufzeitstempeln können wir die Aktualität von Daten effektiv kontrollieren und die Zuverlässigkeit und Leistung von Anwendungen verbessern. Natürlich müssen wir in tatsächlichen Anwendungen möglicherweise auch andere Faktoren berücksichtigen, z. B. Datenaktualisierungsmechanismen und Caching-Strategien, um lokale Speicherdaten besser verwalten zu können. 🎜

Das obige ist der detaillierte Inhalt vonVerwalten und legen Sie den Gültigkeitszeitraum von localstorage fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!