Web存储API详解：localStorage、sessionStorage及其他

想象一下 Web 存储的应用场景

假设您正在开发一个待办事项列表应用程序。用户辛苦地输入了一整天的任务，点击刷新后却发现所有任务都消失了。这种情况是不是让人感到非常沮丧？这时候，Web 存储 API 就派上用场了。这些工具允许您在浏览器中存储数据，即使用户关闭了选项卡或浏览器，您的应用程序仍然能够记住用户的任务、偏好等信息。

在本指南中，我们将详细探讨 sessionStorage 和 IndexedDB，并说明它们的适用场景和使用方法。通过学习这些内容，您将能够开发出更加智能、响应迅速的 Web 应用程序。

简介：Web 存储 API 的作用

可以将应用程序的数据想象成文件柜中的一堆笔记。有些笔记（如用户偏好）需要永久保存，而另一些笔记（如购物车中的临时数据）在关闭应用程序时就可以清除。Web 存储 API 就像是帮助您高效管理这些“文件柜”的工具。

Web 存储 API 概述

以下是 Web 存储 API 的三种主要类型：localStorage、sessionStorage 和 IndexedDB。它们各有特点和适用场景。

1. localStorage：持久化存储

• 它是什么：
  localStorage 是一种简单的键值对存储机制，即使浏览器关闭后，数据仍然会保留。

• 适用场景：
  非常适合存储用户偏好、主题设置或其他不需要过期的数据。

示例代码：

// 保存数据到 localStorage
localStorage.setItem('theme', 'dark');

// 从 localStorage 获取数据
const theme = localStorage.getItem('theme');
console.log(theme); // 输出: dark// 从 localStorage 删除数据
localStorage.removeItem('theme');

2. sessionStorage：会话级存储

• 它是什么：
  sessionStorage 与 localStorage 类似，但数据仅在浏览器会话期间有效。一旦关闭选项卡或浏览器，数据就会被清除。

• 适用场景：
  适用于存储表单输入、页面状态等临时数据。

示例代码：

// 保存数据到 sessionStorage
sessionStorage.setItem('draft', 'This is a draft note');

// 从 sessionStorage 获取数据
const draft = sessionStorage.getItem('draft');
console.log(draft); // 输出: This is a draft note// 从 sessionStorage 删除数据
sessionStorage.removeItem('draft');

3. IndexedDB：浏览器内的数据库

• 它是什么：
  IndexedDB 是一个低级 API，用于存储大量结构化数据。它支持键值对存储，并允许执行复杂的查询操作。

• 适用场景：
  非常适合离线应用程序、大型数据集或复杂的数据结构。

示例代码：

const request = indexedDB.open('notesDB', 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  db.createObjectStore('notes', { keyPath: 'id', autoIncrement: true });
};request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction('notes', 'readwrite');
  const store = transaction.objectStore('notes');  store.add({ id: 1, content: 'This is a note' });
};

如何选择合适的 Web 存储 API

根据不同的需求选择合适的存储方式：

• localStorage：
  最适合长期存储，如用户偏好、主题设置等。

• sessionStorage：
  最适合临时存储，如表单输入或页面状态等仅在会话期间有效的数据。

• IndexedDB：
  最适合存储复杂或大型数据集，例如离线应用程序或需要高级查询功能的数据。

实际示例：构建一个使用多种存储 API 的笔记应用

以下是一个简单的笔记应用示例，展示如何结合使用 localStorage、sessionStorage 和 IndexedDB。

功能说明：

1. sessionStorage：在提交笔记之前临时保存草稿。
2. localStorage：保存用户偏好设置，例如黑暗模式。
3. IndexedDB：永久存储已提交的笔记。

HTML 代码：

  
  


  
  保存草稿
  提交笔记

JavaScript 代码（app.js）：

// 保存草稿到 sessionStorage
document.getElementById('saveDraft').addEventListener('click', () => {
  const draft = document.getElementById('noteDraft').value;
  sessionStorage.setItem('noteDraft', draft);
  alert('草稿已保存');
});

// 提交笔记并存储到 IndexedDB
document.getElementById('submitNote').addEventListener('click', () => {
  const draft = sessionStorage.getItem('noteDraft');
  if (!draft) {
    alert('没有草稿可提交');
    return;
  }  const request = indexedDB.open('notesDB', 1);  request.onupgradeneeded = function(event) {
    const db = event.target.result;
    db.createObjectStore('notes', { keyPath: 'id', autoIncrement: true });
  };  request.onsuccess = function(event) {
    const db = event.target.result;
    const transaction = db.transaction('notes', 'readwrite');
    const store = transaction.objectStore('notes');
    store.add({ content: draft });
    sessionStorage.removeItem('noteDraft');
    alert('笔记已提交');
  };
});

结论：在项目中尝试 Web 存储 API

每种 Web 存储 API 都有其独特的优势。localStorage 和 sessionStorage 非常适合小型项目，而 IndexedDB 则是复杂应用程序的理想选择。通过合理使用这些工具，您可以开发出更高效、更智能的 Web 应用程序，同时提升用户体验。

通过学习和实践这些 API，您将能够在下一个项目中轻松实现数据存储功能。

原文链接: https://www.rajeshdhiman.in/blog/web-storage-apis-localstorage-sessionstorage-indexeddb