在 javascript/browser 中缓存 jquery ajax 响应

Caching a jquery ajax response in javascript/browser

本文关键字：jquery ajax 响应 缓存 javascript browser      更新时间：2023-09-26

我想在javascript/browser中启用ajax响应的缓存。

来自 jquery.ajax 文档：

默认情况下，始终发出请求，但浏览器可能会提供服务 结果从其缓存中出来。要禁止使用缓存的结果，请将 缓存为假。导致请求在资产时报告失败 自上次请求以来未被修改，请将 ifModified 设置为 true。

但是，这两个地址都没有解决强制缓存问题。

赋予动机：我想在我的初始化函数中放置$.ajax({...})调用，其中一些请求相同的 url。有时我需要调用其中一个初始化函数，有时我需要调用几个。

因此，如果该特定 url 已经加载，我想最大限度地减少对服务器的请求。

我可以推出自己的解决方案(有些困难！(，但我想知道是否有标准的方法可以做到这一点。

>cache:true仅适用于GET和HEAD请求。

您可以按照以下思路提出自己的解决方案：

var localCache = {
    data: {},
    remove: function (url) {
        delete localCache.data[url];
    },
    exist: function (url) {
        return localCache.data.hasOwnProperty(url) && localCache.data[url] !== null;
    },
    get: function (url) {
        console.log('Getting in cache for url' + url);
        return localCache.data[url];
    },
    set: function (url, cachedData, callback) {
        localCache.remove(url);
        localCache.data[url] = cachedData;
        if ($.isFunction(callback)) callback(cachedData);
    }
};
$(function () {
    var url = '/echo/jsonp/';
    $('#ajaxButton').click(function (e) {
        $.ajax({
            url: url,
            data: {
                test: 'value'
            },
            cache: true,
            beforeSend: function () {
                if (localCache.exist(url)) {
                    doSomething(localCache.get(url));
                    return false;
                }
                return true;
            },
            complete: function (jqXHR, textStatus) {
                localCache.set(url, jqXHR, doSomething);
            }
        });
    });
});
function doSomething(data) {
    console.log(data);
}

在这里工作小提琴

编辑：随着这篇文章变得流行，对于那些想要管理超时缓存的人来说，这是一个更好的答案，你也不必为$.ajax((中的所有混乱而烦恼，因为我使用$.ajaxPrefilter((。现在只需设置{cache: true}就足以正确处理缓存：

var localCache = {
    /**
     * timeout for cache in millis
     * @type {number}
     */
    timeout: 30000,
    /** 
     * @type {{_: number, data: {}}}
     **/
    data: {},
    remove: function (url) {
        delete localCache.data[url];
    },
    exist: function (url) {
        return !!localCache.data[url] && ((new Date().getTime() - localCache.data[url]._) < localCache.timeout);
    },
    get: function (url) {
        console.log('Getting in cache for url' + url);
        return localCache.data[url].data;
    },
    set: function (url, cachedData, callback) {
        localCache.remove(url);
        localCache.data[url] = {
            _: new Date().getTime(),
            data: cachedData
        };
        if ($.isFunction(callback)) callback(cachedData);
    }
};
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
    if (options.cache) {
        var complete = originalOptions.complete || $.noop,
            url = originalOptions.url;
        //remove jQuery cache as we have our own localCache
        options.cache = false;
        options.beforeSend = function () {
            if (localCache.exist(url)) {
                complete(localCache.get(url));
                return false;
            }
            return true;
        };
        options.complete = function (data, textStatus) {
            localCache.set(url, data, complete);
        };
    }
});
$(function () {
    var url = '/echo/jsonp/';
    $('#ajaxButton').click(function (e) {
        $.ajax({
            url: url,
            data: {
                test: 'value'
            },
            cache: true,
            complete: doSomething
        });
    });
});
function doSomething(data) {
    console.log(data);
}

这里的小提琴小心，不使用 $。递 延

这是一个使用延迟工作但有缺陷的实现：

var localCache = {
    /**
     * timeout for cache in millis
     * @type {number}
     */
    timeout: 30000,
    /** 
     * @type {{_: number, data: {}}}
     **/
    data: {},
    remove: function (url) {
        delete localCache.data[url];
    },
    exist: function (url) {
        return !!localCache.data[url] && ((new Date().getTime() - localCache.data[url]._) < localCache.timeout);
    },
    get: function (url) {
        console.log('Getting in cache for url' + url);
        return localCache.data[url].data;
    },
    set: function (url, cachedData, callback) {
        localCache.remove(url);
        localCache.data[url] = {
            _: new Date().getTime(),
            data: cachedData
        };
        if ($.isFunction(callback)) callback(cachedData);
    }
};
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
    if (options.cache) {
        //Here is our identifier for the cache. Maybe have a better, safer ID (it depends on the object string representation here) ?
        // on $.ajax call we could also set an ID in originalOptions
        var id = originalOptions.url+ JSON.stringify(originalOptions.data);
        options.cache = false;
        options.beforeSend = function () {
            if (!localCache.exist(id)) {
                jqXHR.promise().done(function (data, textStatus) {
                    localCache.set(id, data);
                });
            }
            return true;
        };
    }
});
$.ajaxTransport("+*", function (options, originalOptions, jqXHR, headers, completeCallback) {
    //same here, careful because options.url has already been through jQuery processing
    var id = originalOptions.url+ JSON.stringify(originalOptions.data);
    options.cache = false;
    if (localCache.exist(id)) {
        return {
            send: function (headers, completeCallback) {
                completeCallback(200, "OK", localCache.get(id));
            },
            abort: function () {
                /* abort code, nothing needed here I guess... */
            }
        };
    }
});
$(function () {
    var url = '/echo/jsonp/';
    $('#ajaxButton').click(function (e) {
        $.ajax({
            url: url,
            data: {
                test: 'value'
            },
            cache: true
        }).done(function (data, status, jq) {
            console.debug({
                data: data,
                status: status,
                jqXHR: jq
            });
        });
    });
});

在这里摆弄一些问题，我们的缓存 ID 依赖于 json2 lib JSON 对象表示。

使用控制台视图 (F12( 或 FireBug 查看缓存生成的一些日志。

我正在寻找我的Phonegap应用程序存储的缓存，我找到了@TecHunter答案，这很棒，但使用localCache完成。

我发现并了解到 localStorage 是缓存 ajax 调用返回的数据的另一种选择。因此，我使用localStorage创建了一个演示，它将帮助其他可能想要使用localStorage而不是localCache缓存的人。

阿贾克斯呼叫： 

$.ajax({
    type: "POST",
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    url: url,
    data: '{"Id":"' + Id + '"}',
    cache: true, //It must "true" if you want to cache else "false"
    //async: false,
    success: function (data) {
        var resData = JSON.parse(data);
        var Info = resData.Info;
        if (Info) {
            customerName = Info.FirstName;
        }
    },
    error: function (xhr, textStatus, error) {
        alert("Error Happened!");
    }
});

要将数据存储到本地存储中，请执行以下操作：

$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
if (options.cache) {
    var success = originalOptions.success || $.noop,
        url = originalOptions.url;
    options.cache = false; //remove jQuery cache as we have our own localStorage
    options.beforeSend = function () {
        if (localStorage.getItem(url)) {
            success(localStorage.getItem(url));
            return false;
        }
        return true;
    };
    options.success = function (data, textStatus) {
        var responseData = JSON.stringify(data.responseJSON);
        localStorage.setItem(url, responseData);
        if ($.isFunction(success)) success(responseJSON); //call back to original ajax call
    };
}
});

如果要删除 localStorage，请在所需的任何位置使用以下语句：

localStorage.removeItem("Info");

希望对别人有帮助！

所有现代浏览器都为您提供存储 API。您可以使用它们(localStorage或sessionStorage(来保存数据。

您所要做的就是在收到响应后将其存储到浏览器存储中。然后，下次找到相同的呼叫时，请搜索响应是否已保存。如果是，则从那里返回响应;如果没有重新拨打电话。

Smartjax插件也做类似的事情;但是由于您的要求只是保存调用响应，因此您可以在jQuery ajax成功函数中编写代码以保存响应。在拨打电话之前，只需检查响应是否已保存。

如果我理解你的问题，这是解决方案：

    $.ajaxSetup({ cache: true});

以及特定呼叫

 $.ajax({
        url: ...,
        type: "GET",
        cache: false,           
        ...
    });

如果你想要相反的(特定调用的缓存(，你可以在开头设置 false，为特定调用设置 true。

老问题，但我的解决方案有点不同。

我正在编写一个单页 Web 应用程序，该应用程序不断进行由用户触发的 ajax 调用，为了使它更加困难，它需要使用 jquery 以外的方法(如 dojo、native xhr 等(的库。我为我自己的一个库编写了一个插件，以尽可能高效地缓存 ajax 请求，无论使用哪个库进行 ajax 调用，都可以在所有主要浏览器中工作。

该解决方案使用jSQL(由我编写 - 用javascript编写的客户端持久SQL实现，使用indexeddb和其他dom存储方法(，并与另一个名为XHRCreep的库(由我编写(捆绑在一起，该库完全重写了本机XHR对象。

要实现您需要做的就是将插件包含在您的页面中，该页面位于此处。

有两种选择： 

jSQL.xhrCache.max_time = 60;

设置最长期限(以分钟为单位(。 将重新请求任何早于此值的缓存响应。默认值为 1 小时。

jSQL.xhrCache.logging = true;

设置为 true 时，模拟 XHR 调用将显示在控制台中以进行调试。

您可以通过以下方式清除任何给定页面上的缓存

jSQL.tables = {}; jSQL.persist();

        function getDatas() {
            let cacheKey = 'memories';
            if (cacheKey in localStorage) {
                let datas = JSON.parse(localStorage.getItem(cacheKey));
                // if expired
                if (datas['expires'] < Date.now()) {
                    localStorage.removeItem(cacheKey);
                    getDatas()
                } else {
                    setDatas(datas);
                }
            } else {
                $.ajax({
                    "dataType": "json",
                    "success": function(datas, textStatus, jqXHR) {
                        let today = new Date();
                        datas['expires'] = today.setDate(today.getDate() + 7) // expires in next 7 days
                        setDatas(datas);
                        localStorage.setItem(cacheKey, JSON.stringify(datas));
                    },
                    "url": "http://localhost/phunsanit/snippets/PHP/json.json_encode.php",
                });
            }
        }
        function setDatas(datas) {
            // display json as text
            $('#datasA').text(JSON.stringify(datas));
            // your code here
           ....
        }
        // call
        getDatas();

在此处输入链接说明

相关文章：