Une introduction détaillée à l'utilisation du stockage Web en HTML5-Tutoriel H5-php.cn

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

黄舟

Libérer： 2017-03-15 16:00:03

original

1270 Les gens l'ont consulté

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(<key>)——Obtenir la valeur associée à la clé spécifiée

key(< ;index>)——Obtenir la clé de la longueur index

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

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

setItem(< ;key> ,) - Ajouter une nouvelle paire clé/valeur, si la clé est déjà utilisée, mettre à jour sa valeur

[< key> ]——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>

Copier après la connexion

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>

Copier après la connexion

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!