Question

PROMPT：我们有一个连接到JSON API网址的搜索。搜索查询位于网址内，API会为每个搜索字词生成新的JSON文件。我们也不能依赖浏览器为我们缓存，而且我们不能使用PHP或服务器端缓存;我们需要使用HTML5 LocalStorage（我们不关心IE7不能使用它）

我们需要为每次新搜索缓存每个新的JSON文件。我们希望减少每分钟的请求，因此我们希望将JSON文件的缓存版本用于重复搜索术语。

我在哪里陷入困境：这使得难以为每个新的/不同的搜索词缓存JSON文件。我已经能够缓存第一次搜索，但随后所有后续搜索都使用相同的缓存JSON。

我们需要帮助重写这个，所以每次进行新搜索时，它都会检查以前是否搜索过该术语，如果是，则抓取相应的JSON文件。然后，当然如果搜索词是新的，则缓存该特定搜索词的新JSON文件。

我做了什么：在我的研究中，我看到了很多非常复杂的解决方案，我似乎无法全面了解所有这些，其中一些解决方案几乎工作，我想我只需要对这个具体案例做出更好的解释。

我认为这是答案，但我不知道如何将其应用于我的情况：jQuery deferred ajax cache

这很疯狂，它几乎可以工作，当它识别出我再次搜索同一个东西时它写入控制台，它确实停止了一个新请求，但遗憾的是缓存的JSON不存在，它返回no结果。 Caching a jquery ajax response in javascript/browser

我有多远：

我的PSUEDO代码：

var searchTerm = WHATEVER IS TYPED INTO THE SEARCHBOX

// The JSON file
var url = 'https://api.example.com/fake/json/path/{'+searchTerm+'}';

// Local Storage Caching Promise
var cachedData = localStorage.getItem("cachedData"),
          def = $.Deferred();

if (!cachedData) {
    def = $.getJSON(url, function(data) {
        cachedData = data;
        localStorage.setItem("cachedData", JSON.stringify(cachedData));
    });
}
else{
    cachedData = JSON.parse(cachedData);
    def.resolve();
}

def.done(function() {
    var resultHTML = '';
    for(var i = 0; i < Object.keys(cachedData.things).length; i++){
      $.each(cachedData, function(index, node){
        resultHTML += '<li>'
        resultHTML  += '<h1>' + node[i].name + '</h1>';
        resultHTML += '</li>';
      });
    }
    $('div#results').html(resultHTML);

});

示例JSON：

{
  "things": [
    {
      "type": "thing",
      "username": "randoguy",
      "name": "name001",
    },
       {
      "type": "thing2",
      "username": "randoguy2",
      "name": "name002",
    },
    ...

Answer 1

感谢@Ian提供我的回答提示！

var searchTerm = WHATEVER IS TYPED INTO THE SEARCHBOX;

// The JSON file
var url = 'https://api.example.com/fake/json/path/{'+searchTerm+'}';

// BABAM! Right here, SearchTerm + "-cachedData" gets unique cached data
var cachedData = localStorage.getItem(searchTerm + "-cachedData"),
          def = $.Deferred();

if (!cachedData) {
    def = $.getJSON(url, function(data) {
        cachedData = data;
// BABAM! And here is where the unique cachedData is set! SearchTerm + "-cachedData"
        localStorage.setItem(searchTerm + "-cachedData", JSON.stringify(cachedData));
    });
}
else{
    cachedData = JSON.parse(cachedData);
    def.resolve(cachedData);
}

def.done(function(data) {
    var resultHTML = '';
    for(var i = 0; i < Object.keys(data.repositories).length; i++){
      $.each(data, function(index, node){
        resultHTML += '<li>'
        resultHTML  += '<h1>' + node[i].name + '</h1>';
        resultHTML  += '<p>' + node[i].owner + '</p>';
        resultHTML += '</li>';
      });
    }
    $('div#results').html(resultHTML);

});

没有StackOverflow我会在哪里？谢谢大家！

使用localStorage缓存每个JSON搜索查询

1 个答案: