HTML | 窗口 sessionStorage() 属性

简介

在 HTML5 中，一个网页通过 sessionStorage 属性可以在当前会话中存储数据，这些数据只能被同一个窗口中的 JavaScript 代码访问到，当页面关闭时，数据将会被清除。 sessionStorage 用于存储临时性的数据，例如用户浏览过的页面、用户在表单中输入的数据等等。

使用方法

设置 sessionStorage

sessionStorage 属性可以通过 window.sessionStorage 或 sessionStorage 访问。以下是一些设置 sessionStorage 的例子：

// 根据键名（key）来存储值（value）
sessionStorage.setItem('name', 'John Doe');
sessionStorage.setItem('age', '30');

// 存储对象：将对象转换为 JSON 格式进行存储
var person = { name: 'Mary Jane', age: 25 };
sessionStorage.setItem('person', JSON.stringify(person));

获取 sessionStorage

获取 sessionStorage 需要指定对应的 key。以下是一些获取 sessionStorage 的例子：

// 获取单个值
const name = sessionStorage.getItem('name');
console.log(name); // 输出："John Doe"

// 获取对象
const person = JSON.parse(sessionStorage.getItem('person'));
console.log(person); // 输出：{ name: 'Mary Jane', age: 25 }

// 获取所有的存储值
for (let i = 0; i < sessionStorage.length; i++) {
  const key = sessionStorage.key(i);
  const value = sessionStorage.getItem(key);
  console.log(`${key}: ${value}`);
}

删除 sessionStorage

可以使用 removeItem() 方法来删除某个指定的 sessionStorage：

sessionStorage.removeItem('name'); // 删除单个值

使用 clear() 方法可以删除所有的 sessionStorage：

sessionStorage.clear(); // 删除全部的数据

注意事项

• sessionStorage 数据的存储大小和生命周期限制于浏览器窗口。如果用户在同一个浏览器中打开多个窗口或标签页，那些窗口共享同一个 sessionStorage。
• sessionStorage 存储的值只能是字符串类型，如果需要存储对象，则需要先将对象转换为字符串类型，然后再存储。
• sessionStorage 数据会在关闭网页时清除。如果需要长期存储数据，可以考虑使用 localStorage 或 IndexedDB。

结语

通过 sessionStorage 来存储数据可以让你实现一些在同一页面间传递数据的任务，如保留表单输入在页面刷新后数据不丢失等。同时，使用 sessionStorage 也可以减轻服务器的压力。当然，由于它的生命周期限制较短，它并不适合存储一些用户偏好或其他持久性数据。