So legen Sie die Ablaufzeit von Localstorage-Elementen fest-HTML-Tutorial-php.cn

So legen Sie die Ablaufzeit von Localstorage-Elementen fest

WBOY

Freigeben： 2024-01-11 09:06:23

Original

1931 Leute haben es durchsucht

So legen Sie die Ablaufzeit von Localstorage-Elementen fest

Um die Ablaufzeit des lokalen Speichers festzulegen, sind bestimmte Codebeispiele erforderlich.

Angesichts der schnellen Entwicklung des Internets erfordert die Front-End-Entwicklung häufig das Speichern von Daten im Browser. Localstorage ist eine häufig verwendete Web-API, die eine Möglichkeit bieten soll, Daten lokal im Browser zu speichern. Localstorage bietet jedoch keine direkte Möglichkeit, die Ablaufzeit festzulegen. In diesem Artikel wird anhand von Codebeispielen erläutert, wie die Ablaufzeit von Localstorage festgelegt wird.

Bevor wir beginnen, müssen wir zunächst die grundlegende Verwendung von Localstorage verstehen. Sie können die folgenden zwei Methoden verwenden, um localstorage zu betreiben:

localStorage.setItem(key, value): Speichern Sie das angegebene Schlüssel-Wert-Paar in localstorage.

localStorage.setItem(key, value)

localStorage.getItem(key)：从localstorage中获取指定键的值。

需要注意的是，localstorage存储的值只能是字符串类型。如果需要存储其他类型的值，可以使用JSON.stringify()方法将其转换为字符串，然后在取出时使用JSON.parse()方法将其转换回原始类型。

接下来，我们将使用localstorage实现设置过期时间的功能。我们可以通过在存入数据时，同时存入一个过期时间戳，然后在取出数据时判断是否已经过期。下面是一个示例代码：

// 设置localstorage的过期时间
function setLocalStorageWithExpiration(key, value, expirationMinutes) {
  const expirationMS = expirationMinutes * 60 * 1000;
  const record = {
    value: value,
    expiration: new Date().getTime() + expirationMS
  };
  localStorage.setItem(key, JSON.stringify(record));
}

// 获取localstorage的值（同时判断是否过期）
function getLocalStorageWithExpiration(key) {
  const record = JSON.parse(localStorage.getItem(key));
  if (!record) {
    return null;
  }
  if (new Date().getTime() > record.expiration) {
    localStorage.removeItem(key);
    return null;
  }
  return record.value;
}

// 使用示例
setLocalStorageWithExpiration('username', 'John', 5); // 设置过期时间为5分钟
console.log(getLocalStorageWithExpiration('username')); // 输出：John

// 5分钟后
setTimeout(() => {
  console.log(getLocalStorageWithExpiration('username')); // 输出：null
}, 5 * 60 * 1000);

Nach dem Login kopieren

在上述示例中，setLocalStorageWithExpiration函数用于设置localstorage的过期时间。它接受三个参数：键名key、键值value和过期时间expirationMinutes（以分钟为单位）。其中，过期时间通过计算当前时间加上指定的分钟数得出，然后将键值对及过期时间存储在localstorage中。

getLocalStorageWithExpiration函数用于获取localstorage的值，并判断其是否过期。它首先从localstorage中获取指定键的值，并将其解析为一个对象。然后判断对象是否存在，如果不存在或已经过期，则返回null；如果未过期，则返回键值。

在示例中，我们设置了一个名为'username'的键值对，并将过期时间设置为5分钟。在设置完毕后，我们通过getLocalStorageWithExpiration函数获取'username'的值并打印到控制台，可以看到输出为'John'。然后，我们使用setTimeoutlocalStorage.getItem(key): Ruft den Wert des angegebenen Schlüssels von localstorage ab.

Es ist zu beachten, dass der in localstorage gespeicherte Wert nur vom Typ String sein kann. Wenn Sie einen Wert eines anderen Typs speichern müssen, können Sie ihn mit der Methode JSON.stringify() in einen String konvertieren und ihn dann beim Herausnehmen mit der Methode JSON.parse() wieder in den ursprünglichen Typ konvertieren .

Als nächstes werden wir localstorage verwenden, um die Funktion zum Festlegen der Ablaufzeit zu implementieren. Wir können beim Speichern von Daten einen Ablaufzeitstempel speichern und dann beim Abrufen der Daten feststellen, ob dieser abgelaufen ist. Hier ist ein Beispielcode: 🎜rrreee🎜Im obigen Beispiel wird die Funktion setLocalStorageWithExpiration verwendet, um die Ablaufzeit von localstorage festzulegen. Es akzeptiert drei Parameter: Schlüsselname, Schlüsselwert und Ablaufzeit expirationMinutes (in Minuten). Unter anderem wird die Ablaufzeit berechnet, indem die aktuelle Zeit und die angegebene Anzahl von Minuten addiert werden. Anschließend werden das Schlüssel-Wert-Paar und die Ablaufzeit im lokalen Speicher gespeichert. Die Funktion 🎜🎜getLocalStorageWithExpiration wird verwendet, um den Wert von localstorage abzurufen und festzustellen, ob er abgelaufen ist. Zunächst wird der Wert des angegebenen Schlüssels von localstorage abgerufen und in ein Objekt analysiert. Stellen Sie dann fest, ob das Objekt vorhanden ist oder abgelaufen ist. Geben Sie null zurück. Wenn es nicht abgelaufen ist, geben Sie den Schlüsselwert zurück. 🎜🎜Im Beispiel richten wir ein Schlüssel-Wert-Paar namens „Benutzername“ ein und legen die Ablaufzeit auf 5 Minuten fest. Nach der Einrichtung erhalten wir den Wert von „Benutzername“ über die Funktion getLocalStorageWithExpiration und geben ihn auf der Konsole aus. Sie können sehen, dass die Ausgabe „John“ ist. Dann verwenden wir die Funktion setTimeout, um zu simulieren, dass der Wert von „Benutzername“ nach 5 Minuten erneut abgerufen wird, und geben ihn auf der Konsole aus. Sie können sehen, dass die Ausgabe null ist, was darauf hinweist, dass der Schlüsselwert vorliegt Paar ist abgelaufen und wurde entfernt. 🎜🎜Durch das obige Beispiel haben wir die Funktion zur Verwendung von localstorage zum Festlegen der Ablaufzeit erfolgreich implementiert. Es ist zu beachten, dass die Verwendung von localstorage gewisse Risiken birgt, da es im Client-Browser gespeichert wird. Achten Sie daher bei der Verwendung von localstorage zur Speicherung sensibler Informationen oder wichtiger Daten auf die Sicherheit und Vertraulichkeit der Daten. 🎜

Das obige ist der detaillierte Inhalt vonSo legen Sie die Ablaufzeit von Localstorage-Elementen fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!