LocalStorage VS SessionStorage VS Cookie

Application

Comme vous pouvez le constater, la principale différence par rapport au tableau ci-dessus. Voici l'application de chaque type de stockage :

1. LocalStorage - Généralement, les données n'expirent jamais et doivent stocker des données non sensibles telles que les préférences de l'utilisateur, l'état de l'application, etc.
2. SessionStorage - Les données sont privées dans l'onglet et expirent dès que vous fermez la fenêtre ou l'onglet. Convient pour stocker des données temporaires qui ne doivent persister que pendant qu'un utilisateur navigue dans un seul onglet (par exemple, les données du formulaire avant la soumission).
3. Cookie - La capacité de stockage est très inférieure et les données peuvent être requises par le serveur comme le jeton d'authentification ou les préférences de l'utilisateur.

Syntaxe

Un biscuit ?

// below snippet will set username as key ?
// Johndoe as value ?
// will set expiry date for the cookie which is 31 Dec 2024
// path (cookie available to entire website)
// if no path specified then cookie will be available to that particular site which created that cookie
// you can delete the cookie by setting? the date that already expired (any previous date)
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

lecture des cookies

console.log(document.cookie) // Outputs all cookies? as a string

Stockage de session ?

sessionStorage.setItem('sessionData', 'temporaryValue');
let sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData); // Outputs: temporaryValue

suppression et nettoyage

sessionStorage.removeItem('sessionData'); // it will only remove particular key
sessionStorage.clear(); // clean the whole storage

Stockage local ?

Le type de stockage le plus courant et toutes les fonctions sont similaires au type de session.

//set item
localStorage.setItem('username', 'JohnDoe');
// get itme
let username = localStorage.getItem('username');
console.log(username); // Outputs: JohnDoe
// remove item with key-value
localStorage.removeItem('username');
// reset store
localStorage.clear();

LinkedIn ? ❤

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!