Maison > Article > interface Web > Une introduction détaillée à l'utilisation du stockage Web en HTML5

Une introduction détaillée à l'utilisation du stockage Web en HTML5

黄舟original: 2017-03-15 16:00:031249parcourir

1) Utiliser le stockage local (localStorage) :

Accédez à la fonction de stockage local via l'attribut global localStorage, et renverra un stockage Objet, qui est utilisé pour contenir des paires chaîne sous forme de clé/valeur.

Membres de l'objet Storage :

clear() - supprime la paire clé/valeur enregistrée ; >

getItem(ec5cb6d100cbcd212cbf7a5999e302f9)——Obtenir la valeur associée à la clé spécifiée

key(f7d5e03187940f84594b881d52645596)——Obtenir la clé de la longueur index

spécifiée——Renvoyer le nombre de paires clé/valeur enregistrées

removeItem(42538adbdb6240b2b083a000a615d5bd)——Supprime la paire clé/valeur correspondant à la clé spécifiée

setItem(2b2bda915385cbfa8e0c81dd3ed8eab7 ,8487820b627113dd990f63dd2ef215f3) - Ajouter une nouvelle paire clé/valeur, si la clé est déjà utilisée, mettre à jour sa valeur

[8a66db7248cea4b091ced72fb7100c95 ]——Utilisez le formulaire d'accès du

tableau pour obtenir la valeur associée à la clé spécifiée

Écoutez l'événement de stockage

; :

Lorsqu'un document modifie le stockage local, l'événement de stockage sera déclenché, et l'objet attribué est un objet StorageEvent, dont les membres sont :

clé - le retour se produit Clé modifiée

oldValue - renvoie l'ancienne valeur associée à cette clé

newValue - renvoie la nouvelle ; valeur associée à cette clé ;

url - Renvoie l'URL du document modifié

storageArea - Renvoie l'objet Storage modifié ; 🎜>

2) Utiliser le stockage de session (

session

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上海远地资产管理有限公司</title>
    <meta name="author" content="jason"/>
    <meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <style type="text/css">
        body > *{
            float:left;
        }
        table{
            border-collapse: collapse;
            margin-left: 50px;
        }
        th,td{
            padding: 4px;
        }
        th{
            text-align: right;
        }
        input{
            border:thin solid black;
            padding: 2px;
        }
        label{
            min-width: 50px;
            display: inline-block;
            text-align: right;
        }
        #countmsg,#buttons{
            margin-left: 50px;
            margin-top:5px;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<p>
    <p>
        <label>Key:</label>
        <input id="key" placeholder="Enter Key">
    </p>
    <p>
        <label>Value:</label>
        <input id="value" placeholder="Enter Value">
    </p>
    <p id="buttons">
        <button id="add">Add</button>
        <button id="clear">Clear</button>
    </p>
    <p id="countmsg">There are <span id="count"></span> items</p>
</p>
<table id="data" border="1">
    <tr>
        <th>Item Count:</th><td>-</td>
    </tr>
</table>
<script>
    displayData();
    var buttons=document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
        buttons[i].onclick=handleButtonPress;
    }
    function handleButtonPress(e){
        switch(e.target.id){
            case &#39;add&#39;:
            var key=document.getElementById("key").value;
            var value=document.getElementById("value").value;
                localStorage.setItem(key,value);
                break;
            case &#39;clear&#39;:
                localStorage.clear();
                break;
        }
        displayData();
    }
    function displayData(){
        var tableElem=document.getElementById("data");
        tableElem.innerHTML="";
        var itemCount=localStorage.length;
        document.getElementById("count").innerHTML=itemCount;
        for(var i=0;i<itemCount;i++){
            var key=localStorage.key(i);
            var val=localStorage[key];
            tableElem.innerHTML+="<tr><th>"+key+":</th><td>"+val+"</td></tr>";
        }
    }
</script>
</body>
</html>

Storage)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        table{
            border-collapse: collapse;
            margin-left: 50px;
        }
        th,td{
            padding: 4px;
        }
    </style>
</head>
<body>
<table id="data" border="1">
    <tr>
        <th>key</th>
        <th>oldValue</th>
        <th>newValue</th>
        <th>url</th>
        <th>storageArea</th>
    </tr>
</table>
<script>
    var tableElem=document.getElementById("data");
    window.onstorage=handleStorage;
    function handleStorage(e){
        var row="<tr>";
        row+="<td>"+ e.key+"</td>";
        row+="<td>"+ e.oldValue+"</td>";
        row+="<td>"+ e.newValue+"</td>";
        row+="<td>"+ e.url+"</td>";
        row+="<td>"+ (e.storageArea == localStorage)+"</td></tr>";
        tableElem.innerHTML+=row;
    }

</script>
</body>
</html>

Comment le stockage de session fonctionne Il est très proche du stockage local, sauf que les données sont privées pour chaque contexte de navigateur et seront supprimées à la fermeture du document.

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!

Déclaration：

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

Article précédent：Exemple de code pour créer des applications Web hors ligne en HTML5Article suivant：Exemple de code pour créer des applications Web hors ligne en HTML5

Articles Liés

Voir plus