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

提示：我们有一个连接到JSON API url的搜索。搜索查询在url中，API为每个搜索词生成一个新的JSON文件。我们也不能依赖浏览器来缓存，也不能使用PHP或服务器端缓存；我们需要使用HTML5本地存储（我们不在乎IE7不能使用它）

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

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

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

我所尝试的：在我的研究中，我看到了许多非常复杂的解决方案，我似乎无法完全理解所有这些，其中一些解决方案几乎奏效，我想我需要对这个具体案例进行更好的解释

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

这太疯狂了，它几乎可以正常工作，当它识别出我再次搜索了相同的内容时，它会写入控制台，并停止一个新的请求，但不幸的是，缓存的JSON不在那里，它不会返回任何结果。

到目前为止我拥有的：

我的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);

});

---

感谢@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);

});

var searchTerm=搜索框中键入的内容；
//JSON文件
var url='1〕https://api.example.com/fake/json/path/{'+searchTerm+'}'；
//巴巴姆！在这里，SearchTerm+“-cachedData”获取唯一的缓存数据
var cachedData=localStorage.getItem（searchTerm+“-cachedData”），
def=$.Deferred（）；
如果（！cachedData）{
def=$.getJSON（url，函数（数据）{
cachedData=数据；
//BABAM！这里是唯一cachedData的设置位置！SearchTerm+“-cachedData”
setItem（searchTerm+“-cachedData”，JSON.stringify（cachedData））；
});
}
否则{
cachedData=JSON.parse（cachedData）；
定义解析（缓存数据）；
}
定义完成（功能（数据）{
var resultHTML=''；
对于（var i=0；i'；
结果TML+=''；
});
}
$（'div#results'）.html（resultHTML）；
});

---

没有StackOverflow我会在哪里。谢谢大家!

您有一堆异步代码，但您将其视为同步代码。首先，不要使用

def.resolve（）

，而是使用

def.resolve（cachedData）

。然后，使用

def.done（function（）{

，而不是

def.done（function（data）{

，并在回调中使用

data

。这样，将在正确的时间调用

done

回调，并使用正确的数据（无论是来自

localStorage

还是

getJSON

调用）此外，您不能简单地存储

cachedData

，因为您需要为任何

searchTerm

提供缓存结果。因此，您可以创建许多

localStorage

项（如

searchTerm+“cachedData”），或者制作一个大对象，每个

searchTerm`哇，感谢您的快速回复@Ian，我想使用

searchTerm+“cachedData”创建许多
localStorage
项目

，您认为可以详细说明代码的去向吗？@LookingLA那么，无论何时调用

localStorage.getItem

或

localStorage.setItem

，第一个参数都应该是

.getItem（searchTerm+“-cachedData”）之类的内容

。这样，每个搜索项在

localStorage

中都有一个唯一的结果。保存-

.setItem（searchTerm+“-cachedData”）

。我添加了

“-cachedData”

只是为了确保搜索词不会干扰您的站点使用的其他任何内容，您可以使用

localStorage

来查找可能存在关键字的位置overlap@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);

});