devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

LocalStorage，该提升下逼格了_localstorag 钉钉

作者：Monodyee | 2024-04-25 21:49:52

赞

踩

localstorag 钉钉

你还在直接用 localStorag

很多人在用 localStorage 或 sessionStorage 的时候喜欢直接用，明文存储，直接将信息暴露在；浏览器中，虽然一般场景下都能应付得了且简单粗暴，但特殊需求情况下，比如设置定时功能，就不能实现。就需要对其进行二次封装，为了在使用上增加些安全感，那加密也必然是少不了的了。为方便项目使用，特对常规操作进行封装。不完善之处会进一步更新...(更新于：2022.06.02 16:30)

设计

封装之前先梳理下所需功能，并要做成什么样，采用什么样的规范，部分主要代码片段是以 localStorage作为示例，最后会贴出完整代码的。可以结合项目自行优化，也可以直接使用。

  1. // 区分存储类型 type
  2. // 自定义名称前缀 prefix
  3. // 支持设置过期时间 expire
  4. // 支持加密可选，开发环境下未方便调试可关闭加密
  5.  
  6. // 支持数据加密 这里采用 crypto-js 加密 也可使用其他方式
  7.  
  8. // 判断是否支持 Storage isSupportStorage
  9.  
  10. // 设置 setStorage
  11.  
  12. // 获取 getStorage
  13.  
  14. // 是否存在 hasStorage
  15.  
  16. // 获取所有key getStorageKeys
  17.  
  18. // 根据索引获取key getStorageForIndex
  19.  
  20. // 获取localStorage长度 getStorageLength
  21.  
  22. // 获取全部 getAllStorage
  23.  
  24. // 删除 removeStorage
  25.  
  26. // 清空 clearStorage
  27.  
  28. //定义参数 类型 window.localStorage,window.sessionStorage,
  29. const config = {
  30.     type: 'localStorage', // 本地存储类型 localStorage/sessionStorage
  31.     prefix: 'SDF_0.0.1', // 名称前缀 建议：项目名 + 项目版本
  32.     expire: 1, //过期时间 单位：秒
  33.     isEncrypt: true // 默认加密 为了调试方便, 开发过程中可以不加密
  34. }

设置 setStorage

Storage 本身是不支持过期时间设置的，要支持设置过期时间，可以效仿 Cookie 的做法，setStorage(key,value,expire) 方法，接收三个参数，第三个参数就是设置过期时间的，用相对时间，单位秒，要对所传参数进行类型检查。可以设置统一的过期时间，也可以对单个值得过期时间进行单独配置。两种方式按需配置。

代码实现：

  1. // 设置 setStorage
  2. export const setStorage = (key,value,expire=0) => {
  3.     if (value === '' || value === null || value === undefined) {
  4.         value = null;
  5.     }
  6.  
  7.     if (isNaN(expire) || expire < 1) throw new Error("Expire must be a number");
  8.  
  9.     expire = (expire?expire:config.expire) * 60000;
  10.     let data = {
  11.         value: value, // 存储值
  12.         time: Date.now(), //存值时间戳
  13.         expire: expire // 过期时间
  14.     }
  15.  
  16.     window[config.type].setItem(key, JSON.stringify(data));
  17. }

获取 getStorage

首先要对 key 是否存在进行判断，防止获取不存在的值而报错。对获取方法进一步扩展，只要在有效期内获取 Storage 值，就对过期时间进行续期，如果过期则直接删除该值。并返回 null

  1. // 获取 getStorage
  2. export const getStorage = (key) => {
  3.     // key 不存在判断
  4.     if (!window[config.type].getItem(key) || JSON.stringify(window[config.type].getItem(key)) === 'null'){
  5.         return null;
  6.     }
  7.  
  8.     // 优化 持续使用中续期
  9.     const storage = JSON.parse(window[config.type].getItem(key));
  10.     console.log(storage)
  11.     let nowTime = Date.now();
  12.     console.log(config.expire*6000 ,(nowTime - storage.time))
  13.     // 过期删除
  14.     if (storage.expire && config.expire*6000 < (nowTime - storage.time)) {
  15.         removeStorage(key);
  16.         return null;
  17.     } else {
  18.         // 未过期期间被调用 则自动续期 进行保活
  19.         setStorage(key,storage.value);
  20.         return storage.value;
  21.     }
  22. }

