第JS項(xiàng)目中對(duì)本地存儲(chǔ)進(jìn)行二次的封裝的實(shí)現(xiàn)目錄前言定義恒量的鍵名下層實(shí)現(xiàn)上層調(diào)用總結(jié)

前言

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

functionlogin(){

//...請(qǐng)求

constuserInfo={userId:123,userName:'張三'}

sessionStorage.setItem('userInfo',JSON.stringify(userInfo))

functiongetUserInfo(){

returnJSON.parse(sessionStorage.getItem('userInfo'))

}

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

定義恒量的鍵名

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

exportconstUSER_INFO='userInfo'

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

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

classSession{

constructor(){

this.store=window.sessionStorage

set(key,value){

this.store.setItem(key,value)

get(key){

returnthis.store.getItem(key)

clear(key){

this.store.removeItem(key)

clearAll(){

this.store.clear()

然后我們?cè)陂_始封裝一些業(yè)務(wù)功能，例如存取用戶信息userInfo，從恒量中取出key，再將這個(gè)類，實(shí)例化暴露出去供外部調(diào)用。

import{USER_INFO}from'./constant-storage'

classSession{

constructor(){

this.store=window.sessionStorage

set(key,value){

this.store.setItem(key,value)

get(key){

returnthis.store.getItem(key)

clear(key){

this.store.removeItem(key)

clearAll(){

this.store.clear()

//用戶信息

getUserInfo(){

constuserInfo=this.get(USER_INFO)

returnuserInfoJSON.parse(userInfo):null

setUserInfo(userInfo){

this.set(USER_INFO,JSON.stringify(userInfo))

clearUserInfo(){

this.clear(USER_INFO)

constsession=newSession()

exportdefaultsession

上層調(diào)用

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

importsessionfrom'./session'

functionlogin(){

//...請(qǐng)求

constuserInfo={userId:123,userName:'張三'}

session.setUserInfo(userInfo)

functiongetUserInfo(){

returnsession.getUserInfo()

}

總結(jié)

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

上層無需關(guān)心底層的實(shí)現(xiàn)邏輯，只需要在合適的時(shí)機(jī)調(diào)用，自己只要專注于業(yè)務(wù)邏輯就好。（我不希望去糾結(jié)于sessionStorage與JSON的序列化邏輯，我只希望我可以方便的存儲(chǔ)的數(shù)據(jù)，