We Keep Coding

Navigating back to Search Page with same state (JavaScript)

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.
HTML:
https://startech-enterprises.github.io/docs/guides/data-analytics/data-analytics.html
There are 5 elements that determine what is shown on the page:
What tags are clicked in the three filter menus, on the side
What search term is typed into the search menu bar, at the top
The pagination page that is selected, at the bottom
Problem is that whenever I go into the search result, and navigate back to the main search page, the search page resets itself, so I have to re-enter the search criteria again - which can be quite annoying.
If I click 'back' in the browser, the search page state is retained, but the search script stops working. Also, using the 'browser' back button only goes back one 'link' - so if the user clicks on several links in any page (returned from the search), they have to press the 'back' button many times, to get back to the main search page - which again isn't ideal.
Any ideas on how to solve this? Would seem like a fairly common problem?
The site is purely static, (generated using Markdown and Jekyll). Site interactivity is set with Vanilla JavaScript, and SASS/SCSS.
Pls do help!
Many thanks in advance.
Sachin
UPDATE: This has now been solved based on the answers given below

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

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

Keep data in divs when comming back from other page

Firstly, I didn't know how to give a short description of the problem in the title, let me explain it here.
I'm creating social site, with all common features like/comments etc. Imagine Twitter/Instagram. I do have main/home page where all posts are displayed. Every post has a like button, so when it is clicked it triggers a AJAX function to send request to Django server to update the database with new like. This JS function also changes the style of the button, so user can know that he liked it. So far so good. Now when he decides that he want to comment this post, he clicks it and is redirected to the new page - the detail page. Here when the page is loading with data from server his like he gave earlier is visible(the div is red). All right, he commented, but know when pressing back button, in order to go to the home page, his like under the post is not more visible without reloading the page. I will demonstrate it using images.
Now I'm using JS function to reload whole page, to get from Django server all new data, but I don't think it is good idea.
<script>
if (!!window.performance && window.performance.navigation.type === 2) {
// value 2 means "The page was accessed by navigating into the history"
console.log('Reloading');
window.location.reload(); // reload whole page
}
</script>
Is there a better way of doing this?

Javascript - Go Back Page List

Current working code to go back one page:
onclick="location.href=document.referrer; return false;
This code allows me to go back by one page only. Are there any code snippets that would allow to go back multiple pages similar to a browser's back button?
I understand there is a go() method to use with window.history.go(-i) but that doesn't solve the need. I am hoping to show a list of pages visited for a user to click on the desired page. This is similar functionality to a browser's back button.
In essence, trying to go back sequentially instead of jumping back x number of pages.
Thanks in advance for all of your inputs.

jquery history.go() to a specific page after navigating to different pages

I have a scenario where I want to return to a specific page after I navigate to different pages. The scenario is that a user makes a search, gets the results in the same page. He can then make updates on the a specific result on a different page. I would like to create a link that can bring the user back to the search result page. I am trying to user history.go(specificnumber), but how can I get the variable specificnumber from when the user make its first search to the number of page visited or loaded after the search. Or am I in the wrong direction for the implementation?

Maybe I misunderstood your question but if you just want to go to a previous page you can use window.history.back();
Otherwise if you want to save all input data from user (to user) and use it to navigate next you can just use document.cookies or localStorage.

How to go back to previous page in asp.net while retaining the previous page data

I am having problem while using onclick="javascript:history.back();" with Aspnet. In the first page i filled some data and click search button it show some results, i click on particular result for its details which navigate to the 2nd page but when i click on custom back button it refresh the page and all data set to initial values,when i use onclick="javascript:history.back();" I get nothing but the page displays "webpage has expired."
Thanks in advance!

This is because you are using HTTP POST for your search page.
If you use HTTP GET (putting your parameters in the querystring) - then the browser won't display this message.
This has nothing specifically to do with ASP.NET. It's a (sensible) browser behaviour to prevent you from repeating an action that may have undesirable impacts (for instance, sending two copies of an order)