stockage Web HTML5

Dans le passé, nous utilisions un document.cookie pour stocker des données localement, mais comme sa taille de stockage n'est que d'environ 4K, l'analyse est également très compliqué, ce qui apporte beaucoup de désagréments au développement. Mais maintenant html5 dispose d'un stockage Web, ce qui compense les défauts des cookies, et il est également assez pratique d'ouvrir

.

Le stockage Web est divisé en deux catégories

sessionStockage

Taille de la capacité env. Elle est d'environ 5 M, et le cycle de vie de cette méthode va jusqu'à la fermeture de la fenêtre du navigateur

localStorage

La capacité est d'environ 20M Les données stockées n'expireront pas à l'expiration de la session de navigation de l'utilisateur, mais seront supprimées à la demande de l'utilisateur. . Les navigateurs les suppriment également en raison de limitations d'espace de stockage ou de raisons de sécurité De plus, les données stockées dans le type peuvent être partagées entre plusieurs fenêtres du même navigateur

Remarque. : Seule la string peut être stockée. S'il s'agit d'un json objet, l'objet peut être JSON.stringif<.>y () Explication détaillée de la méthode de stockage de

après encodage :

　

setItem(key, valeur) Définir le contenu de stockage

getItem(key)

Lire le contenu de stockage

removeItem(key)

Supprimer la valeur de la clé est Le contenu de stockage de la clé

　

clear() Effacer tout le contenu de stockage

Ensuite, laissez-moi vous montrer comment il écrit :

　　//更新
    function update() {
        window.sessionStorage.setItem(key, value);
    }    //获取
    function get() {
        window.sessionStorage.getItem(key);
    }    //删除
    function remove() {
        window.sessionStorage.removeItem(key);
    }    //清空所有数据
    function clear() {
        window.sessionStorage.clear();
    }

Pour voir l'effet, prenons Google Chrome comme exemple :

L'ancienne version précédente n'avait pas d'application, et l'ancienne version était

Ressource

Après avoir stocké les données

Je vais vous montrer un exemple classique de

enregistrement du nom d'utilisateur et du mot de passe

Lorsque la case Mémoriser le mot de passe

est cochée, le nom d'utilisateur et le mot de passe n'ont pas besoin d'être saisis à nouveau la prochaine fois que vous l'ouvrez

partie html :

pour=""> Nom d'utilisateur :





Mot de passe : " class="pwd"/>





Connexion

partie js

  var userName=document.querySelector('.userName');    var pwd=document.querySelector('.pwd');    var sub=document.querySelector('button');    var ckb=document.querySelector('.ckb');

    sub.onclick=function(){//        如果记住密码 被选中存储，用户信息
        if(ckb.checked){
            window.localStorage.setItem('userName',userName.value);
            window.localStorage.setItem('pwd',pwd.value);
        }else{
            window.localStorage.removeItem('userName');
            window.localStorage.removeItem('pwd');
        }//        否则清除用户信息    }

    window.onload=function(){//        当页面加载完成后，获取用户名，密码，填充表单
        userName.value=window.localStorage.getItem('userName');
        pwd.value=window.localStorage.getItem('pwd');
    }

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!