localStorage : Démo HTML5
Mise à jour : 2017-08-30
Elle est la version persistente de sessionStorage.
Les méthodes
- setItem(clé, données) : sauvegarde les données et les associe à une clé
- getItem(clé) : récupère les données liées à cette clé
- ... : cf. sessionStorage
Notes sur le tuto
- Contrairement à sessionStorage, il y a persistante des données :
- Ouvrez cette page plusieurs fois, et vous constaterez que vous pouvez échanger des données en utilisant la même clé.
- Sauvez des données, puis fermez votre navigateur. Quand vous le réouvrirez vous pourrez accéder aux données précédemment sauvées.
- Article complet sur Alsacréation
- Étude exhaustive sur la taille des stockages par HTML5 Rocks.
Exemple de code HTML5
<script> function set() { key = document.forms["editor"].key.value; data = document.forms["editor"].data.value; localStorage.setItem(key, data); document.forms["editor"].data.value = ""; } function get() { key = document.forms["editor"].key.value; document.forms["editor"].data.value = localStorage.getItem(key); } </script> <form name="editor"> <textarea onclick="this.value=''" name="data" rows=3 cols=50>Saisissez le texte à sauver... </textarea><br> <br> Clé : <input name="key"> <input type="button" value="Sauver" onclick="set()"> <input type="button" value="Relire" onclick="get()"> </form>
Démonstration du résultat HTML5
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script>isItemSupported("window.localStorage")</script>