数据存储——临时存储（sessionStorage）和永久存储（localStorage）

最新推荐文章于 2024-04-27 10:00:51 发布

原创最新推荐文章于 2024-04-27 10:00:51 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #html5 #css3 #html

javascript 同时被 3 个专栏收录

124 篇文章

订阅专栏

HTML5

22 篇文章

订阅专栏

css3

18 篇文章

订阅专栏

本文通过一个实战案例介绍如何使用 HTML5 中的 sessionStorage 特性进行数据的临时存储与读取。具体包括如何设置数据、获取数据、删除单条数据以及清空所有数据等操作。

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