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
的数据存储在用户的浏览器中,并且与特定的页面会话相关联,因此它通常用于存储那些只需要在当前会话中保持的数据。