Using localstorage with Fetch API

When your development depends on a response from a remote api, you can’t let your stride slow down because the api is slow. You can save a copy of it locally, and then use that in further requests to speed up the development.

The Fetch API is Promise based. When you make a http request with fetch, it returns a promise that would resolve with the response later when the api call returns.

So you can use the Promise.resolve shortcut to return a promise that will always resolve to the response that you need for local development.

You could use the localStorage api of the browser to save the response as a json object after the first call. For subsequent requests, use this saved response with Promise.resolve like so.

1) First make a real http call and save the response in localstorage:

fetch(url, httpOptions).then(response => {
  localStorage['remoteResponse'] = JSON.stringify(response)
  // do other stuff, maybe
})

2) Then, for subsequent calls, first check if a saved response is present, and if so, use it instead of making another api call.

if (localStorage.remoteResponse) {
  return Promise.resolve(JSON.parse(localStorage.remoteResponse))
} else {
  fetch(url, httpOptions).then(response => {
    localStorage['remoteResponse'] = JSON.stringify(response)
    // do other stuff, maybe
  })
}

Depending on the complexity of the task at hand, this technique could add minutes to hours to your life.

And that’s today’s share of health tips. TC.

Thoughts on the post are welcome! Mail me at prasanna@npras.in or .