数据存储——临时存储（sessionStorage）和永久存储（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, init

h_jQuery

1771人浏览 · 2021-05-25 11:30:56

h_jQuery · 2021-05-25 11:30:56 发布

<!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>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="clearAll">清空数据</button>
    <script>
        // sessionStorage设置值之后，如果关掉浏览器，会自动删除设置的数据
        // 临时存储
        //sessionStorage.setItem("uname","张三")
        // localStorage置值之后，就浏览器关了，数页一直存在该localStorage内，与域名有关，永久存储在该域名的内存中
        // 永久存储
        // localStorage.setItem("uname","李四")
        var txt = document.querySelector("input")
            // 存储数据（临时存储）
        document.querySelector(".set").onclick = function() {
                // 键值对形式
                sessionStorage.setItem("age", txt.value)
            }
            // 获取数据
        document.querySelector(".get").onclick = function() {
                var age = sessionStorage.getItem("age")
                console.log(age);
            }
            // 删除单个数据
        document.querySelector(".remove").onclick = function() {
                sessionStorage.removeItem("age")
            }
            // 清空存储的所有数据
        document.querySelector(".clearAll").onclick = function() {
            sessionStorage.clear()
        }
    </script>
</body>

</html>