Der Unterschied zwischen lokalem Speicher, Sitzungsspeicher und Cookies in JavaScript

JavaScript bietet drei Mechanismen zum Speichern von Daten auf der Clientseite – Cookies, Sitzungsspeicher und lokaler Speicher. Jeder Mechanismus hat Vor- und Nachteile.

Lokaler Speicher ist der neueste Mechanismus. Es ermöglicht die Speicherung großer Datenmengen, die Daten werden jedoch beim Schließen des Browsers nicht gelöscht. Lokaler Speicher eignet sich zum Speichern von Daten, auf die Benutzer später zugreifen müssen, beispielsweise Offline-Daten.

SitzungsspeicherungÄhnlich wie Cookies, aber die Daten werden nur für die aktuelle Sitzung gespeichert. Das bedeutet, dass die Daten gelöscht werden, wenn der Nutzer den Browser schließt. Die Sitzungsspeicherung eignet sich zum Speichern vertraulicher Daten wie Anmeldeinformationen.

Cookie ist der älteste und bekannteste Mechanismus. Sie sind einfach zu verwenden und werden von Browsern gut unterstützt. Sie sind jedoch auf 4 KB Daten begrenzt und werden häufig zum Speichern unempfindlicher Daten wie Benutzereinstellungen verwendet.

In diesem Tutorial werden wir jeden einzelnen davon im Detail behandeln.

Lokaler Speicher

Die meisten Webanwendungen erfordern heutzutage irgendeine Art von Benutzereingabe, sei es ein Benutzername, eine Lieferadresse oder auch nur eine Einstellung. Diese Eingabe wird dann normalerweise zur Verarbeitung und Speicherung an einen Server gesendet. Was aber, wenn Ihre Anwendung erfordert, dass Daten lokal auf dem Computer des Benutzers gespeichert werden? Hier kommt der lokale Speicher ins Spiel.

Lokaler Speicher ist eine Art Webspeicher, der es JavaScript ermöglicht, Daten direkt im Browser zu speichern und darauf zuzugreifen. Dies ist besonders nützlich zum Speichern von Daten, die Sie behalten möchten, auch wenn der Benutzer den Browser schließt, wie z. B. Präferenzen oder Einstellungen.

Daten im lokalen Speicher werden in Schlüssel/Wert-Paaren gespeichert. Der Schlüssel ist wie der Name der Daten und der Wert ist wie die eigentlichen Daten selbst. Sie können es sich als Variable in JavaScript vorstellen. Um Daten im lokalen Speicher zu speichern, müssen Sie zunächst einen Schlüssel erstellen. Unter diesem Schlüssel können Sie dann beliebige Daten speichern.

Um einen Schlüssel zu erstellen, verwenden Sie die Methode setItem(). Diese Methode benötigt zwei Parameter: Der erste ist der Schlüssel und der zweite der zu speichernde Wert.

localStorage.setItem('key', 'value');

Jetzt, da Sie den Schlüssel haben, können Sie alle gewünschten Daten unter diesem Schlüssel speichern. Die von Ihnen gespeicherten Daten können alle von JavaScript unterstützten Datentypen sein, einschließlich Zeichenfolgen, Zahlen, Objekte und Arrays.

Um Daten zu speichern, verwenden Sie erneut die Methode setItem(). Diesmal übergeben Sie den Schlüssel als ersten Parameter und die zu speichernden Daten als zweiten Parameter.

localStorage.setItem('key', 'value');

Um Daten aus dem lokalen Speicher abzurufen, verwenden Sie die Methode getItem(). Diese Methode verwendet einen Schlüssel als Parameter und gibt die unter diesem Schlüssel gespeicherten Daten zurück.

localStorage.getItem('key');

Wenn Sie ein Element aus dem lokalen Speicher entfernen möchten, verwenden Sie die Methode removeItem(). Diese Methode verwendet einen Schlüssel als Parameter und löscht die unter diesem Schlüssel gespeicherten Daten.

localStorage.removeItem('key');

Session Storage

Session Storage ist eine Art Webspeicher, der es Webanwendungen ermöglicht, Daten lokal im Browser des Benutzers zu speichern. Im Gegensatz zu Cookies sind die im Sitzungsspeicher gespeicherten Daten spezifisch für die Website, die sie erstellt hat, und die Daten werden nicht an andere Websites weitergegeben.

Session Storage ist eine neue Funktion, die in HTML5 eingeführt wurde und es Ihnen ermöglicht, Daten lokal im Browser des Benutzers zu speichern. Im Gegensatz zu Cookies sind die im Sitzungsspeicher gespeicherten Daten spezifisch für die Website, die sie erstellt hat, und die Daten werden nicht an andere Websites weitergegeben.

Sitzungsspeicher ist eine Möglichkeit, Daten auf der Clientseite einer Anwendung zu speichern. Es ist ähnlich Lokaler Speicher, jedoch mit einigen wesentlichen Unterschieden –

