零基础快速入门前端Web存储（sessionStorage & localStorage）知识点详解与蓝桥杯考点应用(可用于备赛蓝桥杯Web应用开发)

一、Web 存储概述

在 Web 开发中，数据存储是核心需求之一。早期通过 Cookie 存储，但 Cookie 容量小（约 4KB）、每次请求携带增加带宽。HTML5 引入 Web Storage（sessionStorage 和 localStorage），容量更大（约 5MB）、操作更便捷，成为蓝桥杯 Web 应用开发赛道的高频考点。

二、sessionStorage（会话存储）

2.1 核心概念

sessionStorage 将数据存储在当前页面会话中：

数据仅在当前标签页 / 窗口有效，关闭即清除；
同一页面跳转（如 a 标签target="_self"）数据保留，target="_blank"新页面无法获取；
适合临时存储（如表单草稿、单页应用状态）。

2.2 核心 API 与代码实例

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>sessionStorage 实例</title>
</head>
<body>
    <h3>sessionStorage 操作演示</h3>
    <input type="text" id="inputVal" placeholder="输入数据">
    <button onclick="saveData()">保存数据</button>
    <button onclick="getData()">读取数据</button>
    <button onclick="removeData()">删除指定数据</button>
    <button onclick="clearData()">清空所有数据</button>
    <p id="result"></p>

    <script>
        // 1. 存储数据：setItem(key, value) ------ 键值对形式，value需为字符串
        function saveData() {
            const val = document.getElementById('inputVal').value;
            sessionStorage.setItem('testKey', val);
            sessionStorage.setItem('userInfo', JSON.stringify({name: 'ggx', age: 20})); // 对象需转JSON字符串
            document.getElementById('result').textContent = '数据已保存';
        }

        // 2. 读取数据：getItem(key) ------ 不存在返回null
        function getData() {
            const val = sessionStorage.getItem('testKey');
            const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}'); // 转对象
            document.getElementById('result').textContent = 
                `读取到：testKey=${val}, userInfo=${JSON.stringify(userInfo)}`;
        }

        // 3. 删除指定数据：removeItem(key)
        function removeData() {
            sessionStorage.removeItem('testKey');
            document.getElementById('result').textContent = 'testKey 已删除';
        }

        // 4. 清空所有数据：clear()
        function clearData() {
            sessionStorage.clear();
            document.getElementById('result').textContent = '所有数据已清空';
        }
    </script>
</body>
</html>

2.3 sessionStorage 知识点汇总表

|-------------------------|-------------------------------|---------------------------------|
| 特性 / API | 说明 | 注意事项 |
| 存储周期 | 当前标签页 / 窗口会话有效，关闭即清除 | 刷新页面数据保留，新标签页（_blank）无效 |
| 容量 | 约 5MB（因浏览器而异） | 远超 Cookie，适合存储临时数据 |
| setItem(key, val) | 存储数据，key 和 val 均为字符串 | 对象 / 数组需用JSON.stringify()转字符串 |
| getItem(key) | 读取数据，返回字符串；key 不存在返回null | 读取对象需用JSON.parse()解析 |
| removeItem(key) | 删除指定 key 的数据 | 无 |
| clear() | 清空所有数据 | 谨慎使用，会清除当前会话所有存储 |
| 应用场景 | 表单草稿临时保存、单页应用页面间传参、当前页面临时状态存储 | 不适合长期保存数据 |

三、localStorage（本地存储）

3.1 核心概念

localStorage 将数据持久化存储在浏览器中：

数据永久保留，除非手动清除（通过 API 或浏览器设置）；
同一浏览器下同源页面（协议、域名、端口相同）共享数据；
适合长期存储（如用户偏好设置、登录状态标记）。

3.2 核心 API 与代码实例

