So I'm trying to create a localStorage for one of my pages, so the user doesn't have to submit their selected GET forms all the time when they load the webpage.
I've made two variables url (current url) and defaultUrl (url without parameters (not used atm)), then i thought that I should set the localStorage when the user closes the tab/page by running window.onbeforeunload. But how should I create the redirect? Because right now it loops... And I don't know how to do this properly
var url = location.href; //Current page
var defaultUrl = location.protocol + '//' + location.host + location.pathname; //without parameters
//When page is closed
window.onbeforeunload = function() {
return localStorage.setItem("url", url);
};
//If local storage is set then load it? BUT HOW? Loops right now...
if (localStorage.getItem("url") !== null) {
var oldUrl = localStorage.getItem("url");
localStorage.removeItem("url");
window.location.replace(oldUrl);
}
Edit
I've managed to create a solution for my problem, with some help from you guys.
//LocalStorage saves/redirects to url
var url = location.href; //Current page
var defaultUrl = location.protocol + '//' + location.host + location.pathname; //without parameters
//If the user access the default webpage url then redirect (Only if localStorage isn't default page for some reason)
if (url === defaultUrl) {
if (localStorage.getItem("url") !== null) {
var oldUrl = localStorage.getItem("url");
localStorage.removeItem("url");
if (oldUrl !== defaultUrl) {
window.location.replace(oldUrl);
}
} else {
localStorage.setItem("url", url);
}
} else {
//If the user followed a link to the webpage or made a GET request then save this for later
localStorage.setItem("url", url);
}
//All GET submits should have this class, due to it resets the LocalStorage so it's ready to be set again on reload
$(document).on('click', '.formClickResetUrl', function(event) {
if (localStorage.getItem("url") !== null) {
localStorage.removeItem("url");
}
});
First of all, window.onbeforeunload is deprecated.
When it is working, your code effectively keeps "url" key in localStorage. After you removeItem, it navigates to oldUrl, onbeforeunload is triggered, "url" is added again.
Try following without onbeforeunload
if (localStorage.getItem("url") !== null) {
var oldUrl = localStorage.getItem("url");
localStorage.removeItem("url");
window.location.replace(oldUrl);
} else {
localStorage.setItem("url", url);
}
Revised:
var url = location.href; //Current page
if (location.search.length === 0) { // url without parameters, the default page (i suppose)
if (localStorage.getItem("url") !== null && localStorage.getItem('defurl')) {
var oldUrl = localStorage.getItem("url");
window.location.replace(oldUrl);
}
localStorage.setItem('defurl', true); // visited the default page
} else if (!localStorage.getItem('defurl')) { // someone copy/paste a url with parameter, redirect to default page
window.location.replace(location.pathname);
} else {
//If the user followed a link to the webpage or made a GET request then save this for later
localStorage.setItem("url", url);
}
click event handling is not required.
Revised 2, no redirect for url with parameters
var url = location.href; //Current page
if (location.search.length === 0) { // url without parameters, the default page (i suppose)
if (localStorage.getItem("url") !== null) {
var oldUrl = localStorage.getItem("url");
window.location.replace(oldUrl);
}
} else {
//If the user followed a link to the webpage or made a GET request then save this for later
localStorage.setItem("url", url);
}