Exemple de stockage local LocalStorage en html5

1. Stockage local

Avant la naissance du HTML5, si un site Web voulait stocker des données côté navigateur, il ne pouvait utiliser que des Cookie. Il existe de nombreuses façons d'utiliser les restrictions sur les cookies.

Problèmes de cookies :

1. La taille des cookies est limitée à environ 4K (les différents navigateurs sont incohérents)

2. Les cookies seront envoyés avec chaque requête HTTP (ce qui provoque de nombreux cookies inutiles seront également envoyés ensemble)

Stockage local :

1. La taille de localStorage est limitée à 5M (les différents navigateurs sont incohérents)

2.localStorage sera ne suivent pas les requêtes HTTP sont envoyées ensemble

2. Stockage local au niveau de la session-sessionStorage

SessionStorage : Le L'utilisateur navigue pendant une certaine période. Lors de l'utilisation d'un site Web, à partir du moment où vous entrez sur le site Web jusqu'à ce que vous fermiez le site Web, il s'agit de la période de validité de l'objet de session.

SessionStorage propose quatre méthodes pour effectuer des opérations associées sur le stockage local.

　1. setItem( key, value)；Ajouter des données de stockage local

　2.getItem( key); Value

　3.removeItem( key )； Supprimer la valeur correspondante via key

　4.clear() ; toutes les données de session locales (limitées à ce nom de domaine)

 1 <script type="text/javascript"> 
 2     //添加key-value 数据到 sessionStorage 
 3     sessionStorage.setItem("name", "怜白"); 
 4     sessionStorage.setItem("job", "前端"); 
 5  
 6     //通过key来获取value 
 7     var name = sessionStorage.getItem("name"); 
 8  
 9     console.log(name); // 怜白
 10     console.log(sessionStorage.length); // 2
 11 
 12     // 通过key删除value
 13     sessionStorage.removeItem("job");
 14 
 15     console.log(sessionStorage.length); // 1
 16 
 17     //清空所有的key-value数据。
 18     sessionStorage.clear();
 19 
 20     console.log(sessionStorage.length); // 0
 21 </script>

3. Stockage local permanent - localStorage

localStorage : utilisé Local persistant stockage, les données n’expireront jamais à moins qu’elles ne soient activement supprimées.

LocalStorage propose quatre méthodes pour effectuer des opérations associées sur le stockage local.

　1. setItem( key, value)；Ajouter des données de stockage local

　2.getItem( key); Value

　3.removeItem( key); Supprimez la valeur correspondante via key

　4.clear(); 🎜>

<script type="text/javascript">
    //添加key-value 数据到 sessionStorage
    localStorage.setItem("name", "怜白");
    localStorage.setItem("job", "前端");

    //通过key来获取value
    var name = localStorage.getItem("name");

    console.log(name); // 怜白
    console.log(localStorage.length); // 2

    // 通过key删除value
    localStorage.removeItem("job");

    console.log(localStorage.length); // 1

    //清空所有的key-value数据。
    localStorage.clear();

    console.log(localStorage.length); // 0
</script>

4. Résumé　

La différence entre localStorage et sessionStorage est que l'un est un stockage temporaire et l'autre est un stockage à long terme.

Vous avez peut-être vu l'écriture suivante :

<script type="text/javascript">
    // 设置name
    localStorage.name = "怜白"

    // 删除name
    delete localStorage.name
</script>

La méthode d'affectation directe ci-dessus peut effectivement réaliser la fonction, mais elle est définie dans la documentation officielle comme une méthode dangereuse

🎜>, alors n'utilisez pas cette façon d'écrire, utilisez la méthode fournie par localStorage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!