• Sitzungsspeicherdaten sind nur für die Site verfügbar, die sie erstellt hat.

< li>

Sitzungsspeicherdaten werden nicht mit anderen Websites geteilt.

• Sitzungsspeicherdaten sind nicht persistent, d. h. sie sind nur während der Benutzersitzung verfügbar.

• Sitzungsspeicherdaten sind spezifisch für die Browser-Registerkarte, die sie erstellt hat.

Sitzungsspeicher ist eine großartige Möglichkeit, die Leistung Ihrer Webanwendungen zu verbessern, indem die Datenmenge reduziert wird, die zwischen Client und Server übertragen werden muss. Es kann auch verwendet werden, um Daten sicherer zu speichern, da die Daten nicht in Cookies gespeichert werden, auf die Websites Dritter zugreifen können.

Um den Sitzungsspeicher in einer Webanwendung zu verwenden, müssen Sie das sessionStorage-Objekt verwenden. Dieses Objekt bietet Zugriff auf den aktuellen Sitzungsspeicher.

sessionStorage-Objekt verfügt über zwei Methoden

setItem() – Diese Methode legt einen Schlüssel/Wert-Paar-Sitzungsspeicher fest.

sessionStorage.setItem("name", "tutorialsPoint");

getItem() – Diese Methode ruft den Wert des Schlüssels aus dem Sitzungsspeicher ab. Das

var name = sessionStorage.getItem("name");

sessionStorage-Objekt hat einige andere Eigenschaften –

• length – Diese Eigenschaft gibt die Anzahl der Schlüssel/Wert-Paare im Sitzungsspeicher zurück.

• key() – Diese Methode akzeptiert einen Index als Parameter und gibt den Schlüssel an diesem Index im Sitzungsspeicher zurück.

Sitzungsspeicher eignet sich gut zur Verbesserung der Leistung von Webanwendungen und zur sichereren Speicherung von Daten Verfahren.

Cookie

Cookie 是存储在用户计算机上的一小段数据。 Cookie 用于存储有关用户的信息，例如用户的姓名、密码和偏好设置。

Cookie 是使用 document.cookie 属性创建的。此属性用于设置、获取和删除 Cookie。

设置 Cookie

使用 setItem() 方法设置 Cookie。该方法接受两个参数，cookie的名称和cookie的值。

cookie的名称用于标识cookie，值是要存储在cookie中的信息。 cookie。

以下代码设置一个名为“name”和值“tutorialsPoint”的 cookie。

document.cookie = "name=tutorialsPoint";

读取 Cookie

使用 getItem() 方法读取 Cookie。此方法接受 cookie 的名称作为参数并返回 cookie 的值。

如果 cookie 不存在，getItem() 方法将返回 null。< /p>

以下代码读取“name”cookie 并将值存储在“user”变量中。

var user = document.cookie.getItem("name");

与本地存储和会话存储相比，cookie 的一个优点是它们可以设置为在特定时间过期，这使得它们成为存储不应长期保留的数据（例如会话 ID）的不错选择。

本地存储、会话存储和 Cookie 之间的区别

下表突出显示了本地存储、会话存储和 Cookie 之间的主要区别 -

本地存储	会话存储	Cookie
允许存储10MB的数据。	允许存储5MB的数据。	存储容量限制为4KB数据。
关闭浏览器时不会删除存储的数据。	存储数据仅用于会话并会在浏览器关闭时被删除。	数据可以设置为在某个时间过期。
本地存储对于存储用户稍后需要访问的数据，例如离线数据。	会话存储是提高 Web 应用程序性能的好方法。	Cookie 是一个不错的选择用于存储不应该长时间保留的数据，例如会话 ID。
这对于存储即使用户关闭也希望保留的数据特别有用浏览器，例如首选项或设置。	会话存储对于存储敏感数据（例如登录凭据）非常有用。	Cookie 通常用于存储不敏感的数据，例如用户偏好
本地存储是HTML5中引入的新功能	会话存储是HTML5中引入的新功能HTML5	Cookie 是最古老的 (HTML4) 和最著名的机制。
数据是不随客户端请求发送到服务器。	数据不随客户端请求发送到服务器	数据随客户端请求发送到服务器
数据存储在浏览器和系统上。	数据仅存储在浏览器上。	数据仅存储在浏览器上。

结论

在本教程中，我们讨论了本地存储、会话存储之间的区别和饼干。我们已经看到了从该存储中存储和检索数据的不同方法。 本地存储是最新的机制。它允许存储更大量（10MB）的数据，但关闭浏览器时数据不会被删除。 会话存储与cookie类似，但仅存储当前会话的数据。这意味着当用户关闭浏览器时数据将被删除。 Cookie 是最古老、最著名的机制。它们使用简单并且受到浏览器的良好支持。但是，它们仅限于 4KB 的数据，并且通常用于存储不敏感的数据，例如用户首选项。

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen lokalem Speicher, Sitzungsspeicher und Cookies in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!