localStorage封装及替代方案

localStorage 封装

在web开发过程中，我们经常使用到 localStorage 将我们的数据本地缓存，但在有些时候，如（隐私模式下），localStorage 是不可用的，甚至使用过程会出错，这时候就需要我们进行 localStorage 的封装，以及不可用的时候的替代方案。我这边使用的是 cookie 作为代替方案

代码实现

checkLocalStorageSupported 用于来判断 localStorage 是否支持。

// 检测 localStorage 是否可用
export const checkLocalStorageSupported = (): boolean => {
  try {
    window.localStorage.setItem('checkLocalStorageSupported', 'checkLocalStorageSupported')
    window.localStorage.removeItem('checkLocalStorageSupported')
    return true
  } catch (e) {
    return false
  }
}

getItem方法

// 获取值
export const getItem = (key: string): string | null => {
  if (checkLocalStorageSupported()) {
    // 使用 localStorage
    return window.localStorage.getItem(key)
  } else {
    // 不可用采用 cookie  作为替代方案
    let result = ''
    const name = `${key}=`
    const cookieList = document.cookie.split(';')
    for(let i=0; i< cookieList.length; i++) {
      const c = cookieList[i].trim()
      if (c.indexOf(name) === 0) {
        result = c.substring(name.length, c.length)
        break
      }
    }
    return result
  }
}

setItem 方法

// 设置值
export const setItem = (key: string, value: string) => {
  if (checkLocalStorageSupported()) {
    window.localStorage.setItem(key, value)
  } else {
    const d = new Date()
    d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000)) // 设置一个月过期时间
    const expires = `expires=${d.toUTCString()}`
    document.cookie = `${key}=${value}; ${expires}`
  }
}

removeItem 方法

// 删除值
export const removeItem = (key: string) => {
  if (checkLocalStorageSupported()) {
    window.localStorage.removeItem(key)
  } else {
    const d = new Date()
    d.setTime(d.getTime() - 1) // 立即过期
    const expires = `expires=${d.toUTCString()}`
    document.cookie = `${key}=; ${expires}`
  }
}