浏览器在用户按了 F5 刷新时 当前运行的 Javascript 会发生什么？页面间交互数据就用 Cookie 和 LocalStorage 之类？
whereabouts 2018-07-09 10:05:53 +08:00 2811 次点击这是一个创建于 2712 天前的主题，其中的信息可能已经有所发展或是发生改变。
网站属于 SPA 单页应用，嵌入了若干 Javascript 脚本，用户如果按了 F5 刷新，是不是当前运行 js 的状态（变量等）都删掉了？这样的话作为前端 Javascript 开发要了解当前 SPA 应用的状态，可以把关键变量存储到 Cookie、LocalStorage 之类的持久化存储来通信？
另外，用户点击了链接跳转到了网站的另一个 URL，当前页面的 js 状态也只终结掉的吧。这种情况下把调用服务器 Url 进行处理的旧网站，改成通过 Url 为#/类型的客户端 Url 路由+Javascript 调用 Api 服务器进行网站数据更新，可以避免因网站 Url 改变导致的 Javascript 重新加载？
前端学的不深，如果上述语言思维混乱请见谅。
另外，用户点击了链接跳转到了网站的另一个 URL，当前页面的 js 状态也只终结掉的吧。这种情况下把调用服务器 Url 进行处理的旧网站，改成通过 Url 为#/类型的客户端 Url 路由+Javascript 调用 Api 服务器进行网站数据更新，可以避免因网站 Url 改变导致的 Javascript 重新加载？
前端学的不深，如果上述语言思维混乱请见谅。
11 条回复 2018-07-10 23:05:09 +08:00
 | 1 ytxbnahn 2018-07-09 10:20:14 +08:00 F5 刷新整个页面重新请求，js 的状态变量消失。通过 hash history 等方法监听变化，去跳转页面，个人感觉类似于 display：none 的显示。自然在页面中的其变量不会发生变化 |
 | 2 azh7138m 2018-07-09 10:28:37 +08:00 html5 history 可以改变 url 而不刷新页面 |
 | 3 Sapp 2018-07-09 10:51:50 +08:00 感觉你说的真的挺混乱的，加 # 实际并没有跳转 url，依旧是留在了原来的页面，页面的变动是 js 处理的，后来的不加 # 改变 url 是 html5 提供的接口处理的，实际也还是没有刷新页面。 |
 | 4 mostkia 2018-07-09 12:08:10 +08:00 @azh7138m 不存在的吧，否则钓鱼网站岂不是爽歪歪。。以前有个项目也有这个需求，但尝试过很多办法，貌似无法做到改变地址栏不刷新页面的效果。后来放弃了。 |
 | 5 jugelizi 2018-07-09 12:12:59 +08:00 pjax 了解一下 |
 | 7 maplerecall 2018-07-09 13:11:09 +08:00 via Android 用户刷新，当前页面的状态全丢，但可以在刷新前执行同步操作，比如写 cookie 和 localStorage，不过做持久化不应当在页面退出时做，因为页面退出事件不一定会被触发… 而无刷新修改 url 现在基本靠的是 history api，用#的 hash 的方法也可以但并不推荐，容易出问题，也不符合 url 的语意。 |
 | 10 whypool 2018-07-09 16:03:29 +08:00 spa 直接 F5 刷新，所有 js 生成的变量都会消失，并且重新执行，如果本地缓存的状态，没来得及存 localStronge 的会丢失 |
| 11 mostkia 2018-07-10 23:05:09 +08:00 @DOLLOR 谢谢，又涨了一些知识（但依旧无法运用到我当时的情况，主要是兼容问题，项目需要兼容 IE8 以上）。 我当时的需求是：客户要求浏览器能记住 spa 单页面上次的具体浏览位置，又要做到外部传入 URL 的定位，如果使用传统#锚点方法倒可以实现，但这会导致手机上反复浏览不同内分页时，产生的巨量后退记录问题（安卓手机通常用户退出会按返回键，但这只能返回上一页，非常不友好，客户不同意），不符合单页面的需求，于是想通过动态写入 url 的方法实现，但当时没有找到合适的方法。我后来通过 js 预处理 URL+cookie 读取上次预览页位置的方法实现了需求，虽然有些笨，但很管用。 |
Select Language