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

2022-07-09 22:00:52

前言

平時在開發的中，發現身邊同事在使用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本地儲存二次封裝內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

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

目錄

前言

定義恆量的鍵名

下層實現

上層呼叫

總結

熱門文章