HTML5 web存储,localStorage,基于JavaScript

最新推荐文章于 2022-11-03 22:00:00 发布

houyanhua1

最新推荐文章于 2022-11-03 22:00:00 发布

阅读量183

点赞数

分类专栏： HTML5 JavaScript 文章标签： html5 javascript localStorage

本文链接：https://blog.csdn.net/houyanhua1/article/details/79693206

版权

JavaScript 同时被 2 个专栏收录

140 篇文章 4 订阅

订阅专栏

HTML5

54 篇文章 1 订阅

订阅专栏

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button>设置</button>
    <button>获取</button>
    <button>删除</button>
    <button>清除全部</button>

    <script>

        // H5中两种web存储方式
        
        // sessionStorage    5M    浏览器关闭后失效(内存)
        // localStorage     20M    永久生效,除非手动删除(硬盘)
        
        var txt = document.querySelector("input");
        var btns = document.querySelectorAll("button");

        // 设置存储
        btns[0].onclick = function() {
            window.localStorage.setItem("userName",txt.value);   // 设置/更新localStorage
        }

        // 获取
        btns[1].onclick = function() {
            var str = window.localStorage.getItem("userName");   // 获取localStorage ，没有时获取到null
            console.log(str);
        }

        // 删除
        btns[2].onclick = function() {
            window.localStorage.removeItem("userName");   // 删除指定localStorage
        }

        // 清空所有
        btns[3].onclick = function() {
            window.localStorage.clear();   // 清空所有localStorage
        }

    </script>
</body>
</html>