JavaScript手写一个前端存储工具库.docx

第

JavaScript手写一个前端存储工具库

目录使用storage-tools缓存数据storage-tools项目演进StorageHelper支持localStorage存储StorageHelper添加超时机制StorageHelper添加其他存储适配StorageHelper添加异步获取列表辅助类ListStorageHelper在项目开发的过程中，为了减少提高性能，减少请求，开发者往往需要将一些不易改变的数据放入本地缓存中。如把用户使用的模板数据放入localStorage或者IndexedDB。代码往往如下书写。

//这里将数据放入内存中

lettemplatesCache=null;

//用户id，用于多账号系统

constuserId:string=1;

constgetTemplates=({

refresh=false

}={

refresh:false

})={

//不需要立即刷新，走存储

if(!refresh){

//内存中有数据，直接使用内存中数据

if(templatesCache){

returnPromise.resolve(templatesCache)

constkey=`templates.${userId}`

//从localStorage中获取数据

consttemplateJSONStr=localStroage.getItem(key)

if(templateJSONStr){

try{

templatesCache=JSON.parse(templateJSONStr);

returnPromise.resolve(templatesCache)

}catch(){

//解析失败，清除storage中数据

localStroage.removeItem(key)

//进行服务端掉用获取数据

returnapi.get(xxx).then(res={

templatesCache=cloneDeep(res)

//存入本地缓存

localStroage.setItem(key,JSON.stringify(templatesCache))

returnres

};

可以看到，代码非常冗余，同时这里的代码还没有处理数据版本、过期时间以及数据写入等功能。如果再把这些功能点加入，代码将会更加复杂，不易维护。

于是个人写了一个小工具storage-tools来处理这个问题。

使用storage-tools缓存数据

该库默认使用localStorage作为数据源，开发者从库中获取StorageHelper工具类。

import{StorageHelper}fromstorage-tools;

//当前用户id

constuserId=1;

//构建模版store

//构建时候就会获取localStorage中的数据放入内存

consttemplatesStore=newStorageHelper({

//多账号用户使用key

storageKey:`templates.${userId}`,

//当前数据版本号，可以从后端获取并传入

version:1,

//超时时间，单位为秒

timeout:60*60*24,

//从内存中获取数据

consttemplates=templatesStore.getData();

//没有数据，表明数据过期或者没有存储过

if(templates===null){

api.get(xxx).then((val)={

//存储数据到内存中去，之后的getData都可以获取到数据

store.setData(val);

//闲暇时间将当前内存数据存储到localStorage中

requestIdleCallback(()={

//期间内可以多次掉用setData

mit();

}

StorageHelper工具类支持了其他缓存源，代码如下：

import{IndexedDBAdaptor,StorageAdaptor,StorageHelper}fromstorage-tools;

//当前用户id

constu