SessionStorageHelper
是一个基于 sessionStorage
封装的 JavaScript 工具类,提供了简洁的 API 用于存储、读取、更新和删除数据,并支持数据的有效期设置。
- setItem:存储键值对数据,并支持设置数据的有效期。
-
getItem:获取存储的数据,若数据已过期则返回
null
。 - removeItem:删除指定的键值对。
- clearAll:清空所有键值对。
- updateItem:更新已有键值对的值和有效期。
- hasItem:判断指定键是否存在。
确保将 SessionStorageHelper.js
文件引入到您的项目中,并导入到需要使用的文件中:
import SessionStorageHelper from './SessionStorageHelper'
使用 setItem
方法可以在 sessionStorage
中存储键值对数据,并且可以指定有效期。
// 存储数据 "userToken" 并设置有效期为 10 秒
SessionStorageHelper.setItem('userToken', 'abc123', 10)
-
参数:
-
key
(字符串):存储的键名。 -
value
(任意类型):存储的值。 -
ttl
(数字,可选):有效期,单位为秒。若不设置,数据会在会话期内一直有效。
-
使用 getItem
方法可以获取指定键的数据。如果数据过期或不存在,则返回 null
。
const userToken = SessionStorageHelper.getItem('userToken')
if (userToken) {
console.log('用户 Token:', userToken)
} else {
console.log('数据已过期或不存在')
}
使用 removeItem
方法可以删除指定键的数据。
SessionStorageHelper.removeItem('userToken')
使用 clearAll
方法可以清空 sessionStorage
中的所有数据。
SessionStorageHelper.clearAll()
使用 updateItem
方法可以更新指定键的数据和有效期。
// 更新 "userToken" 的值并重新设置有效期为 15 秒
SessionStorageHelper.updateItem('userToken', 'newTokenValue', 15)
使用 hasItem
方法可以检查指定键的数据是否存在且有效。
if (SessionStorageHelper.hasItem('userToken')) {
console.log('userToken 存在且有效')
} else {
console.log('userToken 不存在或已过期')
}
-
sessionStorage 作用域:每个页面的
sessionStorage
仅在当前标签页或窗口有效,且不同的页面(即使是同源)之间不会共享sessionStorage
数据。 -
有效期单位:
ttl
的单位为秒。若不指定ttl
参数,则数据在会话期内保持有效,直到标签页或窗口关闭。
import SessionStorageHelper from './SessionStorageHelper'
// 设置数据
SessionStorageHelper.setItem('username', 'JohnDoe', 30) // 有效期 30 秒
// 获取数据
const username = SessionStorageHelper.getItem('username')
console.log('用户名:', username)
// 更新数据
SessionStorageHelper.updateItem('username', 'JaneDoe', 60)
// 检查数据是否存在
if (SessionStorageHelper.hasItem('username')) {
console.log('用户名存在且有效')
} else {
console.log('用户名不存在或已过期')
}
// 删除数据
SessionStorageHelper.removeItem('username')
// 清空所有数据
SessionStorageHelper.clearAll()
SessionStorageHelper
为 sessionStorage
的常用操作提供了更便捷的 API,尤其适合需要在当前会话中存储临时数据并设置有效期的场景。