（结合蓝桥杯常考的 "主题切换" 场景）：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>localStorage 实例（主题切换）</title>
    <style>
        body { transition: background 0.3s, color 0.3s; }
        .dark { background: #333; color: #fff; }
        .light { background: #fff; color: #333; }
    </style>
</head>
<body class="light">
    <h3>localStorage 主题切换演示</h3>
    <button onclick="toggleTheme()">切换主题</button>
    <p>刷新页面主题仍会保留！</p>

    <script>
        // 1. 初始化：读取localStorage中的主题设置
        const savedTheme = localStorage.getItem('theme') || 'light';
        document.body.className = savedTheme;

        // 2. 切换主题并保存
        function toggleTheme() {
            const currentTheme = document.body.className;
            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
            document.body.className = newTheme;
            localStorage.setItem('theme', newTheme); // 持久化保存
        }

        // 其他API用法同sessionStorage：
        // localStorage.setItem('username1','ggxL');
        // localStorage.getItem('username1');
        // localStorage.removeItem('password');
        // localStorage.clear();
    </script>
</body>
</html>

3.3 localStorage 知识点汇总表

|-------------------------|----------------------------------|---------------------------------|
| 特性 / API | 说明 | 注意事项 |
| 存储周期 | 永久存储，除非手动清除（API 或浏览器设置） | 关闭浏览器再打开数据仍存在 |
| 容量 | 约 5MB（因浏览器而异） | 适合长期存储非敏感数据 |
| 同源策略 | 同一浏览器下，协议、域名、端口相同的页面共享数据 | 跨域无法访问 |
| setItem(key, val) | 存储数据，key 和 val 均为字符串 | 对象 / 数组需用JSON.stringify()转字符串 |
| getItem(key) | 读取数据，返回字符串；key 不存在返回null | 读取对象需用JSON.parse()解析 |
| removeItem(key) | 删除指定 key 的数据 | 无 |
| clear() | 清空所有数据 | 谨慎使用，会清除所有同源页面的存储 |
| 应用场景 | 用户主题偏好、登录状态标记、表单数据持久化保存、本地缓存静态数据 | 不适合存储敏感信息（无加密） |

四、sessionStorage vs localStorage 核心区别（蓝桥杯易混点）

|------|----------------------|-------------------|
| 对比维度 | sessionStorage | localStorage |
| 存储周期 | 当前标签页 / 窗口会话有效，关闭即清除 | 永久存储，手动清除才消失 |
| 共享范围 | 仅当前标签页 / 窗口有效 | 同源页面（同协议、域名、端口）共享 |
| 容量 | 约 5MB | 约 5MB |
| 应用场景 | 临时数据（如表单草稿、单页状态） | 长期数据（如主题、登录状态） |

五、蓝桥杯 Web 考点结合与真题拓展

蓝桥杯 Web 赛道常考 Web 存储的实际应用，以下是高频考点与模拟题：

5.1 高频考点

数据持久化：结合表单，实现 "刷新后表单数据不丢失"；
主题切换：如上述 localStorage 实例，保存用户主题偏好；
计数功能：如 "页面访问次数统计"，刷新后次数累加；
购物车（简化版）：存储商品 ID 和数量，页面间共享。

5.2 蓝桥杯模拟题实例（计数功能）

需求：实现一个页面访问计数器，刷新页面后次数 + 1 并显示。

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>蓝桥杯模拟：访问计数器</title>
</head>
<body>
    <h3>页面访问次数：<span id="count">0</span></h3>

    <script>
        // 1. 读取localStorage中的计数，不存在则初始化为0
        let count = parseInt(localStorage.getItem('visitCount')) || 0;
        // 2. 计数+1
        count++;
        // 3. 保存回localStorage
        localStorage.setItem('visitCount', count);
        // 4. 显示到页面
        document.getElementById('count').textContent = count;
    </script>
</body>
</html>

六、总结

Web 存储是蓝桥杯 Web 开发的基础且核心考点，需重点掌握：

sessionStorage 和 localStorage 的 API 操作（setItem/getItem/removeItem/clear）；
两者的存储周期、共享范围区别；
结合实际场景的应用（主题切换、计数、表单持久化）