<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>

Utiliser le localStorage dans une application NextJs ou React

Mettre en place des thèmes en SCSS avec NextJs ou React et les contextes

<h2>Pourquoi mettre en place un loader ?</h2>
<p>La mise en place d'un loader permet &agrave; l'utilisateur de savoir ce qu'il se passe sur le site. En effet, il serait dommage qu'il ne se passe rien sur notre page... Le loader permet de communiquer avec l'utilisateur, de lui montrer que nous avons bien re&ccedil;u sa requ&ecirc;te.</p>
<p>&nbsp;</p>
<h2>Pr&eacute;requis</h2>
<p>La mise en place de ce loader se fera dans le&nbsp;<em>Layout</em>&nbsp;de votre site internet NextJS. Il faut donc bien avoir cr&eacute;&eacute; un fichier&nbsp;<code>Layout.js</code>&nbsp;(ou un nom &eacute;quivalant) qui reprendra la base de vos pages dans votre projet.</p>
<p>&nbsp;</p>
<h3>Qu'est ce que le Layout ?</h3>
<p>Le layout est un composant qui sera pr&eacute;sent partout sur le site web, son code&nbsp;<em>JSX</em>&nbsp;et CSS sera appliqu&eacute; sur toutes les pages du site.</p>
<p>Typiquement, on met dans le&nbsp;<em>layout</em>&nbsp;la base de chacune de nos pages : les balises&nbsp;<em>head</em>, le style CSS ainsi que les ent&ecirc;tes ou encore les pieds de page.</p>
<p>&nbsp;</p>
<h2>Cr&eacute;ation du loader</h2>
<p>Nous allons faire une fonction qui verifie si l'URL change. Si c'est le cas, on change l'&eacute;tat du&nbsp;<code>useState</code>&nbsp;qui permet d'activer ou non le loader sur&nbsp;<code>true</code>. Dans ce cas, on retourne du code&nbsp;<em>JSX</em>&nbsp;qui s'affichera tant que la nouvelle page n'est pas charg&eacute;e.</p>
<p>Dans le cas suivant, on &eacute;crit simplement un texte de chargement.</p>
<p>1.On commence par &eacute;crire une fonction dans laquelle on appelle le&nbsp;<span style="color: #f1c40f;">router&nbsp;</span>et o&ugrave; on cr&eacute;e l'&eacute;tat du&nbsp;<span style="color: #f1c40f;">loading</span>:</p>
<pre class="language-javascript"><code>function Loading() {
        const router = useRouter();

        const [loading, setLoading] = useState(false);
}</code></pre>
<p>&nbsp;</p>
<p>2.On y ajoute un&nbsp;<code>useEffect</code>&nbsp;qui servira &agrave; v&eacute;rifier si l'URL change.</p>
<pre class="language-javascript"><code>useEffect(() =&gt; {
            const handleStart = (url) =&gt; (url !== router.asPath) &amp;&amp; setLoading(true);
            const handleComplete = (url) =&gt; (url === router.asPath) &amp;&amp; setLoading(false);

            router.events.on('routeChangeStart', handleStart)
            router.events.on('routeChangeComplete', handleComplete)
            router.events.on('routeChangeError', handleComplete)

            return () =&gt; {
                router.events.off('routeChangeStart', handleStart)
                router.events.off('routeChangeComplete', handleComplete)
                router.events.off('routeChangeError', handleComplete)
            }
        })</code></pre>
