Explication détaillée de l'utilisation de localStorage en HTML5

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de localStorage en Html5. Quelles sont les précautions lors de l'utilisation de localStorage en Html5. Voici des cas réels, jetons un coup d'œil.

localStorage est une fonctionnalité nouvellement ajoutée de Html5. Cette fonctionnalité est principalement utilisée pour le stockage local du navigateur

1 Déterminez si le navigateur prend en charge localStorage

  if (!window.localStorage) {        console.log("浏览器不支持localStorage")
    } else {        console.log("浏览器支持localStorage")
    }

2. pour écrire du contenu dans localStorage :

  var DemoStorage = window.localStorage;    //写入方法1：
    DemoStorage.name = "Tom";    //写入方法2：
    DemoStorage["age"] = 18;    //写入方法3：
    DemoStorage.setItem("hobby", "sport");    
    console.log(DemoStorage.name,typeof DemoStorage.name);    console.log(DemoStorage.age, typeof DemoStorage.age);    console.log(DemoStorage.hobby, typeof DemoStorage.hobby);    /*输出结果:
    Tom string
    18 string
    sport string*/

Dans l'exemple de code ci-dessus : l'entrée age est un nombre, mais la sortie est une chaîne. On peut voir que localStorage ne peut stocker que des données de type chaîne.

3. Supprimer de localStorage :

1. Supprimer tout le contenu de localStorage :

Storage.clear() n'accepte pas les paramètres, c'est simple. Effacez l'intégralité de l' objet de stockage correspondant au nom de domaine.

 var DemoStorage = window.localStorage;    
    DemoStorage.name = "Tom";
    DemoStorage.age = 18;
    DemoStorage.hobby = "sport";    
    console.log(DemoStorage);    //输出：Storage {age: "18", hobby: "sport", name: "Tom", length: 3}
    DemoStorage.clear();    console.log(DemoStorage);    //输出: Storage {length: 0}

2. Supprimez une paire clé-valeur :

Storage.removeItem() accepte un paramètre - la clé de l'élément de données que vous souhaitez supprimer, puis les données correspondantes. l'élément est supprimé de l'objet de stockage correspondant au nom de domaine.

   var DemoStorage = window.localStorage;
    DemoStorage.name = "Tom";
    DemoStorage.age = 18;
    DemoStorage.hobby = "sport";    console.log(DemoStorage);    //输出：Storage {age: "18", hobby: "sport", name: "Tom", length: 3}
    DemoStorage.removeItem("age");    console.log(DemoStorage);    //输出：Storage {hobby: "sport", name: "Tom", length: 2}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Code JavaScript pour masquer les éléments un par un

Explication détaillée de la fonction de rappel de javascript (callback)

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!