V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
whereabouts
V2EX  ›  问与答

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

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