106

javascript/browser で ajax レスポンスのキャッシュを有効にしたいと考えています。

jquery.ajax ドキュメントから:

デフォルトでは、リクエストは常に発行されますが、ブラウザはキャッシュから結果を提供する場合があります。キャッシュされた結果の使用を禁止するには、キャッシュを false に設定します。最後のリクエスト以降にアセットが変更されていない場合にリクエストが失敗を報告するようにするには、ifModified を true に設定します。

ただし、これらのアドレスはどちらもキャッシュを強制しません。

動機:初期化関数に呼び出し を入れたいのですが$.ajax({...})、そのいくつかは同じ URL を要求します。これらの初期化関数の 1 つを呼び出す必要がある場合もあれば、複数呼び出す場合もあります。

そのため、その特定の URL が既に読み込まれている場合は、サーバーへのリクエストを最小限に抑えたいと考えています。

私は自分の解決策を展開することができましたが（多少の困難があります！）、これを行う標準的な方法があるかどうかを知りたいです。

4

6 に答える 6

13

phonegap アプリ ストレージのキャッシュを探していたところ、@TecHunter の答えが見つかりましたlocalCache。

私は、localStorage が ajax 呼び出しによって返されたデータをキャッシュする別の代替手段であることを知りました。そのため、キャッシュの代わりにlocalStorage使用したい他の人に役立つデモを 1 つ作成しました。localStoragelocalCache

Ajax 呼び出し:

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

データを 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");

それが他の人に役立つことを願っています!

于 2015-06-05T05:55:12.123 に答える
2

古い質問ですが、私の解決策は少し異なります。

私は、ユーザーによってトリガーされる ajax 呼び出しを常に行う単一ページ Web アプリを作成していました。さらに困難にするために、jquery 以外のメソッド (dojo、ネイティブ xhr など) を使用するライブラリが必要でした。ajax 呼び出しを行うためにどのライブラリが使用されているかに関係なく、すべての主要なブラウザーで動作するように、できるだけ効率的に ajax 要求をキャッシュするために、独自のライブラリの 1 つにプラグインを作成しました。

このソリューションは、jSQL (私が作成 - indexeddb およびその他の dom ストレージ メソッドを使用する javascript で作成されたクライアント側の永続的な SQL 実装) を使用し、XHRCreep (私が作成)と呼ばれる別のライブラリにバンドルされています。ネイティブ XHR オブジェクト。

実装するには、ここにあるページにプラグインを含めるだけです。

次の 2 つのオプションがあります。

jSQL.xhrCache.max_time = 60;

最大経過時間を分単位で設定します。これより古いキャッシュされた応答は再要求されます。デフォルトは 1 時間です。

jSQL.xhrCache.logging = true;

true に設定すると、モック XHR 呼び出しがデバッグ用にコンソールに表示されます。

特定のページのキャッシュを次の方法でクリアできます

jSQL.tables = {}; jSQL.persist();
于 2016-12-29T20:17:21.970 に答える
-1 
        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();

ここにリンクの説明を入力

于 2020-03-15T11:57:03.823 に答える