浏览器在用户按了 F5 刷新时当前运行的 JavaScript 会发生什么？页面间交互数据就用 Cookie 和 LocalStorage 之类的？

This topic created in 2900 days ago, the information mentioned may be changed or developed.

网站属于 SPA 单页应用，嵌入了若干 JavaScript 脚本，用户如果按了 F5 刷新，是不是当前运行 js 的状态（变量等）都删掉了？这样的话作为前端 JavaScript 开发要了解当前 SPA 应用的状态，可以把关键变量存储到 Cookie、LocalStorage 之类的持久化存储来通信？
另外，用户点击了链接跳转到了网站的另一个 URL，当前页面的 js 状态也只终结掉的吧。这种情况下把调用服务器 Url 进行处理的旧网站，改成通过 Url 为#/类型的客户端 Url 路由+JavaScript 调用 Api 服务器进行网站数据更新，可以避免因网站 Url 改变导致的 JavaScript 重新加载？
前端学的不深，如果上述语言思维混乱请见谅。

JavaScript

URL

网站

变量

11 replies • 2018-07-10 23:05:09 +08:00

ytxbnahn

Jul 9, 2018

F5 刷新整个页面重新请求，js 的状态变量消失。通过 hash history 等方法监听变化，去跳转页面，个人感觉类似于 display：none 的显示。自然在页面中的其变量不会发生变化

azh7138m

Jul 9, 2018

html5 history
可以改变 url 而不刷新页面

Sapp

Jul 9, 2018

感觉你说的真的挺混乱的，加 # 实际并没有跳转 url，依旧是留在了原来的页面，页面的变动是 js 处理的，后来的不加 # 改变 url 是 html5 提供的接口处理的，实际也还是没有刷新页面。

mostkia

Jul 9, 2018

@azh7138m 不存在的吧，否则钓鱼网站岂不是爽歪歪。。以前有个项目也有这个需求，但尝试过很多办法，貌似无法做到改变地址栏不刷新页面的效果。后来放弃了。

jugelizi

Jul 9, 2018

pjax 了解一下

azh7138m

Jul 9, 2018 via Android

@mostkia 你不是 spa 吗。。。。

maplerecall

Jul 9, 2018 via Android

用户刷新，当前页面的状态全丢，但可以在刷新前执行同步操作，比如写 cookie 和 localStorage，不过做持久化不应当在页面退出时做，因为页面退出事件不一定会被触发…
而无刷新修改 url 现在基本靠的是 history api，用#的 hash 的方法也可以但并不推荐，容易出问题，也不符合 url 的语意。

AV1

Jul 9, 2018

@mostkia
history.pushState({},'','/请用现代浏览器执行 /再看看地址栏的变化')

temp178

Jul 9, 2018 via Android

@mostkia 存在的，好像要有 Url 要同源，钓鱼网站改不成真正网站

whypool

Jul 9, 2018

spa 直接 F5 刷新，所有 js 生成的变量都会消失，并且重新执行，如果本地缓存的状态，没来得及存 localStronge 的会丢失

mostkia

Jul 10, 2018

@DOLLOR 谢谢，又涨了一些知识（但依旧无法运用到我当时的情况，主要是兼容问题，项目需要兼容 IE8 以上）。
我当时的需求是：客户要求浏览器能记住 spa 单页面上次的具体浏览位置，又要做到外部传入 URL 的定位，如果使用传统#锚点方法倒可以实现，但这会导致手机上反复浏览不同内分页时，产生的巨量后退记录问题（安卓手机通常用户退出会按返回键，但这只能返回上一页，非常不友好，客户不同意），不符合单页面的需求，于是想通过动态写入 url 的方法实现，但当时没有找到合适的方法。我后来通过 js 预处理 URL+cookie 读取上次预览页位置的方法实现了需求，虽然有些笨，但很管用。

浏览器在用户按了 F5 刷新时 当前运行的 JavaScript 会发生什么？页面间交互数据就用 Cookie 和 LocalStorage 之类的？

浏览器在用户按了 F5 刷新时当前运行的 JavaScript 会发生什么？页面间交互数据就用 Cookie 和 LocalStorage 之类的？