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

更新時間：2022年06月16日 15:21:02 作者：Gaby

這篇文章主要為大家介紹了JavaScript架構(gòu)localStorage在特殊場景下的二次封裝操作，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

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

設(shè)計

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

// 區(qū)分存儲類型 type
// 自定義名稱前綴 prefix
// 支持設(shè)置過期時間 expire
// 支持加密可選，開發(fā)環(huán)境下未方便調(diào)試可關(guān)閉加密
// 支持?jǐn)?shù)據(jù)加密 這里采用 crypto-js 加密 也可使用其他方式
// 判斷是否支持 Storage isSupportStorage
// 設(shè)置 setStorage
// 獲取 getStorage
// 是否存在 hasStorage
// 獲取所有key getStorageKeys
// 根據(jù)索引獲取key getStorageForIndex
// 獲取localStorage長度 getStorageLength
// 獲取全部 getAllStorage
// 刪除 removeStorage
// 清空 clearStorage
//定義參數(shù) 類型 window.localStorage,window.sessionStorage,
const config = {
    type: 'localStorage', // 本地存儲類型 localStorage/sessionStorage
    prefix: 'SDF_0.0.1', // 名稱前綴 建議：項目名 + 項目版本
    expire: 1, //過期時間 單位：秒
    isEncrypt: true // 默認(rèn)加密 為了調(diào)試方便, 開發(fā)過程中可以不加密
}

設(shè)置 setStorage

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

代碼實現(xiàn)：

// 設(shè)置 setStorage
export const setStorage = (key,value,expire=0) => {
    if (value === '' || value === null || value === undefined) {
        value = null;
    }
    if (isNaN(expire) || expire < 1) throw new Error("Expire must be a number");
    expire = (expire?expire:config.expire) * 60000;
    let data = {
        value: value, // 存儲值
        time: Date.now(), //存值時間戳
        expire: expire // 過期時間
    }
    window[config.type].setItem(key, JSON.stringify(data));
}

獲取 getStorage

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

// 獲取 getStorage
export const getStorage = (key) => {
    // key 不存在判斷
    if (!window[config.type].getItem(key) || JSON.stringify(window[config.type].getItem(key)) === 'null'){
        return null;
    }
    // 優(yōu)化 持續(xù)使用中續(xù)期
    const storage = JSON.parse(window[config.type].getItem(key));
    console.log(storage)
    let nowTime = Date.now();
    console.log(config.expire*6000 ,(nowTime - storage.time))
    // 過期刪除
    if (storage.expire && config.expire*6000 < (nowTime - storage.time)) {
        removeStorage(key);
        return null;
    } else {
        // 未過期期間被調(diào)用 則自動續(xù)期 進(jìn)行?；?
        setStorage(key,storage.value);
        return storage.value;
    }
}

獲取所有值

// 獲取全部 getAllStorage
export const getAllStorage = () => {
    let len = window[config.type].length // 獲取長度
    let arr = new Array() // 定義數(shù)據(jù)集
    for (let i = 0; i < len; i++) {
        // 獲取key 索引從0開始
        let getKey = window[config.type].key(i)
        // 獲取key對應(yīng)的值
        let getVal = window[config.type].getItem(getKey)
        // 放進(jìn)數(shù)組
        arr[i] = { 'key': getKey, 'val': getVal, }
    }
    return arr
}

刪除 removeStorage

// 名稱前自動添加前綴
const autoAddPrefix = (key) => {
    const prefix = config.prefix ? config.prefix + '_' : '';
    return  prefix + key;
}
// 刪除 removeStorage
export const removeStorage = (key) => {
    window[config.type].removeItem(autoAddPrefix(key));
}

清空 clearStorage

// 清空 clearStorage
export const clearStorage = () => {
    window[config.type].clear();
}

加密、解密

加密采用的是 crypto-js

// 安裝crypto-js
npm install crypto-js
// 引入 crypto-js 有以下兩種方式
import CryptoJS from "crypto-js";
// 或者
const CryptoJS = require("crypto-js");

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

// 十六位十六進(jìn)制數(shù)作為密鑰
const SECRET_KEY = CryptoJS.enc.Utf8.parse("3333e6e143439161");
// 十六位十六進(jìn)制數(shù)作為密鑰偏移量
const SECRET_IV = CryptoJS.enc.Utf8.parse("e3bbe7e3ba84431a");

