给 localStorage 添加过期时间

发表于 更新于 分类于 阅读次数：

浏览器提供的 localStorage 本身是没有过期时间的，但是我们可以通过简单的封装人为的给它添加一个过期时间：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
const exp = 60 * 60 * 24 * 1000 // 过期时间一天
const prefix = 'prefix_' // 前缀，主要用于避免冲突

/**
 * 读取值
 * @param {string} keyName    - 字段名
 * @param {any}    defaultVal - 默认值，在某些情况下非常有用，比如返回对象时可免除空值判断
 * @returns {any}
 */
export function getStoreValue(keyName, defaultVal = '') {
  const data = localStorage.getItem(prefix + keyName)

  if (data == null || data === '') {
    return defaultVal
  }
  
  try {
    const jsonData = JSON.parse(data)
    if (Date.now() - jsonData.time >= exp) {
      removeStoreValue(keyName)
      return defaultVal
    }
    return jsonData.value
  } catch (error) {
    return defaultVal
  }
}

/**
 * 写入值
 * @param {string} keyName - 字段名
 * @param {any}    value   - 待存储的值
 */
export function setStoreValue(keyName, value) {
  localStorage.setItem(prefix + keyName, JSON.stringify({ value, time: Date.now() }))
}

/**
 * 删除值
 * @param {string} keyName - 字段名
 */
export function removeStoreValue(keyName) {
  localStorage.removeItem(prefix + keyName)
}