前端使用pako对数据进行压缩与解压

文章目录

前言

碰到一个项目，把很多数据都存到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来存储数据，会导致以下问题：

性能问题：浏览器负责管理sessionStorage中的数据什么是浏览器本地存储，存储数据会占用浏览器内存什么是浏览器本地存储，当大量的数据被存储在sessionStorage中时，可能会降低浏览器的性能，导致页面加载缓慢。

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

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

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