La différence entre le stockage local, le stockage de session et les cookies en JavaScript

JavaScript fournit trois mécanismes de stockage des données côté client : cookies, stockage de session et stockage local. Chaque mécanisme présente des avantages et des inconvénients.

Local Storage est le dernier mécanisme. Il permet de stocker de grandes quantités de données, mais les données ne sont pas supprimées à la fermeture du navigateur. Le stockage local est utile pour stocker les données auxquelles les utilisateurs doivent accéder ultérieurement, telles que les données hors ligne.

Stockage de sessionSemblable aux cookies, mais les données ne sont stockées que pour la session en cours. Cela signifie que les données seront supprimées lorsque l'utilisateur fermera le navigateur. Le stockage de session est utile pour stocker des données sensibles telles que les informations de connexion.

Cookie est le mécanisme le plus ancien et le plus célèbre. Ils sont simples à utiliser et bien pris en charge par les navigateurs. Cependant, ils sont limités à 4 Ko de données et sont souvent utilisés pour stocker des données non sensibles telles que les préférences des utilisateurs.

Dans ce tutoriel, nous aborderons chacun d'eux en détail.

Stockage local

De nos jours, la plupart des applications Web nécessitent un certain type de saisie de l'utilisateur, qu'il s'agisse d'un nom d'utilisateur, d'une adresse de livraison ou même simplement d'un paramètre de préférence. Cette entrée est ensuite généralement envoyée à un serveur quelque part pour être traitée et stockée. Mais que se passe-t-il si votre application nécessite que les données soient stockées localement sur l'ordinateur de l'utilisateur ? C'est là qu'intervient le stockage local.

Le stockage local est un type de stockage Web qui permet à JavaScript de stocker et d'accéder aux données directement dans le navigateur. Ceci est particulièrement utile pour stocker des données que vous souhaitez conserver même si l'utilisateur ferme le navigateur, comme les préférences ou les paramètres.

Les données dans le stockage local sont stockées dans des paires clé/valeur. La clé est comme le nom des données et la valeur est comme les données elles-mêmes. Vous pouvez le considérer comme une variable en JavaScript. Pour stocker des données dans un stockage local, vous devez d'abord créer une clé. Vous pouvez ensuite stocker toutes les données de votre choix sous cette clé.

Pour créer une clé, utilisez la méthode setItem(). Cette méthode prend deux paramètres, le premier est la clé et le second est la valeur à stocker.

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

Maintenant que vous avez la clé, vous pouvez stocker toutes les données de votre choix sous cette clé. Les données que vous stockez peuvent être n'importe quel type de données pris en charge par JavaScript, notamment des chaînes, des nombres, des objets et des tableaux.

Pour stocker des données, utilisez à nouveau la méthode setItem(). Cette fois, vous transmettez la clé comme premier paramètre et les données à stocker comme deuxième paramètre.

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

Pour récupérer des données du stockage local, utilisez la méthode getItem(). Cette méthode prend une clé comme paramètre et renvoie les données stockées sous cette clé.

localStorage.getItem('key');

Si vous souhaitez supprimer un élément du stockage local, utilisez la méthode removeItem(). Cette méthode prend une clé comme paramètre et supprime les données stockées sous cette clé.

localStorage.removeItem('key');

Session Storage

Session Storage est un type de stockage Web qui permet aux applications Web de stocker des données localement dans le navigateur de l'utilisateur. Contrairement aux cookies, les données stockées dans le stockage de session sont spécifiques au site qui les a créées et ne sont pas partagées avec d'autres sites.

Session Storage est une nouvelle fonctionnalité introduite dans HTML5 qui vous permet de stocker des données localement dans le navigateur de l'utilisateur. Contrairement aux cookies, les données stockées dans le stockage de session sont spécifiques au site qui les a créées et ne sont pas partagées avec d'autres sites.

Le stockage de session est un moyen de stocker des données côté client d'une application. C'est semblable à Stockage local, mais avec quelques différences clés -

• Les données de stockage de session ne sont disponibles que pour le site qui les a créées.

Les données de stockage de session ne sont pas partagées avec d'autres sites.

• Les données de stockage de session ne sont pas persistantes, ce qui signifie qu'elles ne sont disponibles que pendant la session utilisateur.

• Les données de stockage de session sont spécifiques à l'onglet du navigateur qui les a créées.

Le stockage de session est un excellent moyen d'améliorer les performances de vos applications Web en réduisant la quantité de données qui doivent être transférées entre le client et le serveur. Il peut également être utilisé pour stocker des données de manière plus sécurisée, car les données ne sont pas stockées dans des cookies accessibles par des sites Web tiers.

Pour utiliser le stockage de session dans une application Web, vous devez utiliser l'objet sessionStorage. Cet objet donne accès au stockage de la session en cours.

L'objet sessionStorage a deux méthodes

setItem() - Cette méthode définit un stockage de session par paire clé/valeur.

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

getItem() - Cette méthode récupère la valeur de la clé du stockage de session. L'objet

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

sessionStorage a d'autres propriétés -

• length - Cette propriété renvoie le nombre de paires clé/valeur dans le stockage de session.

• key() - Cette méthode accepte un index comme paramètre et renvoie la clé à cet index dans le magasin de session

Le stockage de session est idéal pour améliorer les performances des applications Web et stocker les données de manière plus sécurisée méthode.

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。

以下代码读取“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 的数据，并且通常用于存储不敏感的数据，例如用户首选项。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!