目录
使用示例
import React, { useEffect } from 'react';
import { set as lsSet, remove as lsRemove } from '@/utils/storage' // 从utils/storage路径导入set和remove函数,这里分别被重命名为lsSet和lsRemove
import LoginForm from './loginForm'; // 导入LoginForm组件
export default function Page() { // 定义并导出名为Page的React组件
useEffect(() => { // 使用useEffect钩子处理副作用
const receiveMeg = (e: MessageEvent) => { // 定义处理接收消息的函数
if (e.origin.startsWith("http://127.0.0.1")) { // 检查消息来源是否合法
if (e.data.msg.data.vaild) { // 检查传入的数据是否有效
lsSet('token', e.data.msg.token) // 如果有效,则在localStorage中设置token
window.location.href = '/' // 导航到首页
}
}
}
window.addEventListener('message', receiveMeg, false); // 在window上注册消息监听器
return () => { // 返回一个清理函数
window.removeEventListener('message', receiveMeg) // 组件卸载时移除监听器
}
}, [])
return <LoginForm /> // 返回LoginForm组件以渲染
}
方法设置
interface Storage { // 定义Storage接口
token: string // token字符串
token_expire: string, // token过期时间
chatMessageList: ChatMessage[] // 聊天消息列表
}
type KeysWithValueType<U> = { // 定义一个泛型类型,用于找出Storage中特定类型的所有键
[K in keyof Storage]: Storage[K] extends U ? K : never; // 映射类型
}[keyof Storage];
export type KEY = 'token' | 'token_expire' // 定义token相关键的类型
export function get(key: KeysWithValueType<string>) { // 获取localStorage中某个键的值
return localStorage.getItem(key)
}
export function remove(key: KeysWithValueType<string>) { // 从localStorage中移除某个键
localStorage.removeItem(key)
}
export function set(key: KeysWithValueType<string>, value: string) { // 设置localStorage中某个键的值
localStorage.setItem(key, value)
}
export function getObject<T>(key: KeysWithValueType<T>) { // 从localStorage获取一个对象
const value = localStorage.getItem(key)
if (value)
return JSON.parse(value) as T
}
export function setObject<T>(key: KeysWithValueType<T>, value: T) { // 将一个对象存储到localStorage
localStorage.setItem(key, JSON.stringify(value))
}
export function removeObject<T>(key: KeysWithValueType<T>) { // 从localStorage移除一个对象
localStorage.removeItem(key)
}