Heim Web-Frontend HTML-Tutorial So legen Sie die Ablaufzeit von Localstorage-Elementen fest

So legen Sie die Ablaufzeit von Localstorage-Elementen fest

Jan 11, 2024 am 09:06 AM
aufstellen localstorage Ablaufzeit

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中。
  • 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);

在上述示例中,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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Stock Market GPT

Stock Market GPT

KI-gestützte Anlageforschung für intelligentere Entscheidungen

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie legt man den geplanten Zeitpunkt für die Veröffentlichung von Werken auf Douyin fest? Wie wird die Videodauer eingestellt? Wie legt man den geplanten Zeitpunkt für die Veröffentlichung von Werken auf Douyin fest? Wie wird die Videodauer eingestellt? Mar 27, 2024 pm 06:11 PM

Das Veröffentlichen von Werken auf Douyin kann mehr Aufmerksamkeit und Likes erregen, aber manchmal kann es für uns schwierig sein, Werke in Echtzeit zu veröffentlichen. In diesem Fall können wir die Funktion zur geplanten Veröffentlichung von Douyin nutzen. Mit der geplanten Veröffentlichungsfunktion von Douyin können Benutzer Werke automatisch zu geplanten Zeiten veröffentlichen, wodurch der Veröffentlichungsplan besser geplant und die Bekanntheit und der Einfluss der Werke erhöht werden können. 1. Wie legt man den geplanten Zeitpunkt für die Veröffentlichung von Werken auf Douyin fest? Um eine geplante Veröffentlichungszeit festzulegen, gehen Sie zunächst auf die persönliche Homepage von Douyin, suchen Sie die Schaltfläche „+“ in der oberen rechten Ecke und klicken Sie, um die Veröffentlichungsseite aufzurufen. In der unteren rechten Ecke der Veröffentlichungsseite befindet sich ein Uhrensymbol. Klicken Sie hier, um die Schnittstelle für geplante Veröffentlichungen aufzurufen. In der Benutzeroberfläche können Sie die Art der Arbeit auswählen, die Sie veröffentlichen möchten, einschließlich kurzer Videos, langer Videos und Live-Übertragungen. Als nächstes müssen Sie festlegen, wann Ihre Arbeit veröffentlicht werden soll. TikTok bietet

Wie stelle ich die automatische Abschaltung der Douyin-Wiedergabe ein? Warum wird der Wiedergabevorgang automatisch beendet? Wie stelle ich die automatische Abschaltung der Douyin-Wiedergabe ein? Warum wird der Wiedergabevorgang automatisch beendet? Apr 01, 2024 pm 12:06 PM

Douyin ist heute eine der beliebtesten Kurzvideoplattformen. Die Nutzer genießen zwar den Spaß an Kurzvideos, hoffen aber auch, ihre Zeit besser kontrollieren zu können. Kürzlich berichteten einige Benutzer, dass Douyin während der Wiedergabe automatisch geschlossen wurde, was sie sehr beunruhigte. 1. Wie stelle ich die automatische Abschaltung der Douyin-Wiedergabe ein? 1. Überprüfen Sie die Douyin-Version. Bitte stellen Sie sicher, dass die von Ihnen verwendete Douyin-Version die neueste ist. Douyin wird regelmäßig aktualisiert, um bekannte Probleme zu beheben. Wenn Ihre Version von TikTok zu alt ist, wird sie möglicherweise automatisch geschlossen. Sie können TikTok im App Store überprüfen und aktualisieren. 2. Überprüfen Sie die Systemversion des Mobiltelefons. Das automatische Abschalten der Douyin-Wiedergabe hängt möglicherweise auch mit der Systemversion des Mobiltelefons zusammen. Bitte stellen Sie sicher, dass die Version Ihres Mobiltelefonsystems auf dem neuesten Stand ist. Wenn die Version des Mobiltelefonsystems zu alt ist, läuft Douyin möglicherweise instabil. du kannst

„Bitte nicht stören'-Modus funktioniert auf dem iPhone nicht: Behebung „Bitte nicht stören'-Modus funktioniert auf dem iPhone nicht: Behebung Apr 24, 2024 pm 04:50 PM

Selbst das Beantworten von Anrufen im Modus „Bitte nicht stören“ kann ein sehr lästiges Erlebnis sein. Wie der Name schon sagt, deaktiviert der Modus „Bitte nicht stören“ alle Benachrichtigungen über eingehende Anrufe und Warnungen von E-Mails, Nachrichten usw. Sie können diesen Lösungssätzen folgen, um das Problem zu beheben. Fix 1 – Fokusmodus aktivieren Aktivieren Sie den Fokusmodus auf Ihrem Telefon. Schritt 1 – Wischen Sie von oben nach unten, um auf das Kontrollzentrum zuzugreifen. Schritt 2 – Aktivieren Sie als Nächstes den „Fokusmodus“ auf Ihrem Telefon. Der Fokusmodus aktiviert den „Bitte nicht stören“-Modus auf Ihrem Telefon. Es werden keine Benachrichtigungen über eingehende Anrufe auf Ihrem Telefon angezeigt. Fix 2 – Fokusmodus-Einstellungen ändern Wenn es Probleme mit den Fokusmoduseinstellungen gibt, sollten Sie diese beheben. Schritt 1 – Öffnen Sie Ihr iPhone-Einstellungsfenster. Schritt 2 – Als nächstes schalten Sie die Fokusmodus-Einstellungen ein

So stellen Sie die Eingabetaste ein, um Nachrichten in QQ zu senden So stellen Sie die Eingabetaste ein, um Nachrichten in QQ zu senden Mar 25, 2024 pm 07:10 PM