获取所有值

  1. // 获取全部 getAllStorage
  2. export const getAllStorage = () => {
  3.     let len = window[config.type].length // 获取长度
  4.     let arr = new Array() // 定义数据集
  5.     for (let i = 0; i < len; i++) {
  6.         // 获取key 索引从0开始
  7.         let getKey = window[config.type].key(i)
  8.         // 获取key对应的值
  9.         let getVal = window[config.type].getItem(getKey)
  10.         // 放进数组
  11.         arr[i] = { 'key': getKey, 'val': getVal, }
  12.     }
  13.     return arr
  14. }

删除 removeStorage

  1. // 名称前自动添加前缀
  2. const autoAddPrefix = (key) => {
  3.     const prefix = config.prefix ? config.prefix + '_' : '';
  4.     return  prefix + key;
  5. }
  6.  
  7. // 删除 removeStorage
  8. export const removeStorage = (key) => {
  9.     window[config.type].removeItem(autoAddPrefix(key));
  10. }

清空 clearStorage

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

加密、解密

加密采用的是 crypto-js

  1. // 安装crypto-js
  2. npm install crypto-js
  3.  
  4. // 引入 crypto-js 有以下两种方式
  5. import CryptoJS from "crypto-js";
  6. // 或者
  7. const CryptoJS = require("crypto-js");

对 crypto-js 设置密钥和密钥偏移量,可以采用将一个私钥经 MD5 加密生成16位密钥获得。

  1. // 十六位十六进制数作为密钥
  2. const SECRET_KEY = CryptoJS.enc.Utf8.parse("3333e6e143439161");
  3. // 十六位十六进制数作为密钥偏移量
  4. const SECRET_IV = CryptoJS.enc.Utf8.parse("e3bbe7e3ba84431a");

对加密方法进行封装

  1. /**
  2.  * 加密方法
  3.  * @param data
  4.  * @returns {string}
  5.  */
  6. export function encrypt(data) {
  7.   if (typeof data === "object") {
  8.     try {
  9.       data = JSON.stringify(data);
  10.     } catch (error) {
  11.       console.log("encrypt error:", error);
  12.     }
  13.   }
  14.   const dataHex = CryptoJS.enc.Utf8.parse(data);
  15.   const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
  16.     iv: SECRET_IV,
  17.     mode: CryptoJS.mode.CBC,
  18.     padding: CryptoJS.pad.Pkcs7
  19.   });
  20.   return encrypted.ciphertext.toString();
  21. }

对解密方法进行封装

  1. /**
  2.  * 解密方法
  3.  * @param data
  4.  * @returns {string}
  5.  */
  6. export function decrypt(data) {
  7.   const encryptedHexStr = CryptoJS.enc.Hex.parse(data);
  8.   const str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  9.   const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
  10.     iv: SECRET_IV,
  11.     mode: CryptoJS.mode.CBC,
  12.     padding: CryptoJS.pad.Pkcs7
  13.   });
  14.   const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  15.   return decryptedStr.toString();
  16. }

在存储数据及获取数据中进行使用：

这里我们主要看下进行加密和解密部分，部分方法在下面代码段中并未展示，请注意，不能直接运行。

  1. const config = {
  2.     type: 'localStorage', // 本地存储类型 sessionStorage
  3.     prefix: 'SDF_0.0.1', // 名称前缀 建议：项目名 + 项目版本
  4.     expire: 1, //过期时间 单位：秒
  5.     isEncrypt: true // 默认加密 为了调试方便, 开发过程中可以不加密
  6. }
  7.  
  8. // 设置 setStorage
  9. export const setStorage = (key, value, expire = 0) => {
  10.     if (value === '' || value === null || value === undefined) {
  11.         value = null;
  12.     }
  13.  
  14.     if (isNaN(expire) || expire < 0) throw new Error("Expire must be a number");
  15.  
  16.     expire = (expire ? expire : config.expire) * 1000;
  17.     let data = {
  18.         value: value, // 存储值
  19.         time: Date.now(), //存值时间戳
  20.         expire: expire // 过期时间
  21.     }
  22.     // 对存储数据进行加密 加密为可选配置
  23.     const encryptString = config.isEncrypt ? encrypt(JSON.stringify(data)): JSON.stringify(data);
  24.     window[config.type].setItem(autoAddPrefix(key), encryptString);
  25. }
  26.  
  27. // 获取 getStorage
  28. export const getStorage = (key) => {
  29.     key = autoAddPrefix(key);
  30.     // key 不存在判断
  31.     if (!window[config.type].getItem(key) || JSON.stringify(window[config.type].getItem(key)) === 'null') {
  32.         return null;
  33.     }
  34.  
  35.     // 对存储数据进行解密
  36.     const storage = config.isEncrypt ? JSON.parse(decrypt(window[config.type].getItem(key))) : JSON.parse(window[config.type].getItem(key));
  37.     let nowTime = Date.now();
  38.     
  39.     // 过期删除
  40.     if (storage.expire && config.expire * 6000 < (nowTime - storage.time)) {
  41.         removeStorage(key);
  42.         return null;
  43.     } else {
  44.         //  持续使用时会自动续期
  45.         setStorage(autoRemovePrefix(key), storage.value);
  46.         return storage.value;
  47.     }
  48. }

使用

使用的时候你可以通过 import 按需引入，也可以挂载到全局上使用，一般建议少用全局方式或全局变量，为后来接手项目继续开发维护的人，追查代码留条便捷之路！不要为了封装而封装，尽可能基于项目需求和后续的通用，以及使用上的便捷。比如获取全部存储变量，如果你项目上都未曾用到过，倒不如删减掉，留着过年也不见得有多香，不如为减小体积做点贡献！

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

完整代码

