Navigating back to Search Page with same state (JavaScript)

Question

How do I, using JavaScript, retain the state of the search page, when a user clicks into a search result, but then goes back to the main search page.

e.g.

Answer 1

You can use localStorage to keep the search filter data. The concept is to keep all filter data in an array and keep that array in the localStorage of the browser before any redirection. Here is an official documentation with implementation of localStorage.

Here is a demo:

//before redirection
let filterData = [];
localStorage.setItem("searchFilter", JSON.stringify(filterData));

//after page-load
let cachedFilterData= JSON.parse(localStorage.getItem("searchFilter"));
if(cachedFilterData.length>0){
    //cache data exist
}

//when you need to delete cache
localStorage.removeItem("searchFilter");

Answer 2

You can simply do it by saving the data in users device . You can do it by using cookies or by localStorage. I prefer localStorage because users can deny cookies easily. Like this-

localStorage.setItem("tags",tagItemsInAnArray);

And laterlocalStorage.getItem("tags");