Web Storage API 是一种浏览器提供的客户端存储解决方案，允许网页在用户的浏览器中存储数据。它提供了一种简单而有效的方式来存储和检索数据，而不需要将数据发送到服务器。Web Storage API 包括两种存储类型：localStorage 和 sessionStorage。

Web Storage API 的组成

1. localStorage

• 持久性：存储在 localStorage 中的数据是持久的，即使在浏览器关闭后，数据也不会丢失，除非用户或脚本显式地删除它。

• 容量：通常每个域名有 5MB 左右的存储空间。

• 用法：适用于需要长期存储的数据，如用户设置、游戏进度等。

• 特点：数据在页面刷新或关闭后仍然存在，且所有窗口和标签页共享相同的数据。

2. sessionStorage

• 会话性：存储在 sessionStorage 中的数据仅在当前浏览器窗口或标签页的会话期间有效。当窗口或标签页关闭时，数据会被自动删除。

• 容量：通常每个域名有 5MB 左右的存储空间。

• 用法：适用于需要在单个会话中临时存储的数据，如表单数据、页面状态等。

• 特点：数据在页面刷新后仍然存在，但当窗口或标签页关闭时会被删除，且不同窗口或标签页之间的数据是隔离的。

Web Storage API 的基本操作

存储数据

• setIem(key, value)：将数据存储到存储空间中。key 是数据的键名，value 是要存储的数据值（必须是字符串类型）。

  --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

  localStorage.setItem('key', 'value');
  sessionStorage.setItem('key', 'value');

读取数据

• getItem(key)：根据键名获取存储在存储空间中的数据。如果键不存在，返回 null。

  --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

  let value = localStorage.getItem('key');
  let value = sessionStorage.getItem('key');

删除数据

• removeItem(key)：根据键名删除存储在存储空间中的数据。如果键不存在，不会有任何效果。

  --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

  localStorage.removeItem('key');
  sessionStorage.removeItem('key');

清空所有数据

• clear()：删除存储空间中的所有数据。

  --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

  localStorage.clear();
  sessionStorage.clear();

存储非字符串类型的数据

由于 Web Storage 只能存储字符串类型的数据，因此在存储对象或数组等非字符串类型的数据时，需要先将其转换为字符串。

• 存储对象：

  --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

  let user = { name: 'Kimi', age: 30 };
  localStorage.setItem('user', JSON.stringify(user));

• 读取对象：

  --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

  let userStr = localStorage.getItem('user');
  let user = JSON.parse(userStr);
  console.log(user); // 输出: { name: 'Kimi', age: 30 }

注意事项

• 数据类型：Web Storage 只能存储字符串类型的数据，因此在存储和读取非字符串类型的数据时，需要使用 JSON.stringify 和 JSON.parse 进行转换。

• 容量限制：每个域名的 Web Storage 容量通常为 5MB 左右，超出容量时会抛出异常。

• 安全性：由于 Web Storage 存储在客户端，不适合存储敏感信息，如密码、密钥等，因为这些数据可能被恶意脚本访问或窃取。

• 同源策略：Web Storage 遵循同源策略，即只有来自相同源（协议、域名和端口）的页面才能访问同一存储空间。

通过使用 Web Storage API，你可以方便地在客户端存储和检索数据，提高网页的响应速度和用户体验。