在sessionStorage中存储JSON数据的问题

Question

我正在尝试利用HTML5 sessionStorage保留以前从外部API检索的一些数据，以便在以后再次调用它时缓存数据，而不是建立连接以检索已经在此会话中检索的冗余数据。

function getItemWithTooltip(item_id, div_id) {
var xmlhttp2 = new XMLHttpRequest();
var url2 = "https://api.guildwars2.com/v2/items/"+item_id;

xmlhttp2.onreadystatechange=function() {if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200) {parseItemTooltip(xmlhttp2.responseText);}};
xmlhttp2.open("GET", url2, true);
//xmlhttp2.send();

var item;

var cache_enabled = true;
// Cache results for quicker page loads
if (cache_enabled == true){
    if (Storage !== void(0)) {
        // Retrieve data (if stored)
        if (sessionStorage[String(item_id)]) {
            //item = JSON.parse(sessionStorage.getItem(String(item_id)));
            item = JSON.parse(sessionStorage[item_id.toString()]);
            //window.alert("sessionStorage: Retrieved");
            //alert(typeof (item));
            //alert(item);
        }
    }
}

if (item == null){
    xmlhttp2.send();
}

  function parseItemTooltip(response) {
    //var item = JSON.parse(response);

    if (item == null){
        // Store data
        if (cache_enabled == true){sessionStorage.setItem(item_id.toString(), JSON.stringify(response));}
        //sessionStorage.setItem(String(item_id), item);
        //if (cache_enabled == true){sessionStorage.setItem(String(item_id), response);}
        //window.alert("sessionStorage: Stored");
        item = JSON.parse(response);
    }
    //..More code here that was not relevant and removed to save space..
  }
}

Answer 1

我认为问题与您在存储响应时将其JSON.stringify的事实有关。 响应已经是一个字符串，因此将对其进行“双字符串化”，并且在解析它时，您只会得到原始字符串。

您在响应文本上同时执行JSON.stringify和JSON.parse 。 这对于JSON没有意义，您只需要执行其中一项即可。 如果将字符串字符串化，它将变成“双字符串化”。 如果尝试解析对象，则会出错，因为JSON.parse需要字符串。

假设您的回复文字如下所示：

'{"property":"value"}'

这是一个字符串。 现在，当您对其进行字符串化时，它将变为：

'"{\\"property\\":\\"value\\"}"'

当您解析此内容时，就像从sessionStorage获取它一样，您将只获得原始字符串。 您将不得不再次解析它以获得所需的对象。

直接在响应文本上进行解析时，可以正确获取对象：

{
  property: "value"
}

因此，您需要做的是将响应文本存储在sessionStorage而不进行字符串化。

---

您还仅在状态更改处理程序中为该请求调用parseItemTooltip ，因此在获取缓存的项目时永远不会调用它。 查看完整的代码，我可以看到您基本上完成了此函数中的所有操作，因此在不执行请求时需要显式调用它。

Answer 2

在花了一个小时对我的代码进行调试之后，我终于弄清楚了这个问题，这是一个愚蠢的简单事情，就像通常那样。

我的答案是扭转这两行：

    getItemWithTooltip(item.id, div_ID);
    document.getElementById("id01").innerHTML = out;

对此：

    document.getElementById("id01").innerHTML = out;
    getItemWithTooltip(item.id, div_ID);

推理：在创建div之前，它试图填充div。 以前没有关系，因为它在等待远程服务器响应时被填充，但是现在将数据缓存到sessionStorage中，它的检索速度如此之快，以至于顺序成为了一个因素。 总是要注意逻辑上的顺序。

感谢所有对此进行调试的人员。 非常感谢和赞赏！ 快速反应，友善的人。 非常适合首次访问此网站的人。