Maison > interface Web > Tutoriel H5 > le corps du texte

Stockage des données client HTML5Stockage Web : localStorage et sessionStorage

黄舟
Libérer: 2017-02-27 15:25:40
original
1889 Les gens l'ont consulté


HTML5 offre une nouvelle façon de stocker des données sur le stockage Web du client
Similaire au Cookie en HTML4
Mais il est beaucoup plus puissant

Cookie

Tout d'abord, passons brièvement en revue les cookies utilisés auparavant

Les cookies stockent des données sur l'appareil de l'utilisateur, et la quantité de données stockées est faible, seulement 4 Ko
Oui Vérifiez si les cookies sont activés via navigator.cookieEnabled

  • Définir les cookies document.cookie = 'key=value';

  • Obtenir des cookies document.cookie;

  • Supprimer les cookies document.cookie = "key=value;max-age=0";

  • Définir la période de stockage maximaledocument.cookie = "key=value;max-age=1000"; // 1000秒

  • Définir la période de stockage expire

var timestamp = (new Date()).getTime() + 10000;var expires = new Date(timestamp).toGMTString();
//或toUTCStringdocument.cookie = "key=value;expires="+expires;
Copier après la connexion
  • Obtenir une valeur de cookie spécifique

function getCookie(name) {
    var name = name + "=";    
    var ary = document.cookie.split(';');    
    for(var i = 0; i < ary.length; i++){        
    var c = ary[i];        
    while (c.charAt(0) == &#39; &#39;){
          c = c.substring(1);
        }        
        if (c.indexOf(name) != -1){          
        return c.substring(name.length, c.length);
        }
    }    return "";
}
Copier après la connexion

Le stockage Web

Le stockage Web est divisé en La différence entre les deux types de
localStorage et sessionStorage
est :

  • localStorage stocke les données permanentes à moins qu'elles ne soient supprimées manuellement

  • sessionStorage stocke les données temporaires et disparaîtra lorsque la fenêtre est fermée

Facile à utiliser

Le stockage Web ne peut stocker que des données de chaîne
Je pense qu'elles peuvent être comprises comme JSON
les méthodes d'utilisation sont similaires, en prenant localStorage comme exemple

localStorage.name = &#39;payen&#39;;
localStorage.info = JSON.stringify({name: &#39;payen&#39;, age: 20});
console.log(localStorage.name);
console.log(JSON.parse(localStorage.info));
Copier après la connexion

Le nom des données à stocker est le nom de l'attribut de localStorage
Les chaînes ordinaires peuvent être stockées normalement
objets Les données peuvent être converties au format chaîne à l'aide de JSON.stringify()
puis reconverties au format objet à l'aide de JSON.parse()
(si l'objet est stocké directement, il sera forcé d'être converti en un string "[object Object]")


Pour supprimer les données, supprimez-les simplement

delete localStorage.name;delete localStorage.info;
Copier après la connexion

Si vous ne les supprimez pas, les données dans localStorage existeront toujours dans votre navigateur

API

localStorage et sessionStorage fournissent également des API simples
similaires à une base de données client
(les API sont les mêmes)
Les éléments suivants sont couramment utilisés :

  • Enregistrer les données setItem(clé, valeur)

  • Lire les données getItem(clé)

  • Supprimer un données uniques RemoveItem(key)

  • Effacer toutes les données clearItem()

  • Obtenir la clé d'index des données (index)

Exemple

Grâce à cela, nous pouvons écrire un simple carnet d'adresses

<p id="container">
    <br>
    <label for="username">姓名:</label>
    <input type="text" id="username" name="username">
    <br>
    <label for="mobilephone">手机:</label>
    <input type="text" id="mobilephone" name="mobilephone">
    <br><br>
    <input type="button" onclick="add()" id="add" value="增加联系人">
    <br><br>
    <hr>
    <label for="search">输入姓名:</label>
    <input type="text" id="search" name="search">
    <br><br>
    <input type="button" onclick="find()" id="find" value="查找手机号">
    <p id="result"><br></p></p>
Copier après la connexion
#container {    
border: 2px solid gray;    
width: 320px;    
text-align:center;}
Copier après la connexion

Stockage des données client HTML5Stockage Web : localStorage et sessionStorage

C'est tout en JavaScript Implémentez ces deux fonctions

var user = document.getElementById(&#39;username&#39;),
    phone = document.getElementById(&#39;mobilephone&#39;),
    search = document.getElementById(&#39;search&#39;),
    result = document.getElementById(&#39;result&#39;);var add = function(){
    var u = user.value,
        p = phone.value,
        l = localStorage.length;    if(u !== &#39;&#39; && p !== &#39;&#39;){
        localStorage.setItem(u, p);
        user.value = &#39;&#39;;
        phone.value = &#39;&#39;;
        alert(&#39;添加成功&#39;);
    }
};var find = function(){
    var s = search.value,
        r = localStorage.getItem(s);    if(s !== &#39;&#39; && r){
        result.innerHTML = r;
    }
};
Copier après la connexion

Stockage des données client HTML5Stockage Web : localStorage et sessionStorage

Entrez le nom et le téléphone portable pour ajouter un contact
Entrez ensuite le nom du contact ci-dessous et nous pourrons trouver le numéro de téléphone portable

Stockage des données client HTML5Stockage Web : localStorage et sessionStorage


Bien sûr ce carnet d'adresses est très simple
Vous pouvez également l'ajouter pour afficher toutes les informations du carnet d'adresses
Supprimer les fonctions de contact, etc.

Différences entre les cookies et le stockage Web

Enfin, parlons de la différence entre le stockage Web de Html5 et les cookies de Html4

特点 Cookie Web Storage
生命周期 一般由服务器生成并设置时间;浏览器生成默认关闭浏览器失效 local:不清除则永久保存;session:关闭页面或浏览器失效
数据大小 4KB 官方推荐5MB
通信 携带在HTTP头中(过多使用有性能问题) 仅在浏览器存储,不参与通信
使用 原生接口不友好,需要手动封装 原生接口友好

Ce qui précède est le contenu du stockage Web de stockage de données client HTML5— localStorage et sessionStorage, et plus encore. Pour le contenu associé, veuillez faire attention au site Web PHP chinois (www.php.cn) !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal