采用localStorage做定时缓存
程序员文章站
2022-04-18 09:42:13
背景 页面采用ajax获取数据时,每访问一次就会发送一次请求向服务端获取数据,可是呢。 有些数据更新的又不频繁,所以我就想着使用localStorage进行本地存储,然后在固定间隔时在去更新数据。(下载地址:https://gitee.com/whnba/data_storage) 结构设计 exp ......
背景
页面采用ajax获取数据时,每访问一次就会发送一次请求向服务端获取数据,可是呢。 有些数据更新的又不频繁,所以我就想着使用localstorage进行本地存储,然后在固定间隔时在去更新数据。(下载地址:)
结构设计
expires:用于保存数据到期时间
data:用于保存数据
{ expires: "到期时间" data:"数据" }
设置缓存数据
采用json把数据结构进行序列化保存,如果数据满了就全部清空吧。不然怎么办
static set(key, value, expires = 3600) { const date = new date(); try { localstorage.setitem(key, json.stringify({ expires: date.valueof() + expires * 1000, data: value })); } catch (e) { if (e.name === 'quotaexceedederror') { console.log("数据已满,自动清空"); cache.clear(); cache.set(key, value, expires); } } }
获取缓存数据
先判断数据是否到期,如果没有到期就返回数据,反之删除。
static get(key) { const result = json.parse(localstorage.getitem(key)); const date = new date(); if (result && result.expires > date) { return result.data; } else { cache.remove(key); return null; } }
完整代码
/** * 数据缓存 */ class cache { /** * 获取缓存 * @param key * @return {any} */ static get(key) { const result = json.parse(localstorage.getitem(key)); const date = new date(); if (result && result.expires > date) { return result.data; } else { cache.remove(key); return null; } } /** * 设置缓存 * @param {string} key 键名 * @param {any} value 缓存数据 * @param {number} expires 过期时间 单位 s */ static set(key, value, expires = 3600) { const date = new date(); try { localstorage.setitem(key, json.stringify({ expires: date.valueof() + expires * 1000, data: value })); } catch (e) { if (e.name === 'quotaexceedederror') { console.log("数据已满,自动清空"); cache.clear(); cache.set(key, value, expires); } } } /** * 删除键 * @param key */ static remove(key) { localstorage.removeitem(key); } /** * 清空 */ static clear() { localstorage.clear(); } } export default cache;