A detailed introduction to using web storage in html5-H5 Tutorial-php.cn

A detailed introduction to using web storage in html5

黄舟

Release： 2017-03-15 16:00:03

Original

1240 people have browsed it

1) Use local storage (localStorage):

Access the local storage function through global propertylocalStorage, and will return a Storage Object , which is used to hold string pairs in the form of key/value.

Members of the Storage object:

clear()——Remove the saved key/value pair;

getItem(<key>)——Get the value associated with the specified key;

key(< ;index>)——Get the key of the specified index;

length——Return the number of saved key/value pairs;

removeItem()——Remove the key/value pair corresponding to the specified key;

setItem( ,) - Add a new key/value pair and update its value if the key is already used;

[ ]——Use the access form of array to obtain the value associated with the specified key;

Listen to the storage event:

When a document modifies local storage, the storage event will be triggered, and the assigned object is a StorageEvent object, whose members are:

key——return occurs Changed key;

oldValue——Returns the old value associated with this key;

newValue——Returns the new value associated with this key;

url——Returns the URL of the changed document;

storageArea——Returns the changed Storage object;

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

Copy after login

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

Copy after login

2) Use session storage (sessionStorage)

Session storage works very close to local storage , the difference is that the data is private to each browser context and is removed when the document is closed.

<!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;
                sessionStorage.setItem(key,value);
                break;
            case &#39;clear&#39;:
                sessionStorage.clear();
                break;
        }
        displayData();
    }
    function displayData(){
        var tableElem=document.getElementById("data");
        tableElem.innerHTML="";
        var itemCount=sessionStorage.length;
        document.getElementById("count").innerHTML=itemCount;
        for(var i=0;i<itemCount;i++){
            var key=sessionStorage.key(i);
            var val=sessionStorage[key];
            tableElem.innerHTML+="<tr><th>"+key+":</th><td>"+val+"</td></tr>";
        }
    }
</script>
</body>
</html>

Copy after login

The above is the detailed content of A detailed introduction to using web storage in html5. For more information, please follow other related articles on the PHP Chinese website!