JavaScript架構(gòu)localStorage特殊場景下二次封裝操作

第JavaScript架構(gòu)localStorage特殊場景下二次封裝操作目錄前言設(shè)計設(shè)置setStorage獲取getStorage獲取所有值刪除removeStorage清空clearStorage加密、解密使用完整代碼

前言

很多人在用localStorage或sessionStorage的時候喜歡直接用，明文存儲，直接將信息暴露在；瀏覽器中，雖然一般場景下都能應(yīng)付得了且簡單粗暴，但特殊需求情況下，比如設(shè)置定時功能，就不能實現(xiàn)。就需要對其進行二次封裝，為了在使用上增加些安全感，那加密也必然是少不了的了。為方便項目使用，特對常規(guī)操作進行封裝。不完善之處會進一步更新...(更新于：2025.06.0216:30)

設(shè)計

封裝之前先梳理下所需功能，并要做成什么樣，采用什么樣的規(guī)范，部分主要代碼片段是以localStorage作為示例，最后會貼出完整代碼的?？梢越Y(jié)合項目自行優(yōu)化，也可以直接使用。

//區(qū)分存儲類型type

//自定義名稱前綴prefix

//支持設(shè)置過期時間expire

//支持加密可選，開發(fā)環(huán)境下未方便調(diào)試可關(guān)閉加密

//支持數(shù)據(jù)加密這里采用crypto-js加密也可使用其他方式

//判斷是否支持StorageisSupportStorage

//設(shè)置setStorage

//獲取getStorage

//是否存在hasStorage

//獲取所有keygetStorageKeys

//根據(jù)索引獲取keygetStorageForIndex

//獲取localStorage長度getStorageLength

//獲取全部getAllStorage

//刪除removeStorage

//清空clearStorage

//定義參數(shù)類型window.localStorage,window.sessionStorage,

