Develop Reference

use javascript history to discard consecutive clicks on the same page

So, I'n NOT a frontend guy, please bear with me..
I have pages, where you submit forms (target and current urls are identical) a number of times, before you wan't to go back to the previous page.
The way the submits are processed, is that the form is posted, and then the user is redirected, so that a reload doesn't re-submit(POST) the form - I'm not sure if this is the optimal approach to achieve this..
The issue is that this will only take the user back to the same page, since if eg. a form on page A was submitted twice, the history will have:
page A (current)
page A (submit, yielding a redirect)
page A (previous load)
page A (submit, yielding a redirect)
page A (original load)
previous page
Now I'd like the back button to take the user back to the previous page (#6), and in order to do that I'm guessing I'd need to introduce code on each page (with forms at least) which:
checks if the referrer has identical url as the current one, and if so, does history.popState
on submitting any form, check if the target and current urls are identical does history.popState
Is this a sound strategy, or is there are better way to achieve this?

Html
<a href="index.html"
onclick="handleClick(this);">Click</a>
Javascript
const handleClick = (e) =>{
locaiton.replace(e.href);
return false;
}

This doesn't seem possible, so I took another route, where I'd avoid using the back button, but rather offer links to the previous page, based on the context.

How can i get the previous page domain without using document.referrer

When I use document.referrer to get info of the previous page, sometimes it returns null, I wonder is any other method to get the domain of the previous page?
This is for front-end, ReactJs

You may try either of this:
window.history.back();
window.history.go(-1);
In the second example, go(-1) reads as "Go 1 step back in history". You could use go(-2) to go back 2 steps and so on

How to maintain states of selection on back button

I am using HTML and JavaScript to write Android APP, but I have a problem that when go back from current page to the previous page, the page is reloaded and the selection and setting when I made in the first goes to default.
For example: On the first page user can select country and city and then navigate to second page.
If user clicks on back button (which calls window.history.back(); or href="javascript:history.back(-1);")
, then all the selection he made are lost and default selections are shown.
It works fine in native browser of Android.
How to maintain state of selection?
Thanks in advance!

You need to make dummy history to disable history back button.
var originalHash = document.hash || "#dummyMain"
location.assign("#dummyBack")
location.assign(originalHash)
window.addEventListener("popstate",function(){
if(location.hash == "#dummyBack"){
window.history.pushState(null,null,originalHash)
}else{
originalHash = location.hash
}
});
The code above create dummy page history and checks if page transitions are occurred via history back button or not and if so,force page move to current page again to stop history back action.
Since You didn't put any code in the question,It's hardly possible to say it will work or not but I guess once you load this code,it should disable all page back action.
If you are using PC/Mac to use this site,please try to open developper tools/firebug javascript console and copy/paste the code and press history back button to see how it works.

I find a good way to maintain the data of previous page, which use localStorage store the data as key value before leaving this page and again when come back to this page you can get your data again from localStorage` and display it.
Because the data which is loaded by AJAX will be last on history back.
Hope this help someone may has this problem.

How to parse URL for page navigation when clicking the back button on single page site using ajax?

I am working on this website http://techxpertschico.com which uses ajax and .htaccess to update a single index.php page, the problem is that I can't get the back button to work. For example if you click two separate top header links and then click back it will not change the content you are looking at even though the url will be updated. This is because my logic to direct the user to the proper web page happens using php but when a user clicks the back button they receive a cached copy of the page therefore no server request. In fact, you'll notice if you click refresh on my site after clicking the back button it will load the correct content because it will send out the server request. My first thought to fix this was to force a refresh when a user clicks the back button, but I couldn't get this to solve the problem. I tried using header files, I tried using javascript, and I failed, so I'm asking for help once more. I just need to be able to parse the URL and direct them to the appropriate page but normally I do this using php and since the back button uses caching I am not sure if I need a javascript solution or if I need to try harder to figure out the forced refresh approach.... What would you do, or what do other sites that use a single index.php file do?
P.S. I'll post any code if you need to see it. Looking at my question from yesterday might help. How to refresh page on back button click?

Your problem is not related to the cache mechanism.
I've just checked your website using firebug and I have noticed that after loading the home page (without ajax), you use ajax to load requested page asynchronously and change URL in the address, the URL altering is done by your code which is ignored by firefox.
The URLs altered with code are not kept in the browser's history, this is why the Back button doesn't work in your case

EDITED, added own working Code example
If you are still working on this:
I do suggest you take a look into this article
change-browser-url-without-page-reload
I think it explains a good method which is not too complicated to make use of the HTML5 history possibilities.
Here's the code I finally implemented on my site, and the only issues I have is with my expandable menu states when going back in history..
HTML just uses a DIV with #content-main on your index.html, for all the external html-file contents will be loading into it.
The links(anchor) which should direct to that DIV get a class assigned: ajaxLink
In your referenced html-files, just write the content, no head or body.
You may include scripts, though, if it makes sense to not put them on your index page.
$(function () {
//AJAX: load html-pages dynamically into this site's div (#content-main), and add browser history and URL support
/*unnecessary? I don't use the next 3 lines of code
//To override the default action for the link(anchor tag), use the following jQuery code snippet.
$("a.ajaxLink").on('click', function (e) {
//code for the link action
return false;
});
*/
//Now to get the ajax content and display it and change the browser URL to the specific location without refresh use the following code.
$("a.ajaxLink").on('click', function (e) {
e.preventDefault();
/*
- if uncomment the ABOVE line, html5 nonsupported browers won't change the url but will display the ajax content;
- if commented, html5 nonsupported browers will reload the page to the specified link.
*/
//get the link location that was clicked
pageurl = $(this).attr('href');
//to get the ajax content and display in div #content-main
$('#content-main').load(pageurl);
//to change the browser URL to the given link location
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
//stop refreshing to the page given in
return false;
});
//the below code is to override back button to get the ajax content without page reload
//added some details from http://rosspenman.com/pushstate-jquery/ - otherwise going back in history to initial page resulted in issues
$(window).on('popstate', function(e) {
if (e.originalEvent.state !== null) {
$('#content-main').load(location.pathname);
}
else {
$('body').load(location.pathname);
}
});
});

to restore a same id in the page when refreshed

I am working on javascript as well as jquery. and i am using 2divs in my page. so when my page loads the second div is hidden and when a button from the first div is clicked it navigates to the second page. so when i press refresh button now. the page navigates to the first div as it reacts when the page is opened for the first time. any ideas or suggestions to make the second div display even when the page is refreshed. thanks in advance. here is my fiddled code it works fine in the fiddle as i exactly want. but it fails in my project code. http://jsfiddle.net/pWryf/ . any example to attain this through cookies.?
Here is my code for the div:
$('#sbut1').click(function() {
$('.cont1').show();
$('#log1').hide();
});

Try something like this using localStorage:
$('#sbut1').click(function() {
$('.cont1').show();
$('#log1').hide();
localStorage['shown'] = '.cont1';
});
$(function() {
var sel;
if (sel = localStorage['shown']) {
$('.cont1, #log1').hide().filter(sel).show();
}
});
http://jsfiddle.net/5aJZR/
Use can also use cookies for this purpose.

I can think of atleast 2 frontend approaches to this problem:
using a cookie or a more modern localstorage solution to handle sessions. (already been here, cookie)
using a one page app, where navigations is after the hash # sign. such as in backbone webapps.
You can also use some kind of server side session handling, most web framework have one embedded.