zoukankan      html  css  js  c++  java
  • 采用localStorage做定时缓存

    背景

    页面采用ajax获取数据时,每访问一次就会发送一次请求向服务端获取数据,可是呢。 有些数据更新的又不频繁,所以我就想着使用localStorage进行本地存储,然后在固定间隔时在去更新数据。(下载地址:https://gitee.com/whnba/data_storage)

    结构设计

    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;
  • 相关阅读:
    MySQL STR_TO_DATE函数
    mybatis的一种批量更新方法【我】
    ON DUPLICATE KEY UPDATE单个增加更新及批量增加更新的sql
    Unity寻路的功能总结
    Unity3d大会的部分总结
    支付宝Unity
    [Firefly引擎][学习笔记三][已完结]所需模块封装
    [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
    [Firefly引擎][学习笔记一][已完结]带用户验证的聊天室
    [Firefly引擎][学习笔记四][已完结]服务器端与客户端的通讯
  • 原文地址:https://www.cnblogs.com/whnba/p/10908690.html
Copyright © 2011-2022 走看看