Web Storage: 简介与使用指南

Web Storage 是一种客户端存储数据的本地技术，它包含两种实现：localStorage 和 sessionStorage。

1. Web Storage 概述

Web Storage 是 HTML5 的一部分，提供了两个对象来将键值对的数据存储在用户的浏览器上。这两个对象是：

localStorage: 数据在浏览器中持久化存储，不会自动过期，除非用户手动清除浏览器缓存或者开发者使用 API 清除数据。
sessionStorage: 数据只在当前会话（Session）的浏览器窗口或标签页中存储，当页面关闭时，数据将被清除。

关于这两者的主要优点有：

可以在不同页面间共享数据，使得 Web 应用程序在不同页面之间传递信息变得更加容易。
支持大量的数据存储（约为5MB），远多于传统的Cookie（约为4KB）。
仅在客户端进行数据存储，不会在HTTP请求头中传输，因此可以提高数据传输的性能。

2. localStorage 和 sessionStorage 的使用

如何将数据存储在 localStorage 或 sessionStorage 中,以下是两者的基本操作方法：

2.1 存储数据

将数据存储到 localStorage 或 sessionStorage 中，可以使用 setItem 方法。

// 使用 localStorage 对象存储数据
localStorage.setItem("username", "John");

// 使用 sessionStorage 对象存储数据
sessionStorage.setItem("age", "30");

或者您也可以用键值对的方式直接存储数据：

// 使用 localStorage 对象存储数据
localStorage.username = "John";

// 使用 sessionStorage 对象存储数据
sessionStorage.age = "30";

2.2 提取数据

如果要从 localStorage 或 sessionStorage 中获取数据，可以使用 getItem 方法。

// 从 localStorage 中获取数据
let username = localStorage.getItem("username");

// 从 sessionStorage 中获取数据
let age = sessionStorage.getItem("age");

或者直接使用 key 获取数据：

// 从 localStorage 中获取数据
let username = localStorage.username;

// 从 sessionStorage 中获取数据
let age = sessionStorage.age;

2.3 删除数据

要从 localStorage 或 sessionStorage 中删除特定的数据，可以使用 removeItem 方法。

// 删除 localStorage 中的数据
localStorage.removeItem("username");

// 删除 sessionStorage 中的数据
sessionStorage.removeItem("age");

或者直接delete

// 删除 localStorage 中的数据
delete localStorage.username;

// 删除 sessionStorage 中的数据
delete sessionStorage.age;

2.4 清除全部数据

如果要清除 localStorage 或 sessionStorage 中储存的所有数据，可以使用 clear 方法。

// 清除 localStorage 中的所有数据
localStorage.clear();

// 清除 sessionStorage 中的所有数据
sessionStorage.clear();

3. 事件监听

在多个标签页或者窗口操作同一个Web Storage时，可以利用 storage 事件实现跨页面通信。

下面的代码段展示了如何监听 localStorage 中数据的变化。

window.addEventListener("storage", (event) => {
  console.log("Web Storage数据变化：", event.key, event.newValue);
});

event 包含以下属性：

key：发生变化的数据的键。
newValue：数据的新值。
oldValue：数据的旧值。
storageArea：数据变化发生的存储区域（localStorage 或 sessionStorage）。


{
  isTrusted: true
  bubbles: false
  cancelBubble: false
  cancelable: false
  composed: false
  currentTarget: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
  defaultPrevented: false
  eventPhase: 0
  key: "name"
  newValue: "ma"
  oldValue: "jack"
  returnValue: true
  srcElement: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
  storageArea: Storage {userStore: '{"token":"","hotel":{"companyName":"","companyCode…me":"","permissionsHotelList":[],"isGroup":false}', name: 'ma', age: '18', gender: 'man', sex: '男', …}
  target: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
  timeStamp: 1336412
  type: "storage"
  url: "http://dev-pms.shands.cn/login"
}

此时重开标签页，不同域修改sessionStorage的age，修改localStorage的name

只有localStorage变化监听

需要注意的是，storage事件仅在其他页面或标签页改变Web Storage时监听，不能监听当前页面中的数据变化。

4. 总结

Web Storage 提供了一种便捷且灵活的客户端存储方案，可以帮助我们在客户端保存和获取用户数据，用于提高用户体验和减轻服务器负担。与传统的 Cookie 相比，Web Storage 有更大的存储容量，并且不会随着每个 HTTP 请求发送到服务器。Web Storage 中的数据可以长期存储（localStorage）或者会话期间有效（sessionStorage），非常适合保存用户设置、历史记录、表单数据等。同时，Web Storage 也有其使用限制：不能存储敏感信息、需注意存储容量等。其使用时应避免重复代码、尽量避免使用全局作用域等。Web Storage 的使用可以提高页面加载速度和响应速度，从而提高用户体验。

web系列之Web Storage