LocalStorage et SessionStorage en JavaScript
Dans le domaine du développement web, stocker les données de manière efficace et sécurisée côté client est primordial. JavaScript met à disposition deux outils puissants, LocalStorage et SessionStorage, à cette fin. Cet article explore en profondeur ces technologies, en proposant des exemples de code pratiques et des conseils d'experts pour permettre aux développeurs de tirer le meilleur parti de ces fonctionnalités.
WARNING
Ne stockez jamais d'informations sensibles ou de données personnelles dans localStorage ou sessionStorage sans les chiffrer !
Comprendre LocalStorage en JavaScript
LocalStorage vous permet de stocker des données de manière persistante sur le navigateur de l'utilisateur, sans date d'expiration. Cela signifie que les données stockées dans LocalStorage resteront disponibles même après la fermeture et la réouverture de la fenêtre du navigateur.
Comment utiliser LocalStorage
Voici un exemple simple pour montrer comment stocker des données dans LocalStorage. Vous pouvez définir n'importe quelle paire clé/valeur via la méthode setItem, et lire n'importe quelle valeur par sa clé en utilisant la méthode getItem. Il existe également la méthode removeItem pour supprimer une paire par sa clé. L'API propose aussi clear() pour supprimer tous les éléments, key(index) pour accéder aux éléments par index, length pour compter les éléments stockés, et un écouteur d'événement storage pour détecter les changements entre les onglets.
note
Les opérations LocalStorage sont synchrones et s'exécutent sur le thread principal, ce qui peut bloquer le rendu de l'interface utilisateur lors de grandes opérations de données.
Application pratique : Création d'un commutateur de thème utilisant LocalStorage
Imaginez un scénario où vous souhaitez enregistrer le thème préféré de l'utilisateur (clair ou sombre) afin qu'il persiste d'une session à l'autre.
L'exemple suivant combine HTML, CSS et JavaScript dans un seul bloc pour plus de simplicité.
<style>
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
.dark {
--bg-color: #333333;
--text-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.5s, color 0.5s;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
<body>
<button onclick="toggleTheme()">Toggle Theme</button>
<script>
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
function toggleTheme() {
var currentTheme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
if (currentTheme === 'light') {
setTheme('dark');
} else {
setTheme('light');
}
}
function loadTheme() {
var theme = localStorage.getItem('theme') || 'light';
setTheme(theme);
}
// Initial theme load
loadTheme();
</script>
</body>Ce script vérifie la présence d'un thème stocké dans LocalStorage ou utilise par défaut le thème 'light'. Il applique ensuite le thème en définissant le nom de classe de l'élément racine HTML, permettant ainsi au CSS d'ajuster les styles en conséquence.
SessionStorage : Stockage temporaire de données en JavaScript
Alors que LocalStorage est conçu pour stocker des données sans expiration, SessionStorage offre un moyen de stocker des données pour la durée de la session de la page. Les données stockées dans SessionStorage sont effacées lorsque la session de la page se termine, c'est-à-dire lorsque l'onglet ou la fenêtre est fermé.
Comment utiliser SessionStorage
Ci-dessous se trouve un exemple basique d'utilisation de SessionStorage. Comme vous pouvez le voir, les méthodes et la syntaxe sont assez similaires à celles de localStorage. La différence réside dans le mode d'expiration, comme expliqué ci-dessus.
Exemple : Utilisation de SessionStorage dans une fonctionnalité de sauvegarde automatique de données de formulaire
Imaginez que vous ayez un formulaire qu'un utilisateur pourrait remplir, mais qu'il existe un risque qu'il ferme accidentellement son navigateur. Vous pouvez utiliser SessionStorage pour sauvegarder temporairement les données du formulaire.
<body>
<div>Start writing an email address in the following input. Refresh the page in the middle of your typing, and you'll see that the page remembers what you entered before.</div>
<br />
<input type="email" id="email"/>
</body>
<script>
window.onload = function() {
const email = sessionStorage.getItem('email');
if (email) {
alert('email found from session storage: ' + email);
document.getElementById('email').value = email;
}
document.getElementById('email').oninput = function() {
sessionStorage.setItem('email', this.value);
};
};
</script>Ce code charge automatiquement tout email sauvegardé lors du chargement de la page et met à jour l'élément SessionStorage chaque fois que le champ email change. Pour le tester, cliquez sur le bouton « essayez-le vous-même », saisissez quelque chose dans le champ de saisie, puis actualisez la page. La valeur y restera après l'actualisation.
INFO
Tenez toujours compte des limites de taille avant de stocker des données (généralement 5 Mo pour LocalStorage et SessionStorage).
Conclusion
LocalStorage et SessionStorage offrent des options puissantes pour améliorer l'expérience utilisateur en gérant efficacement les données dans les applications web. En comprenant leurs capacités et leurs limites, les développeurs peuvent prendre des décisions éclairées sur la meilleure façon d'utiliser ces outils dans leurs projets.
Pratique
Parmi les affirmations suivantes, lesquelles sont vraies concernant localStorage et sessionStorage en JavaScript ?