想问一下 pinia 持久化到 localStorage 如何实现有效期

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

RT ，本人做了款小游戏，把玩家信息存到了 store 里。但是发现如果某个玩家意外退出了，且游戏对局结束了，当这个玩家再打开页面的时候还会被识别为在游戏中，因为他没有经历正常的结束游戏代码，没有去移除掉失效的玩家信息。当然每次重载游戏的时候用玩家信息去核实游戏状态也可以。但是我想知道这个持久化到底能不能设置有效期

pinia

localStorage

有效期

10 条回复 • 2025-06-16 08:55:35 +08:00

Troevil

2 天前

自己封装一下

第一种用额外的 key ，val 存储 key 的过期时间
```typescript
// stores/user.ts
import { defineStore } from 'pinia'

const EXPIRATION_KEY = '__user_store_expire__'
const EXPIRATION_DURATION = 1000 * 60 * 60 // 1 小时（可修改）

export const useUserStore = defineStore('user', {
state: () => ({
name: '',
token: '',
}),
persist: {
key: 'user', // 本地存储的 key
storage: localStorage,
afterRestore: (context) => {
const expireTime = parseInt(localStorage.getItem(EXPIRATION_KEY) || '0')
const now = Date.now()
if (now > expireTime) {
console.log('user store expired, resetting...')
context.store.$reset()
localStorage.removeItem(EXPIRATION_KEY)
}
},
// 在每次存储后写入过期时间
beforeRestore: () => {
const expireTime = Date.now() + EXPIRATION_DURATION
localStorage.setItem(EXPIRATION_KEY, expireTime.toString())
}
},
})

```

第二种直接 warpper 原数据
```
// stores/user.ts
import { defineStore } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate'

// 设置过期时间（单位：毫秒）
const EXPIRE_TIME = 1000 * 60 * 60 // 1 小时

// 封装一个带过期逻辑的 storage
const expiredStorage = {
getItem: (key: string): string | null => {
const raw = localStorage.getItem(key)
if (!raw) return null

try {
const parsed = JSON.parse(raw)
const now = Date.now()

if (parsed.expire && now > parsed.expire) {
localStorage.removeItem(key)
return null
}

return JSON.stringify(parsed.data)
} catch (e) {
return null
}
},

setItem: (key: string, value: string): void => {
const payload = {
data: JSON.parse(value),
expire: Date.now() + EXPIRE_TIME,
}
localStorage.setItem(key, JSON.stringify(payload))
},

removeItem: (key: string): void => {
localStorage.removeItem(key)
},
}

```