快捷導(dǎo)航

JS項(xiàng)目中對(duì)本地存儲(chǔ)進(jìn)行二次的封裝的實(shí)現(xiàn)

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

這篇文章主要介紹了JS項(xiàng)目中對(duì)本地存儲(chǔ)進(jìn)行二次的封裝,這里我們將要使用到的key存儲(chǔ)下來(lái)，新建一個(gè)叫constant-storage.js的文件，對(duì)外暴露一些key的鍵名，也方便后期統(tǒng)一修改，這里因?yàn)槎际呛懔?，所以名稱(chēng)我們都用大寫(xiě)表示，需要的朋友可以參考下

前言

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

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

并不是覺(jué)得直接調(diào)用不好，但總覺(jué)得這種寫(xiě)法不夠語(yǔ)義化，于是將其進(jìn)行封裝，這里參考了后端java同事的實(shí)體類(lèi)的邏輯。

定義恒量的鍵名

這里我們將要使用到的key存儲(chǔ)下來(lái)，新建一個(gè)叫constant-storage.js的文件，對(duì)外暴露一些key的鍵名，也方便后期統(tǒng)一修改，這里因?yàn)槎际呛懔?，所以名稱(chēng)我們都用大寫(xiě)表示。

export const USER_INFO = 'userInfo'

下層實(shí)現(xiàn)

這里我們開(kāi)始定義處理localStorage和sessionStorage的類(lèi)，首先給這個(gè)類(lèi)定義基本的存儲(chǔ)方法，set 、get、clear，對(duì)最基本的邏輯進(jìn)行一個(gè)封裝，這里用sessionStorage做個(gè)例子：

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()
  }
}

然后我們?cè)陂_(kāi)始封裝一些業(yè)務(wù)功能，例如存取用戶(hù)信息userInfo，從恒量中取出key，再將這個(gè)類(lèi)，實(shí)例化暴露出去供外部調(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()
  }

  // 用戶(hù)信息
  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)用

引入我們暴露的實(shí)例，再回頭看看我們直接對(duì)用戶(hù)信息的存儲(chǔ)操作。

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

總結(jié)

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

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

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

您可能感興趣的文章: