<p>Nous allons d&eacute;couvrir ici comment ajouter des valeurs dans le local storage, comment les r&eacute;cuprer, ou les supprimer.</p>
<p>&nbsp;</p>
<blockquote>
<h3>Sommaire</h3>
<ul>
<li><a href="#stock">Stocker des donn&eacute;es</a></li>
<li><a href="#get">R&eacute;cuperer des donn&eacute;es</a></li>
<li><a href="#supp">Supprimer une paire valeur-cl&eacute;</a></li>
<li><a href="#clear">Vider le local storage</a></li>
<li><a href="#get-key">R&eacute;cuperer la cl&eacute; d'une paire</a></li>
<li><a href="#lentgh">Savoir combien d'&eacute;l&eacute;ments sont stock&eacute;s</a></li>
<li><a href="#bugs">R&eacute;soudre les bugs</a></li>
</ul>
</blockquote>
<p>&nbsp;</p>
<h2>Stocker des donn&eacute;es<a id="stock"></a></h2>
<p><span style="background-color: rgb(28 29 49/var(--tw-bg-opacity)); color: rgb(255 255 255/var(--tw-text-opacity)); font-family: var(--source-serif-font); font-size: 1.125rem;">Pour ajouter une donn&eacute;e dans le local storage, on utilise la m&eacute;thode&nbsp;<code>setItem()</code>&nbsp;de&nbsp;<code>localStorage</code>.&nbsp;</span>La syntaxe est la suivante:</p>
<pre class="language-javascript"><code>localStorage.setItem(key, value)</code></pre>
<ul>
<li><code>key</code>&nbsp;est la cl&eacute;, qui repr&eacute;sente le nom associ&eacute; &agrave; la valeur stock&eacute;. C'est comme &ccedil;a qu'on pourra y acc&eacute;der par la suite</li>
<li><code>value</code>&nbsp;est la valeur &agrave; stocker, comme un th&egrave;me ou autre. On doit renseigner ici un&nbsp;<code>string</code></li>
</ul>
<p>Par exemple, pour un th&egrave;me sombre ou clair:</p>
<pre class="language-javascript"><code>localStorage.setItem('ThemeDark', 'true');</code></pre>
<p>&nbsp;</p>
<h2>R&eacute;cuperer des donn&eacute;es<a id="get"></a></h2>
<p>Pour r&eacute;cuperer une valeur stock&eacute;e, on utilise la m&eacute;thode&nbsp;<code>getItem()</code>.&nbsp;<span style="background-color: rgb(28 29 49/var(--tw-bg-opacity)); color: rgb(255 255 255/var(--tw-text-opacity)); font-family: var(--source-serif-font); font-size: 1.125rem;">La syntaxe est la suivante:</span></p>
<pre class="language-javascript"><code>localStorage.getItem(key)</code></pre>
<p>Avec ce code, on cible une cl&eacute; en particulier dont on souhaite r&eacute;cuperer la valeur. La valeur sera rendue sous forme de&nbsp;<code>string</code>. Si on veut r&eacute;cuperer une valeur d'un autre type, comme un bool&eacute;en, dans l'exemple, on doit utiliser&nbsp;<code>JSON.parse()</code>, pour transformer le&nbsp;<code>string&nbsp;</code>en&nbsp;<code>bool</code>.</p>
<pre class="language-javascript"><code>JSON.parse(localStorage.getItem('ThemeDark'))</code></pre>
<p>&nbsp;</p>
<h2>Supprimer une paire valeur-cl&eacute;<a id="supp"></a></h2>
<p>On peut aussi supprimer une donn&eacute;e stock&eacute;e en utilisant la m&eacute;thode&nbsp;<code>removeItem()</code>. Elle prend en param&egrave;tre la cl&eacute; &agrave; supprimer.</p>
<pre class="language-javascript"><code> localStorage.removeItem(key)</code></pre>
<p>De cette fa&ccedil;on, la cl&eacute; ainsi que la valeur qui lui correspond sont supprim&eacute;es du local storage. Avec notre exemple:</p>
<pre class="language-javascript"><code> localStorage.removeItem('ThemeDark')</code></pre>
<p>&nbsp;</p>
<h2>Vider le local storage</h2>
<p>Pour vider le local storage, on utilise la m&eacute;thode&nbsp;<code>clear()</code>. Elle permet de supprimer toutes les paires stock&eacute;es.</p>
<pre class="language-javascript"><code>localStorage.clear()</code></pre>
<p>&nbsp;</p>
<h2>R&eacute;cuperer la cl&eacute; d'une paire<a id="get-key"></a></h2>
<p>On peut utiliser la m&eacute;thode&nbsp;<code>key()</code>&nbsp;pour retrouver la cl&eacute; d'une valeur, &agrave; un index donn&eacute; dans le local storage.</p>
<pre class="language-javascript"><code>localStorage.key(index)</code></pre>
<p>Par exemple, si on veut r&eacute;cuperer le nom de la deuxi&egrave;me cl&eacute;:</p>
<pre class="language-javascript"><code>localStorage.key(1)</code></pre>
<p>&nbsp;</p>
<h2>Savoir combien d'&eacute;l&eacute;ments sont stock&eacute;s<a id="lentgh"></a></h2>
<p>Pour finir, on peut connaitre la taille du local storage avec la m&eacute;thode&nbsp;<code>length()</code>. De cette mani&egrave;re, on obtient le nombre de paires cl&eacute;-valeurs pr&eacute;sentent dans le local storage.</p>
<pre class="language-javascript"><code>localStorage.length()</code></pre>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>Et les bugs ?<a id="bugs"></a></h2>
<p>Vous pourrez peut-&ecirc;tre obtenir ce message d'erreur:&nbsp;<code><span style="color: #e03e2d;">ReferenceError: localStorage is not defined</span></code>. Pour le r&eacute;gler, rien de plus simple, v&eacute;rifier avec une condition si&nbsp;<code>window&nbsp;</code>est bien d&eacute;finie.</p>
<pre class="language-javascript"><code>if (typeof window !== "undefined") {
  value = localStorage.getItem(key)
}</code></pre>
<p>De plus, si vous voulez r&eacute;cup&eacute;rer une valeur, je vous conseille vivement d'utiliser un useEffect, pour &ecirc;tre s&ucirc;r que la m&eacute;thode s'&eacute;x&eacute;cute au bon moment.</p>
<p>&nbsp;</p>
<blockquote>
<p>Il est donc tr&egrave;s simple d'utiliser le local storage avec React ou Next. Vous pouvez l'impl&eacute;menter dans un React Context, pour mettre en place un syst&egrave;me de th&egrave;mes par exemple, comme on le fait&nbsp;<a href="../blog/mettre-en-place-des-themes-en-scss-avec-nextjs-ou-react-et-les-contextes">ici</a>.</p>
</blockquote>

CreaDev

Utiliser le localStorage dans une application NextJs ou React