In Single Page Application, How To Store Data And Get Data After Refresh The Page

Recently I have a problem with how to store data on a single page application. I want to ask how to store data and get the data back after refresh page in a Single Page Application

Solution 1:

The right way is with sessionStorage, because when your browser is closed the variable will be deleted

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStoragevardata = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key')

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Solution 2:

The sessionStorage object is similar to localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab. As per your requirement, this seems more suitable.

Example :

if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
      sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";