constconfig={

type:'localStorage',//本地存儲類型localStorage/sessionStorage

prefix:'SDF_0.0.1',//名稱前綴建議：項目名+項目版本

expire:1,//過期時間單位：秒

isEncrypt:true//默認加密為了調(diào)試方便,開發(fā)過程中可以不加密

設(shè)置setStorage

Storage本身是不支持過期時間設(shè)置的，要支持設(shè)置過期時間，可以效仿Cookie的做法，setStorage(key,value,expire)方法，接收三個參數(shù)，第三個參數(shù)就是設(shè)置過期時間的，用相對時間，單位秒，要對所傳參數(shù)進行類型檢查?？梢栽O(shè)置統(tǒng)一的過期時間，也可以對單個值得過期時間進行單獨配置。兩種方式按需配置。

代碼實現(xiàn)：

//設(shè)置setStorage

exportconstsetStorage=(key,value,expire=0)={

if(value===''||value===null||value===undefined){

value=null;

if(isNaN(expire)||expire1)thrownewError("Expiremustbeanumber");

expire=(expireexpire:config.expire)*60000;

letdata={

value:value,//存儲值

time:Date.now(),//存值時間戳

expire:expire//過期時間

window[config.type].setItem(key,JSON.stringify(data));

獲取getStorage

首先要對key是否存在進行判斷，防止獲取不存在的值而報錯。對獲取方法進一步擴展，只要在有效期內(nèi)獲取Storage值，就對過期時間進行續(xù)期，如果過期則直接刪除該值。并返回null

//獲取getStorage

exportconstgetStorage=(key)={

//key不存在判斷

if(!window[config.type].getItem(key)||JSON.stringify(window[config.type].getItem(key))==='null'){

returnnull;

//優(yōu)化持續(xù)使用中續(xù)期

conststorage=JSON.parse(window[config.type].getItem(key));

console.log(storage)

letnowTime=Date.now();

console.log(config.expire*6000,(nowTime-storage.time))

//過期刪除

if(storage.expireconfig.expire*6000(nowTime-storage.time)){

removeStorage(key);

returnnull;

}else{

//未過期期間被調(diào)用則自動續(xù)期進行?；?/p>

setStorage(key,storage.value);

returnstorage.value;

獲取所有值

//獲取全部getAllStorage

exportconstgetAllStorage=()={

letlen=window[config.type].length//獲取長度

letarr=newArray()//定義數(shù)據(jù)集

for(leti=0;ilen;i++){

//獲取key索引從0開始

letgetKey=window[config.type].key(i)

//獲取key對應(yīng)的值

letgetVal=window[config.type].getItem(getKey)

//放進數(shù)組

arr[i]={'key':getKey,'val':getVal,}

returnarr

刪除removeStorage

//名稱前自動添加前綴

constautoAddPrefix=(key)={

constprefix=config.prefixconfig.prefix+'_':'';

returnprefix+key;

//刪除removeStorage

exportconstremoveStorage=(key)={

window[config.type].removeItem(autoAddPrefix(key));

清空clearStorage

//清空clearStorage

exportconstclearStorage=()={

window[config.type].clear();

加密、解密

加密采用的是crypto-js

//安裝crypto-js

npminstallcrypto-js

//引入crypto-js有以下兩種方式

importCryptoJSfrom"crypto-js";

//或者

constCryptoJS=require("crypto-js");

對crypto-js設(shè)置密鑰和密鑰偏移量,可以采用將一個私鑰經(jīng)MD5加密生成16位密鑰獲得。

//十六位十六進制數(shù)作為密鑰

constSECRET_KEY=CryptoJS.enc.Utf8.parse("3333e6e143439161");

//十六位十六進制數(shù)作為密鑰偏移量

constSECRET_IV=CryptoJS.enc.Utf8.parse("e3bbe7e3ba84431a");

對加密方法進行封裝

/**

*加密方法

*@paramdata

*@returns{string}

exportfunctionencrypt(data){

if(typeofdata==="object"){

try{

data=JSON.stringify(data);

}catch(error){

console.log("encrypterror:",error);

constdataHex=CryptoJS.enc.Utf8.parse(data);

constencrypted=CryptoJS.AES.encrypt(dataHex,SECRET_KEY,{

iv:SECRET_IV,

mode:CryptoJS.mode.CBC,

padding:CryptoJS.pad.Pkcs7

returnencrypted.ciphertext.toString();

對解密方法進行封裝

/**

*解密方法

*@paramdata

*@returns{string}

exportfunctiondecrypt(data){

constencryptedHexStr=CryptoJS.enc.Hex.parse(data);

conststr=CryptoJS.enc.Base64.stringify(encryptedHexStr);

constdecrypt=CryptoJS.AES.decrypt(str,SECRET_KEY,{

iv:SECRET_IV,

mode:CryptoJS.mode.CBC,

padding:CryptoJS.pad.Pkcs7

constdecryptedStr=decrypt.toString(CryptoJS.enc.Utf8);

returndecryptedStr.toString();

在存儲數(shù)據(jù)及獲取數(shù)據(jù)中進行使用：

這里我們主要看下進行加密和解密部分，部分方法在下面代碼段中并未展示，請注意，不能直接運行。

constconfig={

type:'localStorage',//本地存儲類型sessionStorage

prefix:'SDF_0.0.1',//名稱前綴建議：項目名+項目版本

expire:1,//過期時間單位：秒

isEncrypt:true//默認加密為了調(diào)試方便,開發(fā)過程中可以不加密

//設(shè)置setStorage

exportconstsetStorage=(key,value,expire=0)={

if(value===''||value===null||value===undefined){

value=null;

if(isNaN(expire)||expire0)thrownewError("Expiremustbeanumber");

expire=(expireexpire:config.expire)*1000;

letdata={

value:value,//存儲值

time:Date.now(),//存值時間戳

expire:expire//過期時間

//對存儲數(shù)據(jù)進行加密加密為可選配置

constencryptString=config.isEncryptencrypt(JSON.stringify(data)):JSON.stringify(data);

window[config.type].setItem(autoAddPrefix(key),encryptString);

//獲取getStorage

exportconstgetStorage=(key)={

key=autoAddPrefix(key);

//key不存在判斷

if(!window[config.type].getItem(key)||JSON.stringify(window[config.type].getItem(key))==='null'){

returnnull;

//對存儲數(shù)據(jù)進行解密

conststorage=config.isEncryptJSON.parse(decrypt(window[config.type].getItem(key))):JSON.parse(window[config.type].getItem(key));

letnowTime=Date.now();

//過期刪除

if(storage.expireconfig.expire*6000(nowTime-storage.time)){

removeStorage(key);

returnnull;

}else{

//持續(xù)使用時會自動續(xù)期

setStorage(autoRemovePrefix(key),storage.value);

returnstorage.value;

使用

使用的時候你可以通過import按需引入，也可以掛載到全局上使用，一般建議少用全局方式或全局變量，為后來接手項目繼續(xù)開發(fā)維護的人，追查代碼留條便捷之路！不要為了封裝而封裝，盡可能基于項目需求和后續(xù)的通用，以及使用上的便捷。比如獲取全部存儲變量，如果你項目上都未曾用到過，倒不如刪減掉，留著過年也不見得有多香，不如為減小體積做點貢獻！

import{isSupportStorage,hasStorage,setStorage,getStorage,getStorageKeys,getStorageForIndex,getStorageLength,removeStorage,getStorageAll,clearStorage}from'@/utils/storage'

完整代碼

該代碼已進一步完善，需要的可以直接進一步優(yōu)化，也可以將可優(yōu)化或可擴展的建議，留言說明，我會進一步迭代的?？梢愿鶕?jù)自己的需要刪除一些不用的方法，以減小文件大小。

/***

*title:storage.js

*Author:Gaby

*Email:xxx@126.com

*Time:2025/6/117:30

*last:2025/6/217:30

*Desc:對存儲的簡單封裝

importCryptoJSfrom'crypto-js';

//十六位十六進制數(shù)作為密鑰

constSECRET_KEY=CryptoJS.enc.Utf8.parse("3333e6e143439161");

//十六位十六進制數(shù)作為密鑰偏移量

constSECRET_IV=CryptoJS.enc.Utf8.parse("e3bbe7e3ba84431a");

//類型window.localStorage,window.sessionStorage,

constconfig={

type:'localStorage',//本地存儲類型sessionStorage

prefix:'SDF_0.0.1',//名稱前綴建議：項目名+項目版本

expire:1,//過期時間單位：秒

isEncrypt:true//默認加密為了調(diào)試方便,開發(fā)過程中可以不加密

//判斷是否支持Storage

exportconstisSupportStorage=()={

return(typeof(Storage)!=="undefined")true:false

//設(shè)置setStorage

exportconstsetStorage=(key,value,expire=0)={

if(value===''||value===null||value===undefined){

value=null;

if(isNaN(expire)||expire0)thrownewError("Expiremustbeanumber");

expire=(expireexpire:config.expire)*1000;

letdata={

value:value,//存儲值

time:Date.now(),//存值時間戳

expire:expire//過期時間

constencryptString=config.isEncrypt

encrypt(JSON.stringify(data))

:JSON.stringify(data);

window[config.type].setItem(autoAddPrefix(key),encryptString);

//獲取getStorage

exportconstgetStorage=(key)={

key=autoAddPrefix(key);

//key不存在判斷

if(!window[config.type].getItem(key)||JSON.stringify(window[config.type].getItem(key))==='null'){

returnnull;

//優(yōu)化持續(xù)使用中續(xù)期

conststorage=config.isEncrypt

JSON.parse(decrypt(window[config.type].getItem(key)))

:JSON.parse(window[config.type].getItem(key));

letnowTime=Date.now();

//過期刪除

if(storage.expireconfig.expire*6000(nowTime-storage.time)){

removeStorage(key);

returnnull;

}else{

//未過期期間被調(diào)用則自動續(xù)期進行?；?/p>

setStorage(autoRemovePrefix(key),storage.value);

returnstorage.value;

//是否存在hasStorage

exportconsthasStorage=(key)={

key=autoAddPrefix(key);

letarr=getStorageAll().filter((item)={

returnitem.key===key;

returnarr.lengthtrue:false;

//獲取所有key

exportconstgetStorageKeys=()={

letitems=getStorageAll()

letkeys=[]

for(letindex=0;indexitems.length;index++){

keys.push(items[index].key)

returnkeys

//根據(jù)索引獲取key

exportconstgetStorageForIndex=(index)={

returnwindow[config.type].key(index)

//獲取localStorage長度

exportconstgetStorageLength=()={

returnwindow[config.type].length

//獲取全部getAllStorage

exportconstgetStorageAll=()={

letlen=window[config.type].length//獲取長度

letarr=newArray()//定義數(shù)據(jù)集

for(leti=0;ilen;i++){

//獲取key索引從0開始

letgetKey=window[config.type].key(i)

//獲取key對應(yīng)的值

letgetVal=window[config.type].getItem(getKey)

//放進數(shù)組

arr[i]={'key':getKey,'val':getVal,}

returnarr

//刪除removeStorage

exportconstremoveStorage=(key)={

window[config.type].removeItem(autoAddPrefix(key));

//清空clearStorage

exportconstclearStorage=()={

window[config.type].clear();

//名稱前自動添加前綴

constautoAddPrefix=(key)={

constprefix=config.prefixconfig.prefix+'_':'';

returnprefix+key;

//移除已添加的前綴

constautoRemovePrefix=(key)={

constlen=config.prefixconfig.prefix.length+1:'';

returnkey.su