JS項目中如何對本地存儲進行二次封裝

今天小編給大家分享一下JS項目中如何對本地存儲進行二次封裝的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

前言

平時在開發(fā)的中，發(fā)現身邊同事在使用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()
  }
}

然后我們在開始封裝一些業(yè)務功能，例如存取用戶信息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()
}

以上就是“JS項目中如何對本地存儲進行二次封裝”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。