<p>Quand le changement de page d&eacute;bute, d&eacute;t&eacute;ct&eacute; par <code>router.event.on('routeChangeStart')</code>, on appele la fonction <code>handleStart</code>, qui change la valeur de&nbsp;<span style="color: #f1c40f;">loading&nbsp;</span>sur&nbsp;<span style="color: #169179;">TRUE</span>.<br>Quand il se termine (<code>router.event.on('routeChangeComplete')</code>) ou qu'il &eacute;choue (<code>router.event.on('routeChangeError')</code>,) on appelle la fonction <code>handleComplete</code>, qui change la valeur de&nbsp;<span style="color: #f1c40f;">loading&nbsp;</span>sur&nbsp;<span style="color: #169179;">FALSE</span>.</p>
<p>Ici, <code>handleStart </code>et <code>handleComplete </code>v&eacute;rifient une seconde fois le changement de page, puis changent la valeur de loading</p>
<p>&nbsp;</p>
<p>3.On retourne enfin du JSX.</p>
<pre class="language-javascript"><code>return loading &amp;&amp; (
            &lt;&gt;
                Chargement...
            &lt;/&gt;
);</code></pre>
<p>C'est ce JSX qui est affich&eacute; au changement de la page.</p>
<p>&nbsp;</p>
<h2>Code obtenu</h2>
<pre class="language-javascript"><code>function Loading() {
        const router = useRouter();

        const [loading, setLoading] = useState(false);


        useEffect(() =&gt; {
            const handleStart = (url) =&gt; (url !== router.asPath) &amp;&amp; setLoading(true);
            const handleComplete = (url) =&gt; (url === router.asPath) &amp;&amp; setLoading(false);

            router.events.on('routeChangeStart', handleStart)
            router.events.on('routeChangeComplete', handleComplete)
            router.events.on('routeChangeError', handleComplete)

            return () =&gt; {
                router.events.off('routeChangeStart', handleStart)
                router.events.off('routeChangeComplete', handleComplete)
                router.events.off('routeChangeError', handleComplete)
            }
        })

        return loading &amp;&amp; (
            &lt;&gt;
                Chargement...
            &lt;/&gt;);
    }</code></pre>
<p>Par la suite, nous allons devoir ajouter la balise<span style="color: #f1c40f;">&nbsp;</span><code>&lt;Loading /&gt;</code><span style="color: #f1c40f;">&nbsp;</span>dans le JSX du composant. Celle-ci permet d'appeler la fonction pr&eacute;c&eacute;demment cr&eacute;&eacute;e. Le loader s'affichera donc &agrave; l'endroit exact o&ugrave; vous placerez la balise.</p>
<p>Par exemple -<strong>&nbsp;</strong><em>Layout.js</em>&nbsp;:</p>
<pre class="language-javascript"><code>// Composant
import Loader from "loader.js";

export default function Layout(props) {
    return (
        &lt;&gt;
            // Tous vos composants
            &lt;Loader /&gt;
        &lt;/&gt;
    )
}</code></pre>
<p>&nbsp;</p>
<h2>Ressources</h2>
<ul>
<li><a href="https://uiball.com/loaders/">Liste de loaders simples</a></li>
<li><a href="https://www.npmjs.com/package/react-loader-spinner">Librairie JS de loaders et spinners</a></li>
</ul>

Mettre en place un loader au changement d'une page Nextjs

<h2>Notre extension</h2>
<p>Notre extension consite &agrave; repertorier pleins de sites cools pour nous les devs sous forme de liste, les uns apr&egrave;s les autres.</p>
<p>&nbsp;</p>
<h2>&Ccedil;a va &ecirc;tre plus ou moins comme d'habitude</h2>
<p>Pour cr&eacute;er une extension, on va devoir cr&eacute;er une page html et un fichier css, comme on a l'habitude de faire. On va juste modifier certaines choses.</p>
<p>&nbsp;</p>
<h2>Pr&eacute;requis</h2>
<ul>
<li>Des connaissances en HTML</li>
<li>Des connaissances en CSS</li>
<li>Des bases avec JSON</li>
</ul>
<p>&nbsp;</p>
<p>Si vous avez besoin de petits rafraichissements ou d'apprendre le HTML ainsi que le CSS, suivez&nbsp;<a href="../course/creez-votre-premier-site-internet-avec-html5-et-css3">donc ce cours</a>&nbsp;puis revenez vers cet article.</p>
<p>&nbsp;</p>
<h3>Mise en place du projet</h3>
<p>Nous allons devoir cr&eacute;er un dossier dans lequel nous aurons&nbsp;<code>index.html</code>,&nbsp;<code>style.css</code> et <code>manifest.json.</code></p>
<p>Dans&nbsp;<code>index.html</code>, nous allons &eacute;crire le code de base d'une page html :</p>
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;link rel="stylesheet" href="./style.css"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;

  &lt;body&gt;
      &lt;h1&gt;Ma premi&egrave;re extension&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>&nbsp;</p>
