如何在JavaScript中使用LocalStorage保存和检索数据

LocalStorage允许开发者在用户浏览器中持久存储键值数据。它对于存储用户偏好、缓存API响应以及在会话之间维护应用程序状态非常有用。

理解LocalStorage

LocalStorage是Web Storage API的一部分，提供了存储、检索和删除数据的方法：

localStorage.setItem('theme', 'dark'); // 存储数据
const theme = localStorage.getItem('theme'); // 检索数据
localStorage.removeItem('theme'); // 删除特定项
localStorage.clear(); // 清除所有存储的数据

LocalStorage会持久保存数据，直到明确删除。数据以字符串形式存储，因此对于对象或数组，请使用JSON.stringify()和JSON.parse()：

const settings = { theme: 'dark', fontSize: 16 };
localStorage.setItem('settings', JSON.stringify(settings));
const savedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(savedSettings.theme); // ""dark""

用例1：存储用户偏好

LocalStorage常用于存储UI设置，如主题偏好。

// 保存主题偏好
localStorage.setItem('theme', 'dark');

// 在页面加载时应用存储的偏好
const savedTheme = localStorage.getItem('theme');
if (savedTheme) applyTheme(savedTheme);

用例2：缓存API响应

缓存API响应可减少不必要的网络请求并提高性能。

const cacheKey = 'apiData';
const maxAge = 60 * 60 * 1000; // 1小时

const cached = localStorage.getItem(cacheKey);
if (cached) {
    const { data, timestamp } = JSON.parse(cached);
    if (Date.now() - timestamp < maxAge) {
        renderData(data);
    } else {
        localStorage.removeItem(cacheKey);
    }
}

if (!localStorage.getItem(cacheKey)) {
    fetch('/api/data')
        .then(response => response.json())
        .then(data => {
            renderData(data);
            localStorage.setItem(cacheKey, JSON.stringify({ data, timestamp: Date.now() }));
        });
}

LocalStorage与其他Web存储选项的比较

• SessionStorage：与LocalStorage API相同，但在标签页关闭时数据会被清除。
• IndexedDB：支持大规模数据存储和结构化查询，但更复杂。
• Cookies：用于服务器端存储，自动随HTTP请求发送。

限制和最佳实践

• 安全风险：数据可通过JavaScript访问；不要存储敏感信息。
• 存储限制：每个源约5MB；超过此限制会抛出QuotaExceededError。
• 同步访问：大量读/写可能会阻塞主线程。
• 无自动过期：如有需要，必须手动实现过期逻辑。
• 使用命名空间：为键添加前缀以避免冲突（使用MyApp_theme而非theme）。

结论

LocalStorage是一个强大而简单的工具，用于持久化存储少量客户端数据。它最适合存储用户偏好和缓存轻量级API响应。然而，开发者必须注意其安全限制，并确保正确处理数据以避免性能问题。

常见问题