JS項目中對本地存儲進行二次的封裝的實現(xiàn)

更新時間：2022年07月09日 15:25:17 作者：皮皮鹽

這篇文章主要介紹了JS項目中對本地存儲進行二次的封裝,這里我們將要使用到的key存儲下來，新建一個叫constant-storage.js的文件，對外暴露一些key的鍵名，也方便后期統(tǒng)一修改，這里因為都是恒量，所以名稱我們都用大寫表示，需要的朋友可以參考下

前言

平時在開發(fā)的中，發(fā)現(xiàn)身邊同事在使用localStorage和sessionStorage的時候，喜歡在代碼里面直接調(diào)用，舉個的栗子：

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

并不是覺得直接調(diào)用不好，但總覺得這種寫法不夠語義化，于是將其進行封裝，這里參考了后端java同事的實體類的邏輯。

定義恒量的鍵名

這里我們將要使用到的key存儲下來，新建一個叫constant-storage.js的文件，對外暴露一些key的鍵名，也方便后期統(tǒng)一修改，這里因為都是恒量，所以名稱我們都用大寫表示。

export const USER_INFO = 'userInfo'

下層實現(xiàn)

這里我們開始定義處理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è)務(wù)功能，例如存取用戶信息userInfo，從恒量中取出key，再將這個類，實例化暴露出去供外部調(diào)用。

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

上層調(diào)用

引入我們暴露的實例，再回頭看看我們直接對用戶信息的存儲操作。

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

總結(jié)

這里我覺得我們將下層實現(xiàn)與上層使用的邏輯拆分開了，符合單一職責原則，邏輯更清晰。

上層無需關(guān)心底層的實現(xiàn)邏輯，只需要在合適的時機調(diào)用，自己只要專注于業(yè)務(wù)邏輯就好。（我不希望去糾結(jié)于sessionStorage與JSON的序列化邏輯，我只希望我可以方便的存儲的數(shù)據(jù)，也可以方便的獲取數(shù)據(jù)）
下層也無需關(guān)心上層的業(yè)務(wù)邏輯，只提供實現(xiàn)的方法，供外部調(diào)用即可。（我不希望糾結(jié)于你的業(yè)務(wù)，我能滿足你的要求，你不要管我怎么存儲數(shù)據(jù)，怎么對數(shù)據(jù)進行處理，至于我怎么實現(xiàn)，那是我自己的事情）

到此這篇關(guān)于JS項目中對本地存儲進行二次的封裝的文章就介紹到這了,更多相關(guān)js本地存儲二次封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: