我面试最喜欢问的开放题：如何严谨二次封装 localStorage？_vue.js

我面试最喜欢问的开放题：如何严谨二次封装 localStorage？

2024-03-13 15:09前端之神 vue.js

最近我在面试中，喜欢问一道有关于 hooks 的开放问题：二次封装一个 loaclStorage 的 hooks 时，需要考虑哪些问题呢？

在很多公司中，内部都会封装一些适用于公司内部业务的方法库来提高整个团队的开发效率，比如：

防抖节流
懒加载、虚拟滚动
dom增删改查、移动、拖拽
管理状态

而在 Vue3 项目中，这种方法库表现为：hooks库，市面上有很多优秀的库，比如：vueuse。

最近我在面试中，喜欢问一道有关于 hooks 的开放问题：二次封装一个 loaclStorage 的 hooks 时，需要考虑哪些问题呢？

其实这是一道很简单的题，只不过想考考面试者在做业务的时候，会不会考虑更多的边界情况~接下来说说我对这个问题的小小的理解（可能也不是很全面）。

我面试最喜欢问的开放题：如何严谨二次封装 localStorage？

注意命名，防止污染

比如我现在一个域名下有两个子项目：

A项目
B项目

且这两个项目都需要存储 userInfo，那要怎么防止这两组数据互相污染呢？所以需要注意命名，在存储的时候加上对应的项目名前缀，或者其他标识符，保证这组数据是唯一的

const PROJECT_NAME = 'test-project'
localStorage.setItem(
  `${PROJECT_NAME}_userInfo`,
  JSON.stringify({ name: 'lsx' })
)

注意版本，迭代防范

请看一个例子，假如我们存储一段信息，类型是 string

// 存数据
const set = () => {
  const info = get()
  if (!info) {
    localStorage.setItem(
      `${PROJECT_NAME}_info`,
      'info_string'
    )
  }
}

// 取数据
const get = () => {
  const info = localStorage.getItem(
    `${PROJECT_NAME}_info`
  )
  return info
}

然后项目上线了一段时间，但是这个时候，突然决定要换成 object 类型了，这时候对应的存取方法也变了

// 存数据
const set = () => {
  const info = get()
  if (!info) {
    localStorage.setItem(
      `${PROJECT_NAME}_info`,
      JSON.stringify({ name: 'lsx' })
    )
  }
}

// 取数据
const get = () => {
  const info = localStorage.getItem(
    `${PROJECT_NAME}_info`
  )
  return JSON.parse(info)
}

但是这样其实是有隐患的，因为项目已经上线了一段时间，有些用户已经存过这个数据了，且存的是 string 类型，但是新版本上线之后，取数据却用了 object 的方式去取数据，这就导致了JSON.parse(字符串)会报错，影响正常的业务逻辑~

所以最好是加一个版本号，或者做一下错误兼容，这样就能避免了~

const PROJECT_NAME = 'test-project'
// 每次升级时改变版本号，规则自己定
const VERSION = 1

// 存数据
localStorage.setItem(
  `${PROJECT_NAME}_userInfo_${VERSION}`,
  JSON.stringify({ name: 'lsx' })
)

// 取数据
localStorage.getItem(
  `${PROJECT_NAME}_userInfo_${VERSION}`
)

时效性，私密性

时效性，那就是给存进去的数据加一个时效，过了某个时间，这个数据就时效了，方法就是每次存数据进去的时候，加一个时间戳：

// 原来
localStorage.setItem(
  `${PROJECT_NAME}_userInfo`,
  JSON.stringify({ name: 'lsx' })
)

const TIME_OUT = 3 * 60 * 60 * 1000
// 加时间戳
localStorage.setItem(
  `${PROJECT_NAME}_userInfo`,
  JSON.stringify({
    data: { name: 'lsx' },
    // 记录当前时间
    time: new Date().getTime()
  })
)

// 取数据时判断时间戳
const get = () => {
  let info = localStorage.getItem(
    `${PROJECT_NAME}_userInfo_${VERSION}`
  )
  info = JSON.parse(info)
  const now = new Date().getTime()
  if (now - info.time >= TIME_OUT) {
    localStorage.removeItem(
      `${PROJECT_NAME}_userInfo_${VERSION}`
    )
    return null
  }
  return info
}

有一些数据我们不得不存在 localStorage 中，但是又不想被用户看到，这时候就需要进行加密了（加密规则自己定）：

// 加密函数
const encrypt = (v) => {}
// 解密函数
const decrypt = (v) => {}

// 存数据
localStorage.setItem(
  `${PROJECT_NAME}_userInfo_${VERSION}`,
  // 加密
  encrypt(JSON.stringify({ name: 'lsx' }))
)

// 取数据 解密
decrypt(localStorage.getItem(
  `${PROJECT_NAME}_userInfo_${VERSION}`
))

兼容 SSR

SSR 就是服务端渲染，是在服务端运行代码，拼接成一个页面，发送到浏览器去展示出来，所以在服务端是使用不了 localStorage 的，因为不是浏览器环境，所以你像封装一个比较通用的 localStorage，得兼顾 SSR 的情况：

// 在 SSR 中使用对象替代 localStorage
const SSRStorage = {
  map: {},
  setItem(v) {
    this.map[key] = v
  },
  getItem(key) {
    return this.map[key]
  }
}
let storage = null
// 判断环境
if (!window) {
  storage = SSRStorage
} else {
  storage = window.localStorage
}

原文地址：https://mp.weixin.qq.com/s?__biz=Mzg2NjY2NTcyNg==&mid=2247493293&idx=2&sn=fa43d7d9e9bcf6508635c188657016f5