本地存储-localStorage-存储容量与有效期-前端-HTML5-书闪BookChips

216 - 本地存储 - localStorage - 存储容量与有效期

作者：

贺及楼

成为作者

更新日期：2025-02-27 18:13:47

本地存储 - localStorage - 存储容量与有效期

在前端开发中，我们经常需要在客户端存储一些数据，以便在不同的页面或会话之间使用。HTML5 提供了几种本地存储方案，其中 localStorage 是一种非常实用且常用的方式。本文将深入探讨 localStorage 的存储容量与有效期，同时给出相关的演示代码。

什么是 localStorage？

localStorage 是 HTML5 新增的一个会话存储对象，它允许网页在浏览器中存储键值对数据。与 sessionStorage 不同，localStorage 中的数据不会随着页面会话的结束而被清除，除非手动删除，数据会一直存储在浏览器中。

localStorage 的存储容量

容量大小

不同浏览器对 localStorage 的存储容量有所不同，但通常情况下，大多数浏览器提供了大约 5MB 的存储空间。以下是一些常见浏览器的大致存储容量：
| 浏览器 | 存储容量 |
| —— | —— |
| Chrome | 约 5MB |
| Firefox | 约 5MB |
| Safari | 约 5MB |
| Edge | 约 5MB |

检测存储容量

我们可以通过编写代码来检测当前浏览器中 localStorage 的剩余可用空间。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>检测 localStorage 存储容量</title>
</head>
<body>
    <script>
        function checkStorageCapacity() {
            let testKey = 'test';
            let testValue = 'a'.repeat(1024 * 1024); // 1MB 的数据
            let storedData = '';
            let counter = 0;
            try {
                while (true) {
                    storedData += testValue;
                    localStorage.setItem(testKey, storedData);
                    counter++;
                    console.log(`已存储 ${counter}MB 数据`);
                }
            } catch (e) {
                console.log(`达到存储上限，大约存储了 ${counter}MB 数据`);
                localStorage.removeItem(testKey); // 清理测试数据
            }
        }
        checkStorageCapacity();
    </script>
</body>
</html>

在上述代码中，我们不断向 localStorage 中存储 1MB 的数据，直到达到存储上限并捕获到异常。最后，我们会输出大约存储的数据量，并清理测试数据。

localStorage 的有效期

localStorage 的一个重要特点是其数据没有明确的有效期。一旦数据被存储到 localStorage 中，它将一直保留在浏览器中，直到以下情况发生：

手动删除：可以使用 localStorage.removeItem(key) 方法删除指定键的数据，或使用 localStorage.clear() 方法清空所有数据。
```javascript
// 删除指定键的数据
localStorage.removeItem(‘username’);

// 清空所有数据
localStorage.clear();

2. **用户手动清除浏览器缓存**：当用户在浏览器设置中清除缓存数据时，`localStorage` 中的数据也会被一并清除。
### 模拟有效期
虽然 `localStorage` 本身没有有效期的概念，但我们可以通过在存储数据时添加时间戳来模拟有效期。以下是一个示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟 localStorage 有效期</title>
</head>
<body>
    <script>
        function setWithExpiry(key, value, ttl) {
            const now = new Date();
            const item = {
                value: value,
                expiry: now.getTime() + ttl
            };
            localStorage.setItem(key, JSON.stringify(item));
        }
        function getWithExpiry(key) {
            const itemStr = localStorage.getItem(key);
            if (!itemStr) {
                return null;
            }
            const item = JSON.parse(itemStr);
            const now = new Date();
            if (now.getTime() > item.expiry) {
                localStorage.removeItem(key);
                return null;
            }
            return item.value;
        }
        // 存储数据，有效期为 1 分钟（60000 毫秒）
        setWithExpiry('testData', '这是测试数据', 60000);
        // 获取数据
        const data = getWithExpiry('testData');
        if (data) {
            console.log('获取到有效数据:', data);
        } else {
            console.log('数据已过期或不存在');
        }
    </script>
</body>
</html>

在上述代码中，我们定义了两个函数 setWithExpiry 和 getWithExpiry。setWithExpiry 用于存储数据时添加过期时间，getWithExpiry 用于获取数据时检查是否过期。

总结

localStorage 是一种方便的前端本地存储方案，它提供了大约 5MB 的存储空间，并且数据没有明确的有效期，除非手动删除或用户清除浏览器缓存。我们可以通过一些技巧模拟有效期，以满足特定的业务需求。在使用 localStorage 时，需要注意存储容量的限制，避免超出上限导致数据存储失败。