對加密方法進(jìn)行封裝

/**
 * 加密方法
 * @param data
 * @returns {string}
 */
export function encrypt(data) {
  if (typeof data === "object") {
    try {
      data = JSON.stringify(data);
    } catch (error) {
      console.log("encrypt error:", error);
    }
  }
  const dataHex = CryptoJS.enc.Utf8.parse(data);
  const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
    iv: SECRET_IV,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.ciphertext.toString();
}

對解密方法進(jìn)行封裝

/**
 * 解密方法
 * @param data
 * @returns {string}
 */
export function decrypt(data) {
  const encryptedHexStr = CryptoJS.enc.Hex.parse(data);
  const str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
    iv: SECRET_IV,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}

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

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

const config = {
    type: 'localStorage', // 本地存儲類型 sessionStorage
    prefix: 'SDF_0.0.1', // 名稱前綴 建議：項目名 + 項目版本
    expire: 1, //過期時間 單位：秒
    isEncrypt: true // 默認(rèn)加密 為了調(diào)試方便, 開發(fā)過程中可以不加密
}
// 設(shè)置 setStorage
export const setStorage = (key, value, expire = 0) => {
    if (value === '' || value === null || value === undefined) {
        value = null;
    }
    if (isNaN(expire) || expire < 0) throw new Error("Expire must be a number");
    expire = (expire ? expire : config.expire) * 1000;
    let data = {
        value: value, // 存儲值
        time: Date.now(), //存值時間戳
        expire: expire // 過期時間
    }
    // 對存儲數(shù)據(jù)進(jìn)行加密 加密為可選配置
    const encryptString = config.isEncrypt ? encrypt(JSON.stringify(data)): JSON.stringify(data);
    window[config.type].setItem(autoAddPrefix(key), encryptString);
}
// 獲取 getStorage
export const getStorage = (key) => {
    key = autoAddPrefix(key);
    // key 不存在判斷
    if (!window[config.type].getItem(key) || JSON.stringify(window[config.type].getItem(key)) === 'null') {
        return null;
    }
    // 對存儲數(shù)據(jù)進(jìn)行解密
    const storage = config.isEncrypt ? JSON.parse(decrypt(window[config.type].getItem(key))) : JSON.parse(window[config.type].getItem(key));
    let nowTime = Date.now();
    // 過期刪除
    if (storage.expire && config.expire * 6000 < (nowTime - storage.time)) {
        removeStorage(key);
        return null;
    } else {
        //  持續(xù)使用時會自動續(xù)期
        setStorage(autoRemovePrefix(key), storage.value);
        return storage.value;
    }
}

使用

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

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

完整代碼

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

/***
 * title: storage.js
 * Author: Gaby
 * Email: xxx@126.com
 * Time: 2022/6/1 17:30
 * last: 2022/6/2 17:30
 * Desc: 對存儲的簡單封裝
 */
