Heim > Artikel > Web-Frontend > Eine detaillierte Einführung in die Verwendung von Webspeicher in HTML5

Eine detaillierte Einführung in die Verwendung von Webspeicher in HTML5

黄舟Original: 2017-03-15 16:00:031208Durchsuche

1) Lokalen Speicher verwenden (localStorage):

Greifen Sie über das globale Attribut localStorage auf die lokale Speicherfunktion zu und geben Sie einen SpeicherObjekt, das zum Speichern von String-Paaren in Form von Schlüssel/Wert verwendet wird.

Mitglieder des Storage-Objekts:

clear() – entfernt das gespeicherte Schlüssel/Wert-Paar; >

getItem(04e2d1534acf0c0aab54d4ce6f133283) – Rufen Sie den mit dem angegebenen Schlüssel verknüpften Wert ab key(< ;index>) – Rufen Sie den Schlüssel der angegebenen

Index-Länge ab. – Geben Sie die Anzahl der gespeicherten Schlüssel/Wert-Paare zurück > removeItem(42538adbdb6240b2b083a000a615d5bd) – Entfernt das Schlüssel/Wert-Paar, das dem angegebenen Schlüssel entspricht

set

Item(< ;key> ,8487820b627113dd990f63dd2ef215f3) – Fügen Sie ein neues Schlüssel/Wert-Paar hinzu, wenn der Schlüssel bereits verwendet wird,

aktualisieren seinen Wert

[8a66db7248cea4b091ced72fb7100c95 ] – Verwenden Sie die Zugriffsform von array, um den mit dem angegebenen Schlüssel

verknüpften Wert zu erhalten. Hören Sie sich das Speicherereignis

an : Wenn ein Dokument den lokalen Speicher ändert, wird das Speicherereignis ausgelöst und das zugewiesene Objekt ist ein StorageEvent-Objekt, dessen Mitglieder sind:

key – Rückgabe erfolgt. Geänderter Schlüssel;

oldValue – gibt den alten Wert zurück, der diesem Schlüssel zugeordnet ist.

newValue – gibt den neuen zurück Wert, der diesem Schlüssel zugeordnet ist;

url – Gibt die geänderte Dokument-URL zurück

storageArea – Gibt das geänderte Speicherobjekt zurück; 🎜>

2) Sitzungsspeicher verwenden (

SitzungSpeicher)

Wie Sitzungsspeicher Funktioniert Es kommt dem lokalen Speicher sehr nahe, mit der Ausnahme, dass die Daten für jeden Browserkontext privat sind und beim Schließen des Dokuments entfernt werden.

<!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>

<!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>

Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in die Verwendung von Webspeicher in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielcode zum Erstellen von Offline-Webanwendungen in HTML5Nächster Artikel：Beispielcode zum Erstellen von Offline-Webanwendungen in HTML5

In Verbindung stehende Artikel

Mehr sehen