Saviez-vous qu'il est possible de stocker des données dans le navigateur à l'aide de JavaScript ?

Il existe les cookies pour garder des données au chaud afin de les réutiliser plus tard, mais aussi le Web Storage afin de stocker des données localement.

Dans cet article, nous parlerons de la propriété localStorage. Il existe une autre propriété similaire : sessionStorage, mais cette solution supprime les données dès que le navigateur est fermé. La première solution, elle, ne possède pas de délai d'expiration.

L'avantage ? Le poids des données ! Seulement quelques Ko pour un cookie contre quelques Mo pour le navigateur. Quand je dis quelques Mo, il faut bien prendre en compte que vous avez le droit à 5 Mo de données par domaine et que celui-ci ne prend en charge que des chaînes de caractères.

Il est tout à fait possible que le navigateur du visiteur lui demande une autorisation avant de stocker les données.

Utilisation

setItem(key, value)

La méthode setItem(key, value) permet d'enregistrer une donnée.
Le premier élément est la clé, soit un nom de référence associé à la valeur qui sera fournie. Le nom est totalement libre, mais doit être unique sous peine d'écraser l'ancienne valeur associée à celui-ci si une référence portant le même nom existe. En gros, c'est le même principe qu'une variable.

localStorage.setItem('firstname', 'John');

getItem(key)

La méthode getItem() permet d'extraire une donnée.

let prenom = localStorage.getItem('firstname');
console.log(prenom); // Résultat : John

removeItem(key)

La méthode removeItem() permet de supprimer une donnée.

localStorage.removeItem('firstname');

Les données effacées ne sont pas récupérables et aucun avertissement ne sera fait par le navigateur.

key(index)

La méthode key(index) permet d'extraire une donnée selon son index et non le nom de la clé.

let prenom = localStorage.key(0);
console.log(prenom); // Résultat : John

clear()

La méthode clear() permet de supprimer toutes les données.

localStorage.clear();

Les données effacées ne sont pas récupérables et aucun avertissement ne sera fait par le navigateur.

Enregistrer du JSON

Pour rappel, localStorage peut seulement stocker des chaînes de caractères. Si vous travaillez avec du JSON, il faudra convertir l'ensemble avec JSON.stringify() avant de l'enregistrer, et lire avec JSON.parse() après récupération des données.

Stocker

let user  = {
  firstname : 'John',
  lastname : 'Doe'
};

let userJson = JSON.stringify(user);
sessionStorage.setItem('user', userJson);

Lire

let userJson = sessionStorage.getItem('user');
let user = JSON.parse(userJson);
console.log(user);

Compatibilité

La plupart des navigateurs modernes prennent en charge localStorage et sessionStorage. Rien ne vous empêche d'effectuer une vérification avant d'enregistrer afin d'éviter une erreur.

if (typeof localStorage != 'undefined') {
  // localStorage est disponible
}
else {
  // localStorage est indisponible
}

Avertissement !

Les données ne sont pas chiffrées !
Ne stockez pas des données sensibles comme un mot de passe, par exemple.