import CryptoJS from 'crypto-js';
// 十六位十六進(jìn)制數(shù)作為密鑰
const SECRET_KEY = CryptoJS.enc.Utf8.parse("3333e6e143439161");
// 十六位十六進(jìn)制數(shù)作為密鑰偏移量
const SECRET_IV = CryptoJS.enc.Utf8.parse("e3bbe7e3ba84431a");
// 類型 window.localStorage,window.sessionStorage,
const config = {
    type: 'localStorage', // 本地存儲類型 sessionStorage
    prefix: 'SDF_0.0.1', // 名稱前綴 建議：項目名 + 項目版本
    expire: 1, //過期時間 單位：秒
    isEncrypt: true // 默認(rèn)加密 為了調(diào)試方便, 開發(fā)過程中可以不加密
}
// 判斷是否支持 Storage
export const isSupportStorage = () => {
    return (typeof (Storage) !== "undefined") ? true : false
}
// 設(shè)置 setStorage
export const setStorage = (key, value, expire = 0) => {
    if (value === '' || value === null || value === undefined) {
        value = null;
    }
    if (isNaN(expire) || expire < 0) throw new Error("Expire must be a number");
    expire = (expire ? expire : config.expire) * 1000;
    let data = {
        value: value, // 存儲值
        time: Date.now(), //存值時間戳
        expire: expire // 過期時間
    }
    const encryptString = config.isEncrypt 
    ? encrypt(JSON.stringify(data))
    : JSON.stringify(data);
    window[config.type].setItem(autoAddPrefix(key), encryptString);
}
// 獲取 getStorage
export const getStorage = (key) => {
    key = autoAddPrefix(key);
    // key 不存在判斷
    if (!window[config.type].getItem(key) || JSON.stringify(window[config.type].getItem(key)) === 'null') {
        return null;
    }
    // 優(yōu)化 持續(xù)使用中續(xù)期
    const storage = config.isEncrypt 
    ? JSON.parse(decrypt(window[config.type].getItem(key))) 
    : JSON.parse(window[config.type].getItem(key));
    let nowTime = Date.now();
    // 過期刪除
    if (storage.expire && config.expire * 6000 < (nowTime - storage.time)) {
        removeStorage(key);
        return null;
    } else {
        // 未過期期間被調(diào)用 則自動續(xù)期 進(jìn)行?；?
        setStorage(autoRemovePrefix(key), storage.value);
        return storage.value;
    }
}
// 是否存在 hasStorage
export const hasStorage = (key) => {
    key = autoAddPrefix(key);
    let arr = getStorageAll().filter((item)=>{
        return item.key === key;
    })
    return arr.length ? true : false;
}
// 獲取所有key
export const getStorageKeys = () => {
    let items = getStorageAll()
    let keys = []
    for (let index = 0; index < items.length; index++) {
        keys.push(items[index].key)
    }
    return keys
}
// 根據(jù)索引獲取key
export const getStorageForIndex = (index) => {
    return window[config.type].key(index)
}
// 獲取localStorage長度
export const getStorageLength = () => {
    return window[config.type].length
}
// 獲取全部 getAllStorage
export const getStorageAll = () => {
    let len = window[config.type].length // 獲取長度
    let arr = new Array() // 定義數(shù)據(jù)集
    for (let i = 0; i < len; i++) {
        // 獲取key 索引從0開始
        let getKey = window[config.type].key(i)
        // 獲取key對應(yīng)的值
        let getVal = window[config.type].getItem(getKey)
        // 放進(jìn)數(shù)組
        arr[i] = {'key': getKey, 'val': getVal,}
    }
    return arr
}
// 刪除 removeStorage
export const removeStorage = (key) => {
    window[config.type].removeItem(autoAddPrefix(key));
}
// 清空 clearStorage
export const clearStorage = () => {
    window[config.type].clear();
}
// 名稱前自動添加前綴
const autoAddPrefix = (key) => {
    const prefix = config.prefix ? config.prefix + '_' : '';
    return  prefix + key;
}
// 移除已添加的前綴
const autoRemovePrefix = (key) => {
    const len = config.prefix ? config.prefix.length+1 : '';
    return key.substr(len)
    // const prefix = config.prefix ? config.prefix + '_' : '';
    // return  prefix + key;
}
/**
 * 加密方法
 * @param data
 * @returns {string}
 */
const encrypt = (data) => {
    if (typeof data === "object") {
        try {
            data = JSON.stringify(data);
        } catch (error) {
            console.log("encrypt error:", error);
        }
    }
    const dataHex = CryptoJS.enc.Utf8.parse(data);
    const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
        iv: SECRET_IV,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.ciphertext.toString();
}
/**
 * 解密方法
 * @param data
 * @returns {string}
 */
const decrypt = (data) => {
    const encryptedHexStr = CryptoJS.enc.Hex.parse(data);
    const str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
        iv: SECRET_IV,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
}

以上就是JavaScript架構(gòu)localStorage特殊場景下二次封裝操作的詳細(xì)內(nèi)容，更多關(guān)于JavaScript localStorage二次封裝的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

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

目錄

前言

設(shè)計

設(shè)置 setStorage

獲取 getStorage

獲取所有值

刪除 removeStorage

清空 clearStorage

加密、解密

使用

完整代碼

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

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

目錄

前言

設(shè)計

設(shè)置 setStorage

獲取 getStorage

獲取所有值

刪除 removeStorage

清空 clearStorage

加密、解密

使用

完整代碼

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

加密、解密