Écrire des données dans un fichier en JavaScript
- Stocker des données côté client à l’aide de l’API de stockage Web HTML 5
- Supprimer les données de stockage Web pour le stockage local
L’API de stockage Web HTML5 nous permet de stocker des données localement côté client. Notez que seule une petite quantité de données peut être stockée localement côté client et que sa taille maximale doit être inférieure ou égale à 5 Mo.
Les données ne sont ni transmises ni renvoyées au serveur à un moment donné si vous utilisez l’API de stockage Web. Il sera toujours disponible localement dans un fichier.
Stocker des données côté client à l’aide de l’API de stockage Web HTML 5
En règle générale, il existe deux types d’objets de stockage Web HTML pour stocker des données côté client.
- Stockage local (
window.localStorage)
Dans le stockage local, les données seront toujours disponibles à tout moment, même après la fermeture de la fenêtre du navigateur. Ce type n’est pas applicable lorsque l’utilisateur consulte la page Web en mode navigation privée (navigation privée). Dans ce cas, les données seront effacées peu de temps après la fermeture de la dernière fenêtre privée.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="company_name"></div>
<script>
localStorage.setItem('company', 'Google');
const storedValue = localStorage.getItem('company');
let company_name = document.getElementById("company_name");
company_name.innerHTML = storedValue;
</script>
</body>
</html>
Tout d’abord, nous avons un élément div vide avec un id de company_name. A l’intérieur de cet élément div, nous afficherons la valeur, que nous stockerons dans le stockage local.
Pour insérer n’importe quelle valeur à l’intérieur du localStorage, nous devons passer la valeur sous forme de paire clé-valeur. Vous pouvez effectuer ce processus en utilisant la méthode setItem, fournie par le stockage local. Dans ce cas, company est la clé et Google est la valeur. La méthode setItem ne retournera rien ; il stockera simplement la valeur dans le stockage local.
Pour récupérer la valeur, le stockage local nous fournit la méthode getItem() qui prend la key de la valeur que vous souhaitez récupérer en argument. Ensuite, nous stockons les résultats dans la variable appelée storedValue. À ce stade, nous avons la valeur Google à l’intérieur de la storedValue, et la seule chose que nous avons à faire est d’afficher cette valeur à l’intérieur de la balise div.
Pour ce faire, nous devons d’abord récupérer l’élément div à l’aide de son attribut id en utilisant la méthode document.getElementById et stocker cet élément HTML dans une nouvelle variable appelée company_name.
Enfin, nous ajouterons la valeur présente à l’intérieur de la variable storedValue à l’élément div à l’aide de la propriété innerHTML en tant que company_name.innerHTML = storedValue.
- Stockage de session (
window.sessionStorage)
Chaque fois que vous utilisez le stockage de session pour stocker les données, les données seront disponibles jusqu’à ce que l’onglet du navigateur soit ouvert, et elles seront effacées à la fin de la session de page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="company_name"></div>
<script>
sessionStorage.setItem('company', 'Google');
const storedValue = sessionStorage.getItem('company');
let company_name = document.getElementById("company_name");
company_name.innerHTML = storedValue;
</script>
</body>
</html>
Ici, le code est tout à fait similaire à celui de Local Storage. La seule différence est qu’à la place de Local Storage, nous avons utilisé sessionStorage. Premièrement, la valeur Google sera stockée dans le sessionStorage. Cette valeur est accessible ultérieurement en passant simplement la key associée à la valeur à la méthode getItem(). Ensuite, nous stockons cette valeur dans la variable storedValue. Au final, nous ajoutons cette valeur à div, qui affichera la valeur à l’écran.
Tous les navigateurs modernes prennent en charge ces deux types.
Supprimer les données de stockage Web pour le stockage local
Comme nous l’avons déjà vu, le stockage de session supprime toutes les données dès que l’onglet du navigateur ou l’ensemble du navigateur est fermé. Mais que faire si vous souhaitez également supprimer les données locales pour des raisons de sécurité ou des besoins personnels ? Il y a aussi un moyen de le faire.
Ici, il y a deux cas :
- Si vous souhaitez supprimer une valeur particulière du stockage local, vous pouvez utiliser la méthode ci-dessous. Dans la méthode
remove, nous devons passer lakeyde la valeur que vous souhaitez supprimer.localStorage.remove('key') - Si vous souhaitez effacer tout le stockage local, vous pouvez le faire avec cette méthode.
localStorage.clear()
Ces deux méthodes s’exécuteront lorsque l’onglet du navigateur ou le navigateur lui-même est fermé.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn