tip | 返回上一页并刷新

(本文为原创, 遵循 CC 4.0 BY-SA 版权协议, 转载需注明出处: https://blog.csdn.net/big_cheng/article/details/130010733. 文中代码属于 public domain 无版权.)

js 返回上一页并刷新网上搜到的很多做法有问题:
a) 使用referrer: 这个属性由于安全原因在一些情况下会被浏览器置空.
b) location.href = 上一页地址: a页到b页, b页通过此方式再到a页, history里是3页a->b->a, 用户体验会不好.

这篇文章较好:
https://www.jb51.net/article/165478.htm

本文的思路是使用localStorage 存储数据/页面的版本, 页面也缓存自己load 时的版本. 下一页面修改了localStorage 里的版本值返回后, 发现与页面缓存的值不同则reload. 使用pageshow 事件.

首先在body 定义一个隐藏的input 框用来缓存版本值:

<input id="_i_v" type="text" value="" style="display: none;">

读取、设置localStorage 的js 函数:

// 返回存储项, int, 默认0.
function lsGetInt(key) {
	return parseInt(localStorage.getItem(key), 10) || 0;
}

// 递增存储项.
function lsIncInt(key) {
	var v = lsGetInt(key);
	localStorage.setItem(key, v + 1);
}

上面用int 值代表版本值(不同的数据/页面可以分配不同的key), 下一页面修改了数据返回前先lsIncInt 递增版本值, 在上一页面监听"pageshow"(mdn) 事件:

<script>
    window.addEventListener("pageshow", (evt) => {
        var v = lsGetInt(key), old = _i_v.value;
        if (old != "" && old != v) location.reload();
        else _i_v.value = v;
    });
</script>

页面首次load 时走else 分支在"_i_v" input 缓存当时的版本值. 之后从下一页面返回后浏览器(一般)都会保留当初离开时input 里的值, 如果与localStorage 里存储的最新版本值不一致, 则reload.

上面的代码在Chrome/微信浏览器测试正常, 但在FireFox 出现了不停reload 的死循环. 经研究原因在FireFox reload 时默认总是会保留input 之前的值: 例如input 原来"2", reload 后里面还是"2" 而非"", 这样总是会走if 分支reload.

这是一个已经存在十几年的FireFox issue (参考https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete 里的"persist the dynamic disabled state"). 另参考https://cloud.tencent.com/developer/ask/sof/109600, 可以通过关闭autocomplete 来阻止该默认行为.

本文认为autocomplete 和reload 时填充之前的值还是不是一回事, 为此仅修改事件监听:

<script>
    window.addEventListener("pageshow", (evt) => {
        var v = lsGetInt(key), old = _i_v.value;
        _i_v.value = v;
        if (old != "" && old != v) location.reload();
    });
</script>

测试FireFox 也通过.

几点补充:
a) 因为微信浏览器history.back 时不保留原页面上的变量值(var i; window[“i”]), 也不保留data 值(<div data-i>), 所以使用DOM input.
b) 有"pageshow" 监听的页面据说不会加入BFCache.
c) iOS 等设备上未测试过.
d) 安全起见, 还是应专门设计一套防止reload 死循环的机制.