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

最新推荐文章于 2024-09-19 08:45:00 发布

h_jQuery

最新推荐文章于 2024-09-19 08:45:00 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML5 css3 javascript 文章标签： js javascript html5 css3 html

本文链接：https://blog.csdn.net/h_jQuery/article/details/117252332

javascript 同时被 3 个专栏收录

124 篇文章

订阅专栏

HTML5

22 篇文章

订阅专栏

css3

18 篇文章

订阅专栏

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

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

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