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

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();

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

Answer 1

这里的问题是 localStorage只存储字符串，不存储对象。所以在这个精确的例子中，你得到的是在你的对象上应用 toString 的结果。

一种解决方案是存储 JSON:

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

当您需要值(value)时

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

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