Save the API response data to LocalStorage when the button is clicked

Question

Save the API response data to LocalStorage when the button is clicked

Is there a way to save data retrieved from an API into localStorage when a button is clicked?

After executing the following code, I would like to store the obtained result:

function getResults(query) {
    fetch(`https://cors-anywhere.herokuapp.com/https://api.openweathermap.org/data/2.5/find?q=${query}&units=metric&APPID=XXXXXX`)
        .then(weather => {
            return weather.json()
        })
        .then(displayResults)
}

function displayResults(weather) {
    console.log(weather)
    let city = document.querySelector('.cityy')
    city.innerHTML = `${weather.list[0].name}`
    let temp = document.querySelector('.current')
    temp.innerHTML = `${weather.list[0].main.temp}`
    let descr = document.querySelector('.description')
    descr.innerHTML = `${weather.list[0].weather[0].description}`
}

Here's my button:

<input class="butt2" type="button" value="+"/>

javascript local-storage

Answer 1

Answer №1

If you want to store the weather response object in localStorage, you can make some changes to your getResults function. Here's how you can do it:

function getResults(query) {
    fetch(`https://cors-anywhere.herokuapp.com/https://api.openweathermap.org/data/2.5/find?q=${query}&units=metric&APPID=XXXXXX`)
        .then(weather => weather.json())
        .then(weather => {
          localStorage.setItem(weather.list[0].name, JSON.stringify(weather));
          return weather;
        })
        .then(displayResults)
}

To retrieve the stored information later on, you just need to use localStorage.getItem and parse it back into an object:

displayResults(JSON.parse(localStorage.getItem('name of city')));

Update

If you are looking to store only specific information that is displayed on the page when the user clicks the save button, you can follow this approach:

document.querySelector('.butt2').addEventListener('click', function(event) {
  const store = {
    city: document.querySelector('.city').innerHTML,
    temp: document.querySelector('.current').innerHTML,
    description: document.querySelector('.description').innerHTML
  };
  localStorage.setItem('saved-by-user', JSON.stringify(store))
});

Answer 2

If you want to store the weather response object in localStorage, you can make some changes to your getResults function. Here's how you can do it:

function getResults(query) {
    fetch(`https://cors-anywhere.herokuapp.com/https://api.openweathermap.org/data/2.5/find?q=${query}&units=metric&APPID=XXXXXX`)
        .then(weather => weather.json())
        .then(weather => {
          localStorage.setItem(weather.list[0].name, JSON.stringify(weather));
          return weather;
        })
        .then(displayResults)
}

To retrieve the stored information later on, you just need to use localStorage.getItem and parse it back into an object:

displayResults(JSON.parse(localStorage.getItem('name of city')));

Update

If you are looking to store only specific information that is displayed on the page when the user clicks the save button, you can follow this approach:

document.querySelector('.butt2').addEventListener('click', function(event) {
  const store = {
    city: document.querySelector('.city').innerHTML,
    temp: document.querySelector('.current').innerHTML,
    description: document.querySelector('.description').innerHTML
  };
  localStorage.setItem('saved-by-user', JSON.stringify(store))
});

Save the API response data to LocalStorage when the button is clicked

Answer №1

Update

Similar questions

Customize the MUI (JoyUI) Autocomplete feature in React using react-hook-form to display a unique value instead of the label

Run a JavaScript function on a webpage loaded through an AJAX response

Error: Cannot read property 'X' of undefined in JavaScript when using Django framework

Change object values to capital letters

Encountering an issue while attempting to send an image through JavaScript, jQuery, and PHP

The error code TS2554 is triggered when 5 arguments are passed instead of the expected 3-4

the modal body is taking longer than expected to load with ajax

Revealing and concealing adjacent elements within a specified class

What is the best way to display multiple values in a single column in a datatable?

NVDA fails to announce the "dialog" when a Modal is launched

When the child element's "aria-expanded" attribute is set to true, a CSS class should be dynamically

Encountering an "Unexpected token '{'" error while attempting to import chart.js is likely due to the import call expecting only one argument

Centering the scrollIntoView feature on mobile devices is presenting challenges with NextJS applications

The success function of the Ajax request remains untouched by the response

Customizing Axios actions in Vue JS using a variable

Vue.js is experiencing an issue with undefined values within computed properties

What is the reason behind Q.js promises becoming asynchronous once they have been resolved?

Ajax request causing bootstrap success message to have shorter visibility

Encountering SCRIPT1014 and SCRIPT1002 errors within an Angular4 application when using Internet Explorer 11

Storing a collection of images simultaneously in Firebase Storage and saving their URLs in a Firestore document using Firebase v9