本地存储-应用场景-临时数据的保存-前端-HTML5-书闪BookChips

221 - 本地存储 - 应用场景 - 临时数据的保存

作者：

贺及楼

成为作者

更新日期：2025-02-27 18:15:55

本地存储 - 应用场景 - 临时数据的保存

引言

在前端开发中，我们经常会遇到需要保存一些临时数据的情况。例如，用户在填写表单时，可能中途会离开页面，如果不保存已填写的数据，用户回来后就需要重新填写，这会极大地影响用户体验。HTML5 为我们提供了本地存储的解决方案，主要包括 localStorage 和 sessionStorage，它们可以方便地在浏览器端保存临时数据。

本地存储概述

localStorage

localStorage 用于长期保存数据，除非手动删除，否则数据不会过期。它的存储大小一般为 5MB 左右，不同浏览器可能会有所差异。

sessionStorage

sessionStorage 用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页后数据会被清除。它的存储大小同样约为 5MB。

应用场景及示例代码

1. 表单数据的临时保存

当用户填写表单时，我们可以使用 localStorage 或 sessionStorage 来保存已填写的数据，防止因意外情况丢失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单数据临时保存</title>
</head>
<body>
    <form id="myForm">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name"><br>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email"><br>
        <input type="submit" value="提交">
    </form>
    <script>
        const form = document.getElementById('myForm');
        const nameInput = document.getElementById('name');
        const emailInput = document.getElementById('email');
        // 页面加载时尝试恢复数据
        window.addEventListener('load', () => {
            const savedName = localStorage.getItem('formName');
            const savedEmail = localStorage.getItem('formEmail');
            if (savedName) {
                nameInput.value = savedName;
            }
            if (savedEmail) {
                emailInput.value = savedEmail;
            }
        });
        // 输入框内容变化时保存数据
        nameInput.addEventListener('input', () => {
            localStorage.setItem('formName', nameInput.value);
        });
        emailInput.addEventListener('input', () => {
            localStorage.setItem('formEmail', emailInput.value);
        });
        // 表单提交时清除保存的数据
        form.addEventListener('submit', () => {
            localStorage.removeItem('formName');
            localStorage.removeItem('formEmail');
        });
    </script>
</body>
</html>

在上述代码中，我们使用 localStorage 保存表单输入框中的数据。当页面加载时，会尝试从 localStorage 中恢复数据；当输入框内容变化时，会将新的数据保存到 localStorage 中；当表单提交时，会清除保存的数据。

2. 临时购物车数据的保存

在电商网站中，用户可能会在浏览商品时将商品加入购物车，但不一定立即结算。我们可以使用 sessionStorage 来保存临时的购物车数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>临时购物车数据保存</title>
</head>
<body>
    <button onclick="addToCart('商品1')">添加商品1到购物车</button>
    <button onclick="addToCart('商品2')">添加商品2到购物车</button>
    <button onclick="showCart()">查看购物车</button>
    <script>
        function addToCart(item) {
            let cart = sessionStorage.getItem('cart');
            if (!cart) {
                cart = [];
            } else {
                cart = JSON.parse(cart);
            }
            cart.push(item);
            sessionStorage.setItem('cart', JSON.stringify(cart));
            alert(`${item} 已添加到购物车`);
        }
        function showCart() {
            const cart = sessionStorage.getItem('cart');
            if (cart) {
                const items = JSON.parse(cart);
                alert(`购物车中的商品：${items.join(', ')}`);
            } else {
                alert('购物车为空');
            }
        }
    </script>
</body>
</html>

在这个示例中，我们使用 sessionStorage 保存购物车数据。当用户点击“添加商品到购物车”按钮时，会将商品名称添加到 sessionStorage 中的购物车数组中；当用户点击“查看购物车”按钮时，会从 sessionStorage 中获取购物车数据并显示出来。

总结

存储类型	特点	应用场景
localStorage	长期保存，除非手动删除不会过期，存储大小约 5MB	表单数据的长期保存、用户偏好设置等
sessionStorage	临时保存，关闭窗口或标签页后数据清除，存储大小约 5MB	临时购物车数据、一次性表单数据等

通过合理使用 localStorage 和 sessionStorage，我们可以方便地在前端保存临时数据，提升用户体验。但需要注意的是，本地存储只能保存字符串类型的数据，如果需要保存对象或数组，需要使用 JSON.stringify() 和 JSON.parse() 进行转换。