html5之使用web存储的具体介绍-H5教程-PHP中文网

首页

web前端

H5教程

html5之使用web存储的具体介绍

黄舟

Mar 15, 2017 pm 04:00 PM

1）使用本地存储（localStorage）:

通过全局属性localStorage访问本地存储功能，并会返回一个Storage对象，它被用来保存键/值形式的字符串对。

Storage对象的成员：

clear()——移除保存的键/值对；

getItem(b426c87d5d3d3a1fd68262c64998cac2)——取得与指定键关联的值；

key(64531295cb863c6c1bc26fe1360fcf6c)——取得指定索引的键；

length——返回已保存的键/值对数量；

removeItem(42538adbdb6240b2b083a000a615d5bd)——移除指定键对应的键/值对；

setItem(42538adbdb6240b2b083a000a615d5bd,8487820b627113dd990f63dd2ef215f3)——添加一个新的键/值对，如果键已使用就更新它的值；

[42538adbdb6240b2b083a000a615d5bd]——用数组的访问形式取得与指定键关联的值；

监听存储事件：

某个文档对本地存储进行修改时会触发storage事件，同时指派的对象是一个StorageEvent对象，其成员有：

key——返回发生变化的键；

oldValue——返回关联此键的旧值；

newValue——返回关联此键的新值；

url——返回制造变化的文档URL;

storageArea——返回发生变化的Storage对象；

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

2）使用会话存储（sessionStorage）

会话存储的工作方式和本地存储很接近，不同之处在于数据是各个浏览器上下文私有的，会在文档关闭时移除。

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

以上是html5之使用web存储的具体介绍的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML5：标准及其对Web开发的影响Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括语义化标签、多媒体支持、离线存储与本地存储、表单增强。1.语义化标签如、等，提升代码可读性和SEO效果。2.和标签简化多媒体嵌入。3.离线存储和本地存储如ApplicationCache和LocalStorage，支持无网络运行和数据存储。4.表单增强引入新输入类型和验证属性，简化处理和验证。

H5代码示例：实际应用和教程Apr 25, 2025 am 12:10 AM

H5提供了多种新特性和功能，极大地增强了前端开发的能力。1.多媒体支持：通过和元素嵌入媒体，无需插件。2.画布（Canvas）：使用元素动态渲染2D图形和动画。3.本地存储：通过localStorage和sessionStorage实现数据持久化存储，提升用户体验。

H5和HTML5之间的连接：相似性和差异Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一个版本，包含新元素和API；H5是基于HTML5的移动应用开发框架。HTML5通过浏览器解析和渲染代码，H5应用则需要容器运行并通过JavaScript与原生代码交互。

H5代码的基础：密钥元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的关键元素包括、、、、、等，用于构建现代网页。1.定义头部内容，2.用于导航链接，3.表示独立文章内容，4.组织页面内容，5.展示侧边栏内容，6.定义页脚，这些元素增强了网页的结构和功能性。

HTML5和H5：了解常见用法Apr 22, 2025 am 12:01 AM

HTML5和H5没有区别，H5是HTML5的简称。1.HTML5是HTML的第五个版本，增强了网页的多媒体和交互功能。2.H5常用于指代基于HTML5的移动网页或应用，适用于各种移动设备。

HTML5：现代网络的基础（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本标记语言的最新版本，由W3C标准化。HTML5引入了新的语义化标签、多媒体支持和表单增强，提升了网页结构、用户体验和SEO效果。HTML5引入了新的语义化标签，如、、、等，使网页结构更清晰，SEO效果更好。HTML5支持多媒体元素和，无需第三方插件，提升了用户体验和加载速度。HTML5增强了表单功能，引入了新的输入类型如、等，提高了用户体验和表单验证效率。

H5代码：编写清洁有效的HTML5Apr 20, 2025 am 12:06 AM

如何写出干净高效的HTML5代码？答案是通过语义化标签、结构化代码、性能优化和避免常见错误。1.使用语义化标签如、等，提升代码可读性和SEO效果。2.保持代码结构化和可读性，使用适当缩进和注释。3.优化性能，通过减少不必要的标签、使用CDN和压缩代码。4.避免常见错误，如标签未闭合，确保代码有效性。