页面加载时借助localStorage实现重定向 避免重复提交GET表单

需求说明 #

为页面接入localStorage存储能力，用户加载网页时无需每次重复提交已选择的GET表单。

问题版原有代码 #

预先定义了两个变量：url（当前页面地址）、defaultUrl（不带参数的页面地址，初始版本暂未使用），原本计划通过window.onbeforeunload事件在用户关闭标签页或页面时将地址存入localStorage，但跳转逻辑出现死循环，原有代码如下：

var url = location.href; //当前页面地址
var defaultUrl = location.protocol + '//' + location.host + location.pathname; //不带参数的页面地址

//页面关闭时触发
window.onbeforeunload = function() {
    return localStorage.setItem("url", url);
};

//如果localStorage有存储的地址则加载？当前逻辑出现死循环
if (localStorage.getItem("url") !== null) {
    var oldUrl = localStorage.getItem("url");
    localStorage.removeItem("url");
    window.location.replace(oldUrl);
}

最终实现代码 #

调整跳转判断逻辑后解决死循环问题，最终代码如下：

// localStorage存储/跳转对应地址
var url = location.href; //当前页面地址
var defaultUrl = location.protocol + '//' + location.host + location.pathname; //不带参数的页面地址

// 仅当用户访问无参数的默认页面地址时触发跳转（排除localStorage意外存储默认地址的情况）
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 {
    // 如果用户通过链接访问页面、或者提交了GET请求，将当前地址存储到localStorage留待后续使用
    localStorage.setItem("url", url);
}

// 所有GET表单提交按钮需要添加该类名，提交时清空localStorage，便于页面重载后存储新的参数地址
$(document).on('click', '.formClickResetUrl', function(event) {
    if (localStorage.getItem("url") !== null) {
        localStorage.removeItem("url");
    }
});

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup