Web Storage 掌握 localStorage 的使用

最新推荐文章于 2023-06-03 15:37:10 发布

大坤...

最新推荐文章于 2023-06-03 15:37:10 发布

阅读量162

点赞数

文章标签： html

本文链接：https://blog.csdn.net/red_HTML/article/details/125869149

版权

本文通过多个实例展示了如何在浏览器中使用 Web Storage 进行数据存储和读取，包括检查浏览器支持、设置和获取键值对、实现点击计数功能以及创建一个简单的数据存储和查询系统。这些案例详细解释了 localStorage 的工作原理和应用场景，为开发者提供了实用的前端存储解决方案。

摘要由CSDN通过智能技术生成

key 键 value 值一键有多值

案例1

显示自己的浏览器是否支持

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        // Storage
        if (typeof(Storage) != "undefined") {
            document.write("支持 谢谢")
        } else {
            document.write("不支持")
        }
    </script>
</body>

</html>

效果：

掌握 localStorage 的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="result"></div>
    <script type="text/javascript">
        // Storage
        if (typeof(Storage) != "undefined") {
            // document.write("支持")
            // 从浏览器存入一个键值对
            localStorage.setItem("stuname", "小明")
                // 第二种方法
            localStorage.stuid = "2201716"
                // 从浏览器获取本地存储的值
            document.getElementById("result").innerHTML = localStorage.getItem("stuname") + "学号：" + localStorage.stuid;
        } else {
            document.write("不支持")
        }
    </script>
</body>

</html>

案例2 点击按钮加1 浏览器关闭，数字不会重置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- clickCout() 自己定义的方法名 -->
    <input type="button" value="按钮" onclick="clickCout()">
    <div id="result"></div>
    <script type="text/javascript">
        function clickCout() {
            if (localStorage.click_num) {
                // parseInt 强制转化成整数
                localStorage.click_num = parseInt(localStorage.click_num) + 1;
            } else {
                localStorage.click_num = 1;
            }
            //  通过id 来寻找"标签div"
            // innerHTML属性：可以设置或获取标签起始位置到终止位置的全部内容 包括标签
            document.getElementById("result").innerHTML = localStorage.click_num
        }
    </script>
</body>

</html>

Web Storage 案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #text2 {
            width: 200px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <span>网名</span>
    <input type="text" id="textname" value=""> <br>
    <span>网址</span>
    <input type="text" id="textvalue" value=""> <br>
    <button onclick="input1()">添加</button> <br>
    <br>

    <button onclick="input2()">查询</button><br> 网名：
    <input id="text1" type="text"> <br> 获取的网址
    <div id="text2">11</div>

    <table id="tab">

    </table>
    <script type="text/javascript">
        window.onload = loadAll();

        function input1() {
            var wm = document.getElementById("textname").value;
            var wz = document.getElementById("textvalue").value;
            localStorage.setItem(wm, wz);
            alert("添加成功1");
        }

        function input2() {
            var key = document.getElementById("text1").value;
            document.getElementById("text2").innerHTML = "网址名：" + key + "网址" + localStorage.getItem(key);
        }

        function loadAll() {
            var sesult = "<table border='1' cellspacing='0'>"
                // 根据i(索引值) 找到键名 通过键名key 找到这个键值
            sesult += "<tr><th>网址名1</th><th>网址</th></tr>"
            for (var i = 0; i < localStorage.length; i++) {
                var key = localStorage.key(i);
                var value = localStorage.getItem(key);
                sesult += "<tr><td>" + key + "</td><td>" + value + "</td></tr>"
            }
            sesult += "</table>"
            document.getElementById("tab").innerHTML = sesult;
        }
    </script>
</body>

</html>