在使用phonegap应用程序存储时，我正在寻找缓存的方法，我找到了使用localCache的答案，这很好，但是我想使用localStorage作为缓存数据的替代方法。因此，我创建了一个使用localStorage的示例，以帮助其他可能希望使用localStorage而不是localCache进行缓存的人。

Ajax调用：

$.ajax({
    type: "POST",
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    url: url,
    data: '{"Id":"' + Id + '"}',
    cache: true, //If you want to cache, set it to "true"; otherwise, set it to "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!");
    }
});

存储数据到localStorage：

$.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");

希望对其他人有所帮助！

在localStorage.removeItem("Info");中，关于"info"，它是指url吗？

info是用于将数据存储在localStorage中的对象的名称。

一直收到responseJSON is not defined的错误。有什么方法可以解决这个问题吗？（我的数据类型是html）

将responseJSON更改为data，并使用var responseData = JSON.stringify(data);替代，对于success函数也做同样的更改。

我更喜欢localStorage，因为我需要在多个请求之间进行缓存。

现代浏览器都提供了存储API，可以使用它们（localStorage或sessionStorage）来保存数据。只需在接收到响应后将其存储到浏览器存储中。然后在下次发起相同的调用时，搜索是否已经保存了响应。如果是，就从存储中返回响应；如果没有，则进行新的调用。

Smartjax插件也可以实现类似的功能；但是由于你只需要保存调用的响应，可以在jQuery的ajax成功函数中编写代码来保存响应。在发起调用之前，只需检查是否已经保存了响应。

如果我将响应保存在IndexedDB中，有没有办法检查IndexedDB？另外，如果我使用Session Storage，有没有办法使用jQuery来检查响应是否存在。我不能包含除了jQuery之外的任何库。谢谢。

这个问题的出现是因为在使用jQuery的ajax方法时，设置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);
}

上面的代码使用一个名为`localCache`的对象来实现缓存功能。在发送ajax请求之前，会先检查本地缓存中是否存在相应的数据，如果存在则直接调用`doSomething`函数处理缓存数据，否则发送请求并在请求完成时将返回的数据存储到本地缓存中。

通过这种方式，可以实现对ajax请求的响应进行缓存，提高页面加载速度和减轻服务器压力。

更多关于该的问题和其他解决方案可以参考原文链接：Working fiddle here