Daten in eine Datei schreiben in JavaScript
- Speichern Sie Daten auf der Client-Seite mit der HTML 5 Web Storage API
- Löschen Sie Webspeicherdaten für den lokalen Speicher
Die HTML5-Webspeicher-API ermöglicht es uns, Daten lokal auf der Clientseite zu speichern. Beachten Sie, dass auf der Client-Seite nur eine kleine Datenmenge lokal gespeichert werden kann und die maximale Größe kleiner oder gleich 5 MB sein sollte.
Die Daten werden zu keinem Zeitpunkt an den Server weitergeleitet oder zurückgesendet, wenn Sie die Webspeicher-API verwenden. Es wird immer lokal in einer Datei verfügbar sein.
Speichern Sie Daten auf der Client-Seite mit der HTML 5 Web Storage API
Im Allgemeinen gibt es zwei Arten von HTML-Webspeicherobjekten zum Speichern von Daten auf der Clientseite.
- Lokaler Speicher (
window.localStorage)
Im Local Storage stehen die Daten auch nach dem Schließen des Browserfensters jederzeit zur Verfügung. Dieser Typ ist nicht anwendbar, wenn der Benutzer die Webseite im Inkognito-Modus (privates Surfen) anzeigt. In diesem Fall werden die Daten kurz nach dem Schließen des letzten privaten Fensters gelöscht.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="company_name"></div>
<script>
localStorage.setItem('company', 'Google');
const storedValue = localStorage.getItem('company');
let company_name = document.getElementById("company_name");
company_name.innerHTML = storedValue;
</script>
</body>
</html>
Zuerst haben wir ein leeres div-Element mit einer id von company_name. In diesem div-Element zeigen wir den Wert an, den wir im lokalen Speicher speichern.
Um einen beliebigen Wert in den localStorage einzufügen, müssen wir den Wert in Form eines Schlüssel-Wert-Paares übergeben. Sie können diesen Vorgang mit der Methode setItem durchführen, die vom lokalen Speicher bereitgestellt wird. In diesem Fall ist Unternehmen der Schlüssel und Google der Wert. Die Methode setItem gibt nichts zurück; Es wird nur den Wert im lokalen Speicher speichern.
Um den Wert zurückzubekommen, stellt uns der lokale Speicher die Methode getItem() zur Verfügung, die den Schlüssel des Werts, den Sie erhalten möchten, als Argument verwendet. Dann speichern wir die Ergebnisse in der Variablen namens storedValue. An dieser Stelle haben wir den Wert Google im storedValue, und das einzige, was wir tun müssen, ist diesen Wert im div-Tag anzuzeigen.
Dazu müssen wir zunächst das Element div mit Hilfe seines Attributs id mit der Methode document.getElementById abrufen und dieses HTML-Element in einer neuen Variablen namens company_name speichern.
Schließlich fügen wir den in der Variable storedValue vorhandenen Wert mit Hilfe der Eigenschaft innerHTML als company_name.innerHTML = savedValue zum Element div hinzu.
- Sitzungsspeicher (
window.sessionStorage)
Wenn Sie den Sitzungsspeicher zum Speichern der Daten verwenden, stehen die Daten bis zum Öffnen des Browser-Tabs zur Verfügung und werden gelöscht, wenn die Seitensitzung beendet ist.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="company_name"></div>
<script>
sessionStorage.setItem('company', 'Google');
const storedValue = sessionStorage.getItem('company');
let company_name = document.getElementById("company_name");
company_name.innerHTML = storedValue;
</script>
</body>
</html>
Der Code gleicht hier ganz dem von Local Storage. Der einzige Unterschied besteht darin, dass wir anstelle von localStorage sessionStorage verwendet haben. Zunächst wird der Wert Google im sessionStorage gespeichert. Auf diesen Wert kann später einfach zugegriffen werden, indem einfach der dem Wert zugeordnete Schlüssel an die Methode getItem() übergeben wird. Dann speichern wir diesen Wert in der Variablen storedValue. Am Ende fügen wir diesen Wert zu div hinzu, wodurch der Wert auf dem Bildschirm angezeigt wird.
Alle modernen Browser unterstützen diese beiden Typen.
Löschen Sie Webspeicherdaten für den lokalen Speicher
Wie wir bereits gesehen haben, löscht der Sitzungsspeicher alle Daten, sobald der Browser-Tab oder der gesamte Browser geschlossen wird. Was aber, wenn Sie aus Sicherheitsgründen oder aus persönlichen Gründen auch die lokalen Daten löschen möchten? Es gibt auch eine Möglichkeit, dies zu tun.
Hier gibt es zwei Fälle:
- Wenn Sie einen bestimmten Wert aus dem lokalen Speicher löschen möchten, können Sie die folgende Methode verwenden. Bei der Methode
removemüssen wir denkeyfür den Wert übergeben, den Sie löschen möchten.localStorage.remove('key') - Wenn Sie den gesamten lokalen Speicher löschen möchten, können Sie dies mit dieser Methode tun.
localStorage.clear()
Beide Methoden werden ausgeführt, wenn der Browser-Tab oder der Browser selbst geschlossen wird.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn