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

Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍

作者：不正经 | 2024-04-22 12:44:56

赞

踩

Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍

​​​​​​​

Storage 工具类封装

该工具函数设计

  • 采用工厂方法+闭包设计模式，不直接实例化类，而是根据传入的参数来配置和返回一个 SmartStorage 的实例。
  • 支持带前缀的键：通过 prefixKey 参数可以为存储的键名添加一个前缀，默认为空字符串。这个功能可以帮助避免键名冲突，特别是当在同一个域下的不同应用或组件中使用同一种存储方式时。
  • 支持过期时间：在存储数据时，可以为每项数据设置一个过期时间（单位为秒），存储的数据结构中会包括实际的值、存储时间戳以及过期时间戳。在读取数据时，会检查数据是否过期，如果已经过期，则自动删除
  • 支持加密存储：存储数据时根据参数配置可先进行加密，读取数据时再解密，加密使用的 crypto 模块
  • 错误处理：在读取数据时，如果解密过程出错或数据格式不正确，会捕获异常并返回默认值，这提高了程序的健壮性。
  • 支持常用的 api（set get remove clear）
  • TypeScript 实现

接下来是代码实现：在未进行代码实现前可以基于上面的设计自己实现一下，然后对照下我的代码实现

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

在组件中使用：

  1. <template>
  2.   <div>
  3.     layout
  4.     <el-button type="primary" @click="getLocal">get</el-button>
  5.     <el-button type="primary" @click="setLocal">set</el-button>
  6.   </div>
  7. </template>
  8.  
  9. <script setup lang="ts">
  10. import { setStorage, getStorage, getStorageAll,removeStorage, clearStorage } from "../../utils/modules/storage";
  11.  
  12.  
  13. let setLocal = (): void => {
  14.   let testLocal = "token123123123";
  15.   setStorage("testLocal", testLocal);
  16. };
  17.  
  18. let getLocal = (): void => {
  19.   let localVal = getStorage("testLocal");
  20.   let all = getStorageAll()
  21.   console.log("测试存储", localVal,all);
  22. };
  23. </script>
  24.  
  25. <style scoped lang="scss">
  26.  
  27. </style>
localStorlocalStorage 存储大小

localStorage 的存储大小因浏览器而异，但通常有以下限制：

  • 大多数浏览器提供了5MB左右的存储空间，但是单位是字符串的长度值, 或者 utf-16 的编码单元，也可以说是 10M 字节空间。
  • localStorage 的 key 键也是占存储空间的。
  • localStorage 如何统计已使用空间
  • 在移动设备上，iOS 和某些版本的 Android 浏览器可能会对 localStorage 的大小有所限制，甚至完全禁用它。

要检查 localStorage 的实际存储限制，可以使用以下代码片段尝试使用存储空间：

  1. function checkLocalStorageSpace() {
  2.     var testKey = 'storageTest',
  3.         max = 2 * 1024 * 1024, // 2MB
  4.         i = 0,
  5.         value = '';
  6.  
  7.     // 生成一个足够大的字符串
  8.     for (i = 0; i < max; i++) {
  9.         value += 'a';
  10.     }
  11.  
  12.     // 尝试存储这个大字符串
  13.     localStorage.setItem(testKey, value);
  14.  
  15.     // 检查是否能成功存储，如果不能，则减半大小继续测试
  16.     try {
  17.         localStorage.setItem(testKey, value);
  18.         max *= 2;
  19.     } catch (e) {
  20.         max /= 2;
  21.     }
  22.  
  23.     localStorage.removeItem(testKey);
  24.  
  25.     console.log('Estimated localStorage limit: ' + max + ' bytes');
  26. }
  27.  
  28. checkLocalStorageSpace();

关于工具函数的封装：

  1. function sieOfLS() {
  2.     return Object.entries(localStorage).map(v => v.join('')).join('').length;
  3. }

这个函数也可以加到storage工具函数中

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

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