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

Question

I have this ajax call in vanilla javascript which calls an api asynchronously and need to cache the response in localstorage. Here is my code:

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

Problem is what I see for the value of Data in the local storage is [object object] although console.log prints the value of xhttp.responseText. I guess the issue has do with api response is not complete yet (not sure why this.readyState == 4 && this.status == 200 is not helping). Could you please help to solve this issue so that it caches the data into local storage when the result is fully back from api. Also I am making this call in head of my html and I can only use vanilla javascript no jquery or other things. Thanks in advance

Answer 1

The problem you have here is that localStorage only stores strings, it doesn't store objects. So in this precise case what you have is the result of applying toString on your object.

A solution would be to store the JSON:

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

And when you need the value you do

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

Be careful though that localStorage is limited in size, you'd better store just the important values.