sessionStorage 的使用示例

sessionStorage 的使用与 localStorage 非常相似，但它有一个关键的区别：sessionStorage 存储的数据在页面会话期间有效，即数据在页面打开期间存在，当页面关闭（无论是通过关闭浏览器标签页、窗口还是整个浏览器）后，数据就会被删除。以下是一个使用 sessionStorage 的基本示例：

存储数据

使用 setItem(key, value) 方法来存储数据。同样地，value 必须是一个字符串，如果需要存储非字符串数据，需要先使用 JSON.stringify() 方法进行转换。

// 存储一个字符串  
sessionStorage.setItem('sessionId', '12345');  
  
// 存储一个对象（需要先转换为字符串）  
var userSession = { id: '67890', name: 'Alice' };  
sessionStorage.setItem('user', JSON.stringify(userSession));

获取数据

使用 getItem(key) 方法来获取之前存储的数据。如果找到了对应的 key，则返回其 value（作为字符串）。如果之前存储的是对象或数组，并使用 JSON.stringify() 进行了转换，那么在获取时需要使用 JSON.parse() 方法将其转换回原始数据类型。

// 获取并显示字符串  
var sessionId = sessionStorage.getItem('sessionId');  
console.log(sessionId); // 输出: 12345  
  
// 获取并解析对象  
var storedUser = sessionStorage.getItem('user');  
var userSession = JSON.parse(storedUser);  
console.log(userSession.name); // 输出: Alice

删除数据

使用 removeItem(key) 方法来删除存储在 sessionStorage 中的特定数据项。

// 删除用户会话信息  
sessionStorage.removeItem('user');  
  
// 尝试获取已删除的用户会话信息，将返回 null  
var deletedUser = sessionStorage.getItem('user');  
console.log(deletedUser); // 输出: null

页面会话的结束

请注意，sessionStorage 中的数据在页面会话结束时（即用户关闭浏览器标签页或窗口时）会被删除。如果用户在同一个标签页中打开了新的页面或重新加载了当前页面，sessionStorage 中的数据仍然可用，因为页面会话被认为是持续的。但是，如果用户在新的标签页或窗口中打开相同的网站，他们将无法访问之前标签页或窗口中 sessionStorage 存储的数据，因为每个标签页或窗口都有自己独立的 sessionStorage。

清除所有数据

虽然 sessionStorage 会在页面会话结束时自动清除所有数据，但如果需要在页面会话期间清除所有数据，可以使用 clear() 方法。然而，在大多数情况下，这通常不是必要的，因为页面会话结束时数据自然会被清除。

// 清除 sessionStorage 中的所有数据（通常不需要，因为会话结束时会自动清除）  
sessionStorage.clear();

请记住，由于 sessionStorage 的数据存储在用户的浏览器中，并且与特定的页面会话相关联，因此它通常用于存储那些只需要在当前会话中保持的数据。