<p>Ajoutons nos premiers sites internet, un g&eacute;n&eacute;rateur de palettes, un comparateur de JSON et un g&eacute;n&eacute;rateur de vagues CSS :</p>
<pre class="language-markup"><code>  &lt;body&gt;
      &lt;h1&gt;Ma premi&egrave;re extension&lt;/h1&gt;

      &lt;a href="https://coolors.co/e6eed6-dde2c6-bbc5aa-a72608-090c02"&gt;G&eacute;n&eacute;rateur de palettes&lt;/a&gt;
      &lt;a href="https://getwaves.io/"&gt;G&eacute;n&eacute;rateur de vagues&lt;/a&gt;
      &lt;a href="https://jsoneditoronline.org/#left=local.wixiyo&amp;right=local.jozayo"&gt;Comparateur de JSON&lt;/a&gt;
  &lt;/body&gt;</code></pre>
<h3>&nbsp;</h3>
<h3>Attaquons le CSS</h3>
<p>Pour ce qui est du CSS, il faut simplement pr&eacute;ciser la taille de notre fen&ecirc;tre en modifiant la taille de&nbsp;<code>body&nbsp;</code>:</p>
<pre class="language-css"><code>body {
  width: 400px;
  height: 500px;
  font-family: Arial;
}</code></pre>
<p>&nbsp;</p>
<p>Ajoutons un style &agrave; nos liens:</p>
<pre class="language-css"><code>a {
  width: 90%;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  padding: 7px;
  gap: 5px;
  text-decoration: none;
  color: #fff;
  transition: 0.2s;
  background: #333333;
  align-items: center;
  margin-bottom: 10px;
}
a:hover {
  transform: scale(1.02);
  opacity: 0.8;
}</code></pre>
<h3>&nbsp;</h3>
<h3>Le manifest.json</h3>
<p>Dans&nbsp;<code>manifest.json</code>, nous allons pr&eacute;ciser tout un tas de choses :</p>
<pre class="language-javascript"><code>{
    "name": "Ma premi&egrave;re extension",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "La meilleure extension qui existe !",
    "icons": {
        "48": "icon.png"
    },
    "action": {
        "default_popup": "index.html"
    }
}</code></pre>
<p>&nbsp;</p>
<p>Dans ce cas, nous avons:</p>
<ul>
<li><code>name&nbsp;</code>: le nom de notre extension</li>
<li><code>manifest_version&nbsp;</code>: la version du manifest.json (veillez &agrave; ce qu'elle soit bien sur la version 3)</li>
<li><code>description&nbsp;</code>: la description de notre extension</li>
<li><code>icons&nbsp;</code>: le chemin de nos/notre icone(s) sous diff&eacute;rentes r&eacute;solutions</li>
<li><code>action =&gt; default_popup</code><span style="color: #b96ad9;">&nbsp;</span>: le chemin de notre page html</li>
</ul>
<p>&nbsp;</p>
<h3>Utiliser notre extension sur notre navigateur</h3>
<p>Pour utiliser notre extension sur notre navigateur, sur la plupart d'entre eux, il va falloir activer le mode d&eacute;veloppeur. Acc&eacute;dez &agrave; la page des extensions et cliquez sur le bouton "Developer mode" pour activer le mode d&eacute;veloppeur.</p>
<ul>
<li>gerer les extensions chrome :&nbsp;<a href="chrome://extensions" target="_blank" rel="noopener">chrome://extensions</a></li>
<li>gerer les extensions edge :&nbsp;<a href="edge://extensions" target="_blank" rel="noopener">edge://extensions</a></li>
</ul>
<p>&nbsp;</p>
<p>Ensuite, on cliquera sur "Load extension" et on selectionnera notre projet.</p>
<p>&nbsp;</p>
<h2>Publier mon extension</h2>
<p>Pour publier notre extension, ce n'est pas forc&eacute;ment le m&ecirc;me proc&eacute;d&eacute;. Tout va surtout se jouer sur le navigateur pour lequel vous souhaitez rendre disponible votre projet.</p>
<ul>
<li><a href="https://developer.chrome.com/docs/webstore/publish/" target="_blank" rel="noopener">Documentation Google Chrome</a></li>
<li><a href="https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/publish/publish-extension" target="_blank" rel="noopener">Documentation Microsoft Edge</a></li>
<li><a href="https://extensionworkshop.com/documentation/publish/" target="_blank" rel="noopener">Documentation de Modzilla Firefox</a></li>
</ul>

Maxime D.

Maxime Delville

Articles validés (4)

Utiliser le localStorage dans une application NextJs ou React

Mettre en place des thèmes en SCSS avec NextJs ou React et les contextes

Mettre en place un loader au changement d'une page Nextjs

Créer une extension pour son navigateur