Question

我在vanilla javascript中有这个ajax调用，它异步调用api并需要在localstorage中缓存响应。这是我的代码：

var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                console.log(xhttp.responseText);
                localStorage.setItem('Data', JSON.parse(xhttp.responseText));
            }
        };
        xhttp.open("GET", "/api/orgData", true);
        xhttp.send();

虽然console.log打印了xhttp.responseText的值，但我在本地存储中看到的Data值是[object object]。我想这个问题与api响应还没有完成（不知道为什么this.readyState == 4＆amp;＆amp; this.status == 200没有帮助）。您能否帮助解决此问题，以便在结果完全从api返回时将数据缓存到本地存储中。此外，我正在我的html头部进行此调用，我只能使用vanilla javascript no jquery或其他东西。提前致谢

Answer 1

你遇到的问题是localStorage只存储字符串，它不存储对象。因此，在这种精确的情况下，您拥有的是在您的对象上应用toString的结果。

解决方案是存储JSON：

localStorage.setItem('Data', xhttp.responseText);

当你需要你所做的价值时

var thing = JSON.parse(localStorage.getItem('Data'));

虽然localStorage的大小有限，但请注意，您最好只存储重要的值。

等待来自异步ajax tfrom api调用的完整响应

1 个答案: