HTML5 History - Back button to previous full page?
Question
I'm using the HTML5 history API to modify the URL as certain product properties are selected (eg green car, blue car) to allow for deep-link sharing.
However, this isn't a single page app, so I don't want to hijack the user's back button: if they press back, I want to allow them to go to the previous page, not the previous car color.
What is the best way to achieve this?
Example history:
/page1
/page2
/page2?color=green
/page2?color=red
/page2?color=blue
Then press the browser's back button to go back to /page1
2 answers
solution1
4 ACCPTED 2016-05-13 19:50:04
Looks like I should have been using
history.replaceState();
instead of history.pushState(); . It replaces the browser's URL, but doesn't add to the history object, so the back button works as I want it to.
history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one.
solution2
0 2016-05-13 20:07:11
Here's a solution using sessionStorage that gives your application the ability to go to a previously stored page, without breaking usability expectations/browser back button functionality. Moving to a previous URL (eg different color) is the expected result of using the back button on the browser for the user.
JS
function getCurrentPath() {
return sessionStorage.getItem("currentPath");
}
function getPreviousPath() {
return sessionStorage.getItem("previousPath");
}
function setCurrentPath(path) {
var currentPath = getCurrentPath();
if (currentPath != path) {
sessionStorage.setItem("previousPath", currentPath);
sessionStorage.setItem("currentPath", path);
} else {
console.log('Path has not changed: ' + path);
}
}
function goToPrevious() {
var previousPath = getPreviousPath();
if (previousPath && previousPath != 'null') {
window.location.href = previousPath;
} else {
alert('Previous page is not defined.');
}
}
test1.html
<!DOCTYPE html>
<html>
<head>
<title>Test 1</title>
<meta charset="UTF-8">
<script src="test.js"></script>
<script>
setCurrentPath('test1.html');
console.log('Current Path:', getCurrentPath());
console.log('Previous Path:', getPreviousPath());
</script>
</head>
<body>
<button onclick="goToPrevious();">Go to previous page</button>
<a href="test2.html">Test 2</a>
<a href="?color=red">Red</a>
<a href="?color=green">Green</a>
<a href="?color=blue">Blue</a>
</body>
</html>
test2.html
<!DOCTYPE html>
<html>
<head>
<title>Test 2</title>
<meta charset="UTF-8">
<script src="test.js"></script>
<script>
setCurrentPath('test2.html');
console.log('Current Path:', getCurrentPath());
console.log('Previous Path:', getPreviousPath());
</script>
</head>
<body>
<button onclick="goToPrevious();">Go to previous page</button>
<a href="test1.html">Test 1</a>
<a href="?color=red">Red</a>
<a href="?color=green">Green</a>
<a href="?color=blue">Blue</a>
</body>
</html>
You can see that this allows the user to change query string parameters, but this does not affect your functionality for moving to a previous page through a forward action, simply by storing changes between paths. You could extend this by using an array rather than simply two values like I've done here, but I'll leave that up to implement, should you wish to do so.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.