SessionStorageHelper 使用说明

SessionStorageHelper 是一个基于 sessionStorage 封装的 JavaScript 工具类，提供了简洁的 API 用于存储、读取、更新和删除数据，并支持数据的有效期设置。

功能概览

• setItem：存储键值对数据，并支持设置数据的有效期。
• getItem：获取存储的数据，若数据已过期则返回 null。
• removeItem：删除指定的键值对。
• clearAll：清空所有键值对。
• updateItem：更新已有键值对的值和有效期。
• hasItem：判断指定键是否存在。

快速开始

1. 引入 SessionStorageHelper

确保将 SessionStorageHelper.js 文件引入到您的项目中，并导入到需要使用的文件中：

import SessionStorageHelper from './SessionStorageHelper'

2. 基本用法

设置键值对 (setItem)

使用 setItem 方法可以在 sessionStorage 中存储键值对数据，并且可以指定有效期。

// 存储数据 "userToken" 并设置有效期为 10 秒
SessionStorageHelper.setItem('userToken', 'abc123', 10)

• 参数：
  • key (字符串)：存储的键名。
  • value (任意类型)：存储的值。
  • ttl (数字，可选)：有效期，单位为秒。若不设置，数据会在会话期内一直有效。

获取键值对 (getItem)

使用 getItem 方法可以获取指定键的数据。如果数据过期或不存在，则返回 null。

const userToken = SessionStorageHelper.getItem('userToken')
if (userToken) {
	console.log('用户 Token:', userToken)
} else {
	console.log('数据已过期或不存在')
}

删除键值对 (removeItem)

使用 removeItem 方法可以删除指定键的数据。

SessionStorageHelper.removeItem('userToken')

清空所有数据 (clearAll)

使用 clearAll 方法可以清空 sessionStorage 中的所有数据。

SessionStorageHelper.clearAll()

更新键值对 (updateItem)

使用 updateItem 方法可以更新指定键的数据和有效期。

// 更新 "userToken" 的值并重新设置有效期为 15 秒
SessionStorageHelper.updateItem('userToken', 'newTokenValue', 15)

检查键是否存在 (hasItem)

使用 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，尤其适合需要在当前会话中存储临时数据并设置有效期的场景。