1. Klicken Sie zunächst auf den Desktop des Mobiltelefons, um QQ aufzurufen, und klicken Sie dann auf den Avatar in der oberen linken Ecke. 2. Klicken Sie unten links auf [Einstellungen]. 3. Klicken Sie, um [Barrierefreiheit] zu öffnen. 4. Dann müssen wir nur noch auf den Schalter [Eingabetaste zum Senden der Nachricht] klicken.

So richten Sie geplante Veröffentlichungen auf Weibo ein_Tutorial zum Einrichten geplanter Veröffentlichungen auf Weibo So richten Sie geplante Veröffentlichungen auf Weibo ein_Tutorial zum Einrichten geplanter Veröffentlichungen auf Weibo Mar 29, 2024 pm 03:51 PM

1. Öffnen Sie den Weibo-Client, klicken Sie auf der Bearbeitungsseite auf die drei kleinen Punkte und dann auf Geplanter Beitrag. 2. Nachdem Sie auf „Geplante Veröffentlichung“ geklickt haben, wird auf der rechten Seite der Veröffentlichungszeit eine Zeitoption angezeigt. Legen Sie die Zeit fest, bearbeiten Sie den Artikel und klicken Sie auf die gelben Wörter in der unteren rechten Ecke, um ihn regelmäßig zu veröffentlichen. 3. Die mobile Version von Weibo unterstützt derzeit keine geplante Veröffentlichung. Diese Funktion kann nur auf dem PC-Client verwendet werden!

So stellen Sie den Countdown für den Ticketkauf in Damai ein So stellen Sie den Countdown für den Ticketkauf in Damai ein Apr 01, 2024 pm 07:01 PM

Beim Kauf von Tickets auf Damai.com können Benutzer eine schwebende Uhr einstellen, um Tickets zu erhalten, um sicherzustellen, dass die Ticketkaufzeit genau erfasst werden kann. Die detaillierte Einstellungsmethode finden Sie unten. Lassen Sie uns gemeinsam lernen. So binden Sie die Floating Clock an Damai 1. Klicken Sie, um die Floating Clock-App auf Ihrem Telefon zu öffnen, um die Benutzeroberfläche aufzurufen, und klicken Sie auf den Ort, an dem der Flash-Sale-Check eingestellt ist, wie in der Abbildung unten gezeigt: 2. Nachdem Sie angekommen sind Klicken Sie auf der Seite zum Hinzufügen neuer Datensätze auf Damai.com. Kopieren Sie die Seite mit dem Link zum Ticketkauf. 3. Legen Sie als Nächstes unten die Flash-Sale-Zeit und die Benachrichtigungszeit fest, schalten Sie den Schalter hinter [Im Kalender speichern] ein und klicken Sie unten auf [Speichern]. 4. Klicken Sie, um [Countdown] zu aktivieren, wie in der Abbildung unten gezeigt: 5. Wenn die Erinnerungszeit gekommen ist, klicken Sie unten auf die Schaltfläche [Bild-in-Bild starten]. 6. Wann der Ticketkaufzeitpunkt kommt

Wo ist das Douyin-Tag gesetzt? Wie kann es markiert werden, damit es korrekt gepusht werden kann? Wo ist das Douyin-Tag gesetzt? Wie kann es markiert werden, damit es korrekt gepusht werden kann? Mar 27, 2024 am 11:01 AM

Als eine der beliebtesten Kurzvideoplattformen der Welt ermöglicht Douyin jedem, zum Schöpfer zu werden und jeden Moment im Leben zu teilen. Für Douyin-Benutzer sind Tags eine sehr wichtige Funktion. Sie können Benutzern helfen, Inhalte besser zu klassifizieren und abzurufen, und ermöglichen es der Plattform außerdem, geeignete Inhalte genauer an Benutzer weiterzuleiten. Wo werden also die Douyin-Tags gesetzt? In diesem Artikel wird ausführlich erläutert, wie Sie Tags auf Douyin einrichten und verwenden. 1. Wo wird das Douyin-Tag gesetzt? Die Verwendung von Tags auf Douyin kann Benutzern helfen, ihre Werke besser zu klassifizieren und zu kennzeichnen, sodass andere Benutzer sie leichter finden und ihnen folgen können. Die Methode zum Festlegen des Etiketts ist wie folgt: 1. Öffnen Sie die Douyin-App und melden Sie sich bei Ihrem Konto an. 2. Klicken Sie auf das „+“-Zeichen am unteren Bildschirmrand und wählen Sie die Schaltfläche „Veröffentlichen“. 3.

So setzen Sie das Wasserzeichen in der Mitte auf Weibo_So setzen Sie das Wasserzeichen in der Mitte auf Weibo So setzen Sie das Wasserzeichen in der Mitte auf Weibo_So setzen Sie das Wasserzeichen in der Mitte auf Weibo Mar 29, 2024 pm 03:31 PM

1. Geben Sie zunächst Weibo ein, klicken Sie dann unten rechts auf „Ich“ und wählen Sie „Kundenservice“. 2. Geben Sie dann [Wasserzeichen] in das Suchfeld ein und wählen Sie [Weibo-Bildwasserzeichen festlegen]. 3. Klicken Sie dann in der Benutzeroberfläche auf [Link]. 4. Klicken Sie dann im neu geöffneten Fenster auf [Einstellungen für Bildwasserzeichen]. 5. Aktivieren Sie abschließend [Picture Center] und klicken Sie auf [Speichern].

See all articles