Ads by ProfitSence
Close

Utilisation du Local Storage avec JavaScript

Last Updated on jeudi 6 oct. 2022

LocalStorage

Local Storage in the Browser

  • Le stockage local est intégré directement dans le navigateur Web, et il existe en tant que propriété sur l’objet window, l’objet global du navigateur.
  • Les données dans le stockage local du navigateur durent entre les visites du site et même après la fermeture du navigateur.

Utilisations courantes pour Local Storage.

  • Enregistrez les recherches les plus récentes que l’utilisateur a effectuées sur votre site. Ensuite, vous pouvez utiliser ces données sur d’autres pages.
  • Enregistrez toutes les données de saisie de formulaire non sécurisées au fur et à mesure que l’utilisateur les saisit, donc si l’utilisateur s’éloigne du formulaire et revient, il n’a pas besoin de recommencer.
  • Enregistrez une liste de noms de connexion qui ont été utilisés dans le passé pour empêcher l’utilisateur de taper.
  • Le stockage local vous permet d’enregistrer les préférences de l’utilisateur sans avoir à les réinitialiser chaque fois qu’il rouvre l’application.

Gardez à l’esprit lors de l’utilisation local storage.

  • Le stockage local n’est pas un moyen sécurisé de stocker des informations. Il n’est pas sûr de stocker des informations sensibles telles que des mots de passe non cryptés, des numéros de sécurité sociale, des dates de naissance ou des numéros de carte de crédit.
  • Le stockage local stocke uniquement les données de chaîne. Par exemple, vous ne pouvez pas stocker de fichiers binaires comme un fichier JPEG ou un film.
  • Lorsqu’une page se charge, les navigateurs chargent les données dans le stockage local de manière synchrone. S’il y a beaucoup de données à stocker, vos utilisateurs peuvent rencontrer un retard pendant cette période.
  • Le stockage local est un grand atout pour améliorer la convivialité de votre site.

javascript localstorage

Accéder au LocalStorage avec la propriété localStorage

Vous pouvez stocker, récupérer et supprimer des données à l’aide de méthodes de stockage local telles que setItem, getItem et removeItem.

  • La propriété localStorage permet d’accéder à l’objet de stockage du navigateur pour stocker, mettre à jour et supprimer des données entre les sessions du navigateur.
  • Nous pouvons accéder au stockage local avec le mot-clé localStorage, qui représente un objet Storage où les données du navigateur sont stockées sous forme de paires clé/valeur.
			
					Storage {
  keyName : keyValue;
}

			
	
  • Si vous devez stocker d’autres types de données tels que des objets ou des tableaux dans un stockage local, vous devez les convertir en chaîne à l’aide de JSON.Stringify().

Store Items in Local Storage with setItem

  • Le stockage local peut être défini, récupéré et supprimé avec ses propres méthodes intégrées.
  • setItem(), qui définit une propriété sur l’objet de stockage local. Il faut deux paramètres, la clé et la valeur de l’élément que vous souhaitez créer.
			
					localStorage.setItem('keyName', 'keyValue');

			
	

Récupérer une valeur à partir de Local Storage avec getItem

  • La méthode getItem() accepte un paramètre, un nom de clé dans le localStorage, et renvoie la value/key.
			
					localStorage.getItem('keyName');

			
	

Supprimer un élément dans Local Storage avec removeItem

  • La méthode removeItem() supprime un élément donné de l’objet localStorage.
  • Il accepte un paramètre, un nom de clé, et il supprime cette clé de l’objet si elle existe.
			
					removeItem('itemName');

			
	

Stocker les recherches récentes dans le LocalStorage Exemple

  • Récupère les éléments de recherche du stockage local et renvoie un tableau contenant chaque élément.
			
					function getRecentSearches() {
  const searches = localStorage.getItem('recentSearches');
  if (searches) {
    return JSON.parse(searches);
  }
  return [];
}

			
	

localstorage javascript

			
					searchForm.addEventListener('submit', () => {
  const searches = getRecentSearches();
  const searchString = searchBar.value;

  searches.push(searchString);
  // Set local storage item
  localStorage.setItem('recentSearches', JSON.stringify(searches));
  createItem(searchString);
});

			
	

Références

LocalStorage