Le Local Storage est une méthode de Web Storage qui permet à une application web de stocker des données persistantes sur le navigateur de l’utilisateur. Il est parfait pour sauvegarder les préférences de l’utilisateur ou les états d’application entre les sessions de navigation. Voici comment vous pouvez l’utiliser avec React.js :
1. Installons d’abord le package `localStorage` à l’aide de npm ou yarn : \`\`\` npm install local-storage \`\`\` ou \`\`\` yarn add local-storage \`\`\`
1. Importez le package dans votre composant : \`\`\`jsx import ls from ‘local-storage’; \`\`\`
1. Enregistrez quelque chose dans le Local Storage : \`\`\`jsx ls.set(‘key’, ‘value’); \`\`\`
1. Récupérez quelque chose du Local Storage : \`\`\`jsx ls.get(‘key’); \`\`\`
1. Supprimez quelque chose du Local Storage : \`\`\`jsx ls.remove(‘key’); \`\`\`
1. Dans le contexte de React, vous pouvez utiliser ces méthodes dans les méthodes du cycle de vie de vos composants pour enregistrer et récupérer l’état de l’application. Par exemple : \`\`\`jsx componentDidMount() { this.setState({ key: ls.get(‘key’) || ‘’, }); }
componentDidUpdate() { ls.set(‘key’, this.state.key); } \`\`\`Notez que Local Storage ne stocke que des chaînes de caractères. Si vous voulez stocker des objets ou des tableaux, vous devrez les serialiser en JSON avant de les stocker, et les déserialiser lors de la récupération. Par exemple :
```
ls.set(‘key’, JSON.stringify(obj));
```
et
```
JSON.parse(ls.get(‘key’));
```
Aussi, il est important de noter que Local Storage est synchronisé et bloquant, donc l’utilisation excessive peut nuire aux performances de votre application. Pour une solution plus performante, regardez du côté de IndexedDB ou des Web Workers.
