JS項目中對本地存儲進行二次的封裝的實現

Posted on by

前言

平時在開發的中，發現身邊同事在使用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的序列化邏輯，我隻希望我可以方便的存儲的數據，也可以方便的獲取數據）
  • 下層也無需關心上層的業務邏輯，隻提供實現的方法，供外部調用即可。（我不希望糾結於你的業務，我能滿足你的要求，你不要管我怎麼存儲數據，怎麼對數據進行處理，至於我怎麼實現，那是我自己的事情）

到此這篇關於JS項目中對本地存儲進行二次的封裝的文章就介紹到這瞭,更多相關js本地存儲二次封裝內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：