js本地存储二次封装

时间:2022-09-27 皮皮盐人气:0

前言

平时在开发的中，发现身边同事在使用localStorage和sessionStorage的时候，喜欢在代码里面直接调用，举个的栗子：

function login() {
    //...请求
    const userInfo = {userId: 123, userName: '张三'}
    sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
}
function getUserInfo() {
    return JSON.parse(sessionStorage.getItem('userInfo'))
}

并不是觉得直接调用不好，但总觉得这种写法不够语义化，于是将其进行封装，这里参考了后端java同事的实体类的逻辑。

定义恒量的键名

这里我们将要使用到的key存储下来，新建一个叫constant-storage.js的文件，对外暴露一些key的键名，也方便后期统一修改，这里因为都是恒量，所以名称我们都用大写表示。

export const USER_INFO = 'userInfo'

下层实现

这里我们开始定义处理localStorage和sessionStorage的类，首先给这个类定义基本的存储方法，set 、get、clear，对最基本的逻辑进行一个封装，这里用sessionStorage做个例子：

class Session {
  constructor() {
    this.store = window.sessionStorage
  }
  set(key, value) {
    this.store.setItem(key, value)
  }
  get(key) {
    return this.store.getItem(key)
  }
  clear(key) {
    this.store.removeItem(key)
  }
  clearAll() {
    this.store.clear()
  }
}

然后我们在开始封装一些业务功能，例如存取用户信息userInfo，从恒量中取出key，再将这个类，实例化暴露出去供外部调用。

import { USER_INFO } from './constant-storage'
class Session {
  constructor() {
    this.store = window.sessionStorage
  }
  set(key, value) {
    this.store.setItem(key, value)
  }
  get(key) {
    return this.store.getItem(key)
  }
  clear(key) {
    this.store.removeItem(key)
  }
  clearAll() {
    this.store.clear()
  }

  // 用户信息
  getUserInfo() {
    const userInfo = this.get(USER_INFO)
    return userInfo ? JSON.parse(userInfo) : null
  }
  setUserInfo(userInfo) {
    this.set(USER_INFO, JSON.stringify(userInfo))
  }
  clearUserInfo() {
    this.clear(USER_INFO)
  }
}

const session = new Session()

export default session

上层调用

引入我们暴露的实例，再回头看看我们直接对用户信息的存储操作。

import session from './session'
function login() {
    //...请求
    const userInfo = {userId: 123, userName: '张三'}
    session.setUserInfo(userInfo)
}
function getUserInfo() {
    return session.getUserInfo()
}

总结

这里我觉得我们将下层实现与上层使用的逻辑拆分开了，符合单一职责原则，逻辑更清晰。

上层无需关心底层的实现逻辑，只需要在合适的时机调用，自己只要专注于业务逻辑就好。（我不希望去纠结于sessionStorage与JSON的序列化逻辑，我只希望我可以方便的存储的数据，也可以方便的获取数据）
下层也无需关心上层的业务逻辑，只提供实现的方法，供外部调用即可。（我不希望纠结于你的业务，我能满足你的要求，你不要管我怎么存储数据，怎么对数据进行处理，至于我怎么实现，那是我自己的事情）

加载全部内容