关于HTML5本地存储实例

最新推荐文章于 2021-06-04 04:51:37 发布

原创最新推荐文章于 2021-06-04 04:51:37 发布 · 622 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #windows phone

本文介绍了HTML5 localStorage的基本操作方法，包括如何设置、获取、删除数据，以及localStorage与sessionStorage的区别。通过实例代码展示了如何将网站信息保存到本地存储，并实现数据的持久化展示与清除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5 localStorage 本地存储

1、setItem()：给某个属性设置值

2、getItem()：获取某属性的值

3、removeItem()：清空键值对

4、clear()：清空本地存储

5、key()：键值

以上几种方法的使用见实例代码

localStorage与sessionStorage区别是：前者是存储在本地浏览器的Cookie中，后台这是存储在Session中。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>常用网站</title>
    <style type="text/css">
        td{height:20px;}
        .r{text-align:right;}
        #txtUrl{width:400px;}
        .c{text-align:center;}
        select{height:20px;}
        select option{padding:3px;}
        .l{text-align:left;}
        fieldset{height:500px;width:30%;float:left;}
        legend{text-align:center;}
        div{height:100%;width:100%;overflow-y:auto;margin-top:-10px;overflow-x:hidden;}
        ol li{border-bottom:1px solid #e9f2f5;}
        ol li a{text-decoration:none;}
        ol li a:hover{color:#12ec88;}
        span{float:right;}
        span:hover{cursor:pointer;color:red;}
    </style>
    <script type="text/javascript">
        window.onload = function () {
            Html();
        }


        var storage = window.localStorage;
        //往本地添加数据
        function Save() {
            var name = document.getElementById("txtName").value;
            var url = document.getElementById("txtUrl").value;
            var type = document.getElementById("slType").value;
            if (name.replace(" ", "").length == 0) {
                alert("网站名称不能为空");
                return false;
            }
            if (url.replace(" ", "").length == 0) {
                alert("网站地址不能为空");
                return false;
            }
            if (!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount", 0);
            storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//必须格式转换
            var stname = (type + storage.pageLoadCount).toString();
            storage.setItem(stname, name);
            storage.setItem("url" + stname, url);
            window.location.reload();
            alert("保存成功！");
        }


        //拼接获取本地数据拼接成Html代码
        function Html() {
            for (var i = 0; i < storage.length; i++) {
                var num = parseInt(storage.key(i).substring(0, 1));
                if (isNaN(num)) {
                    num = 0;
                } else {
                    var key = storage.key(i);
                    var href = storage.getItem("url" + key);
                    var title = storage.getItem(key);
                    var name = storage.getItem(key);
                    if (name.toString().replace(" ", "").length > 19) {
                        name = name.toString().substring(0, 18) + "...";
                    }
                    switch (num) {
                        case 1:
                            document.getElementById("ol1").innerHTML += '<li><a href="' + href + '" target="_blank" title="' + title + '">' + name + '</a><span onclick="Delete(' + key + ')">删除</span></li><br />';
                            break;
                        case 2:
                            document.getElementById("ol2").innerHTML += '<li><a href="' + href + '" target="_blank" title="' + title + '">' + name + '</a><span onclick="Delete(' + key + ')">删除</span></li><br />';
                            break;
                        case 3:
                            document.getElementById("ol3").innerHTML += '<li><a href="' + href + '" target="_blank" title="' + title + '">' + name + '</a><span onclick="Delete(' + key + ')">删除</span></li><br />';
                            break;
                        case 4:
                            document.getElementById("ol4").innerHTML += '<li><a href="' + href + '" target="_blank" title="' + title + '">' + name + '</a><span onclick="Delete(' + key + ')">删除</span></li><br />';
                            break;
                        case 5:
                            document.getElementById("ol5").innerHTML += '<li><a href="' + href + '" target="_blank" title="' + title + '">' + name + '</a><span onclick="Delete(' + key + ')">删除</span></li><br />';
                            break;
                        case 6:
                            document.getElementById("ol6").innerHTML += '<li><a href="' + href + '" target="_blank" title="' + title + '">' + name + '</a><span onclick="Delete(' + key + ')">删除</span></li><br />';
                            break;
                    }
                }


            }
        }


        //清空本地数据
        function Empty() {
            storage.clear();
            window.location.reload();
        }


        //删除指定的数据
        function Delete(value) {
            var r = confirm("删除之后不能恢复，你确定要删除吗？");
            if (r == true) {
                storage.removeItem(value);
                storage.removeItem("url" + value);
                window.location.reload();
            }
            else { }
        }
    </script>
</head>
<body>
    <table align="center">
        <tr>
            <td class="r">网站名称：</td>
            <td class="l"><input id="txtName" name="=txtName" /></td>
        </tr>
        <tr>
            <td class="r">网站地址：</td>
            <td class="l"><input type="text" id="txtUrl" name="=txtUrl" /></td>
        </tr>
        <tr>
            <td class="r">网站类型：</td>
            <td class="l">
                <select id="slType">
                    <option selected="selected" value="1">Windows</option>
                    <option value="2">Windows Phone</option>
                    <option value="3">SQL Server</option>
                    <option value="4">HTML5</option>
                    <option value="5">Unity3D</option>
                    <option value="6">Asp.Net</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="c">
                <input type="button" id="btnSave" name="btnSave" value="保 存" onclick="Save();">
                <input type="button" id="btnEmpty" name="btnEmpty" value="清 空" onclick="Empty();">
            </td>
        </tr>
    </table>
    <hr />
    <fieldset id="fieldset1">
        <legend>Windows</legend>
        <div id="div">
            <ol id="ol1"></ol>
        </div>
    </fieldset>
    <fieldset id="fieldset2">
        <legend>Windows Phone</legend>
        <div>
            <ol id="ol2"></ol>
        </div>
    </fieldset>
    <fieldset id="fieldset3">
        <legend>SQL Server</legend>
        <div>
            <ol id="ol3"></ol>
        </div>
    </fieldset>
    <fieldset id="fieldset4">
        <legend>HTML5</legend>
        <div>
            <ol id="ol4"></ol>
        </div>
    </fieldset>
    <fieldset id="fieldset5">
        <legend>Unity3D</legend>
        <div>
            <ol id="ol5"></ol>
        </div>
    </fieldset>
    <fieldset id="fieldset6">
        <legend>Asp.Net</legend>
        <div>
            <ol id="ol6"></ol>
        </div>
    </fieldset>
</body>
</html>