前言

碰到一个项目,把很多数据都存到sessionStorage中进行调用,而sessionStorage存储空间是有限的,当存储数据过大时会报错,所以想到把数据压缩在存到本地,需要使用时再进行解压。


一、安装pako模块

npm install pako

二、使用步骤

1.压缩、解压函数

代码如下(示例):

let pako = require('pako');
/**
 * 
 * @param {object} data 
 * @param {string} dataName 
 * @des 将接口返回的数据压缩并存储到sessionStorage中
 * 
 */
export function compression(data, dataName){
  // 数据压缩
  const compressedData = pako.gzip(JSON.stringify(data));
  const base64Data = btoa(String.fromCharCode.apply(null, compressedData));

  // 将压缩后的数据保存到sessionStorage
  sessionStorage.setItem(dataName, base64Data);
}

/**
 * 
 * @param {string} dataName 
 * @returns {object} 返回解压的数据
 * @des 传入获取sessionStorage中的名字,拿到数据并解压
 */
export function decompress(dataName){
  // 从sessionStorage中获取保存的压缩数据
  const base64Data = sessionStorage.getItem(dataName);

  // 将base64编码的数据转换成原始的压缩数据
  const compressedData = new Uint8Array(atob(base64Data).split('').map(char => char.charCodeAt()));

  // 对压缩数据进行解压缩处理
  const data = JSON.parse(pako.ungzip(compressedData, { to: 'string' }));
  return data
}

2.使用

代码如下(示例):

import { compression, decompress } from '@/utils/index'
// 压缩数据存储本地(result为请求拿到的数据,dsResult存储到sessionStorage中的名字)
compression(result,'dsResult')
// dsResult为从sessionStorage中拿到的数据并进行解压
const a = decompress('dsResult')

总结

其实压缩与解压的数据不一定要存到sessionStorage中,什么数据都存储到sessionStorage会降低浏览器的性能,可以使用VueX、Redux进行管理数据。


如果在一个页面中大量使用sessionStorage来存储数据,会导致以下问题:

  1. 性能问题:浏览器负责管理sessionStorage中的数据,存储数据会占用浏览器内存,当大量的数据被存储在sessionStorage中时,可能会降低浏览器的性能,导致页面加载缓慢。

  2. 可用性问题:sessionStorage的大小通常比localStorage小,在某些浏览器中可能只有5MB左右。因此如果使用sessionStorage存储大量数据,容易达到sessionStorage的最大容量,导致一些数据无法保存。

  3. 安全问题:sessionStorage中存储的数据只在当前会话中有效,关闭当前标签页或浏览器后,数据将被清除。因此,如果需要长期保存数据,建议使用localStorage或服务器端存储。

综上所述,尽量避免在sessionStorage中存储大量数据,建议根据实际情况选择合适的存储方案,以达到更好的用户体验和安全性。

Logo

前往低代码交流专区

更多推荐