该代码已进一步完善，需要的可以直接进一步优化，也可以将可优化或可扩展的建议，留言说明，我会进一步迭代的。可以根据自己的需要删除一些不用的方法，以减小文件大小。

  1. /***
  2.  * title: storage.js
  3.  * Author: Gaby
  4.  * Email: xxx@126.com
  5.  * Time: 2022/6/1 17:30
  6.  * last: 2022/6/2 17:30
  7.  * Desc: 对存储的简单封装
  8.  */
  9.  
  10. import CryptoJS from 'crypto-js';
  11.  
  12. // 十六位十六进制数作为密钥
  13. const SECRET_KEY = CryptoJS.enc.Utf8.parse("3333e6e143439161");
  14. // 十六位十六进制数作为密钥偏移量
  15. const SECRET_IV = CryptoJS.enc.Utf8.parse("e3bbe7e3ba84431a");
  16.  
  17. // 类型 window.localStorage,window.sessionStorage,
  18. const config = {
  19.     type: 'localStorage', // 本地存储类型 sessionStorage
  20.     prefix: 'SDF_0.0.1', // 名称前缀 建议：项目名 + 项目版本
  21.     expire: 1, //过期时间 单位：秒
  22.     isEncrypt: true // 默认加密 为了调试方便, 开发过程中可以不加密
  23. }
  24.  
  25. // 判断是否支持 Storage
  26. export const isSupportStorage = () => {
  27.     return (typeof (Storage) !== "undefined") ? true : false
  28. }
  29.  
  30. // 设置 setStorage
  31. export const setStorage = (key, value, expire = 0) => {
  32.     if (value === '' || value === null || value === undefined) {
  33.         value = null;
  34.     }
  35.  
  36.     if (isNaN(expire) || expire < 0) throw new Error("Expire must be a number");
  37.  
  38.     expire = (expire ? expire : config.expire) * 1000;
  39.     let data = {
  40.         value: value, // 存储值
  41.         time: Date.now(), //存值时间戳
  42.         expire: expire // 过期时间
  43.     }
  44.     
  45.     const encryptString = config.isEncrypt 
  46.     ? encrypt(JSON.stringify(data))
  47.     : JSON.stringify(data);
  48.     
  49.     window[config.type].setItem(autoAddPrefix(key), encryptString);
  50. }
  51.  
  52. // 获取 getStorage
  53. export const getStorage = (key) => {
  54.     key = autoAddPrefix(key);
  55.     // key 不存在判断
  56.     if (!window[config.type].getItem(key) || JSON.stringify(window[config.type].getItem(key)) === 'null') {
  57.         return null;
  58.     }
  59.  
  60.     // 优化 持续使用中续期
  61.     const storage = config.isEncrypt 
  62.     ? JSON.parse(decrypt(window[config.type].getItem(key))) 
  63.     : JSON.parse(window[config.type].getItem(key));
  64.     
  65.     let nowTime = Date.now();
  66.  
  67.     // 过期删除
  68.     if (storage.expire && config.expire * 6000 < (nowTime - storage.time)) {
  69.         removeStorage(key);
  70.         return null;
  71.     } else {
  72.         // 未过期期间被调用 则自动续期 进行保活
  73.         setStorage(autoRemovePrefix(key), storage.value);
  74.         return storage.value;
  75.     }
  76. }
  77.  
  78. // 是否存在 hasStorage
  79. export const hasStorage = (key) => {
  80.     key = autoAddPrefix(key);
  81.     let arr = getStorageAll().filter((item)=>{
  82.         return item.key === key;
  83.     })
  84.     return arr.length ? true : false;
  85. }
  86.  
  87. // 获取所有key
  88. export const getStorageKeys = () => {
  89.     let items = getStorageAll()
  90.     let keys = []
  91.     for (let index = 0; index < items.length; index++) {
  92.         keys.push(items[index].key)
  93.     }
  94.     return keys
  95. }
  96.  
  97. // 根据索引获取key
  98. export const getStorageForIndex = (index) => {
  99.     return window[config.type].key(index)
  100. }
  101.  
  102. // 获取localStorage长度
  103. export const getStorageLength = () => {
  104.     return window[config.type].length
  105. }
  106.  
  107. // 获取全部 getAllStorage
  108. export const getStorageAll = () => {
  109.     let len = window[config.type].length // 获取长度
  110.     let arr = new Array() // 定义数据集
  111.     for (let i = 0; i < len; i++) {
  112.         // 获取key 索引从0开始
  113.         let getKey = window[config.type].key(i)
  114.         // 获取key对应的值
  115.         let getVal = window[config.type].getItem(getKey)
  116.         // 放进数组
  117.         arr[i] = {'key': getKey, 'val': getVal,}
  118.     }
  119.     return arr
  120. }
  121.  
  122. // 删除 removeStorage
  123. export const removeStorage = (key) => {
  124.     window[config.type].removeItem(autoAddPrefix(key));
  125. }
  126.  
  127. // 清空 clearStorage
  128. export const clearStorage = () => {
  129.     window[config.type].clear();
  130. }
  131.  
  132. // 名称前自动添加前缀
  133. const autoAddPrefix = (key) => {
  134.     const prefix = config.prefix ? config.prefix + '_' : '';
  135.     return  prefix + key;
  136. }
  137.  
  138. // 移除已添加的前缀
  139. const autoRemovePrefix = (key) => {
  140.     const len = config.prefix ? config.prefix.length+1 : '';
  141.     return key.substr(len)
  142.     // const prefix = config.prefix ? config.prefix + '_' : '';
  143.     // return  prefix + key;
  144. }
  145.  
  146. /**
  147.  * 加密方法
  148.  * @param data
  149.  * @returns {string}
  150.  */
  151. const encrypt = (data) => {
  152.     if (typeof data === "object") {
  153.         try {
  154.             data = JSON.stringify(data);
  155.         } catch (error) {
  156.             console.log("encrypt error:", error);
  157.         }
  158.     }
  159.     const dataHex = CryptoJS.enc.Utf8.parse(data);
  160.     const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
  161.         iv: SECRET_IV,
  162.         mode: CryptoJS.mode.CBC,
  163.         padding: CryptoJS.pad.Pkcs7
  164.     });
  165.     return encrypted.ciphertext.toString();
  166. }
  167.  
  168. /**
  169.  * 解密方法
  170.  * @param data
  171.  * @returns {string}
  172.  */
  173. const decrypt = (data) => {
  174.     const encryptedHexStr = CryptoJS.enc.Hex.parse(data);
  175.     const str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  176.     const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
  177.         iv: SECRET_IV,
  178.         mode: CryptoJS.mode.CBC,
  179.         padding: CryptoJS.pad.Pkcs7
  180.     });
  181.     const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  182.     return decryptedStr.toString();
  183. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/487390
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号