Back

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

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

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

要点

  • LocalStorage是一个简单的键值存储系统,可在页面重新加载和浏览器重启后保持数据。
  • 由于安全考虑,不应用于存储敏感数据。
  • 适用于存储用户偏好和轻量级API响应缓存。
  • 替代选项包括SessionStorage(临时)和IndexedDB(用于复杂或大规模数据存储)。

理解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响应。然而,开发者必须注意其安全限制,并确保正确处理数据以避免性能问题。

常见问题

不会,除非手动清除,否则LocalStorage数据会无限期保存。

通常每个源约5MB,具体取决于浏览器。

不安全,LocalStorage可被JavaScript访问,不应用于存储敏感数据。

LocalStorage在会话之间保持数据,而SessionStorage在标签页关闭时清除数据。

对于小型键值对使用LocalStorage;对于复杂或大规模存储,IndexedDB更好。

Listen to your bugs 🧘, with OpenReplay

See how users use your app and resolve issues fast.
Loved by thousands of developers