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

请教浏览器如何在 history 中保留更新后的 DOM 状态!

  •  
  •   FinalAir · 2015-08-17 16:16:51 +08:00 · 3113 次点击
    这是一个创建于 3414 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题。

    使用情景如下:在一个页面中(a.html ),存在大量的不刷新 ajax 数据更新操作,每一次的 ajax 之后页面显示和 dom 结构发生变化。跳转到两一个页面( b.html )处理相关操作之后,通过 history.back ()返回到 a.html 页面。

    需求如下:在通过 history.back ()返回之后,看到的 a.html 页面的显示和结构希望是完成最后一次 ajax 更新之后的情景,而不是初次进入 a.html 的情况。

    尝试使用 history.pushState ()和 history.replaceState (),依然无法达到需求预期。

    12 条回复    2015-08-17 21:35:47 +08:00
    napsterwu
        1
    napsterwu  
       2015-08-17 16:17:41 +08:00
    这不就是 ajax 的短板么
    loading
        2
    loading  
       2015-08-17 16:36:00 +08:00 via Android
    也许你还需要配合 localstorage
    ffffwh
        3
    ffffwh  
       2015-08-17 17:22:14 +08:00
    "大量的不刷新 ajax 数据更新操作"大量是多少?
    一般我是重新请求&重做一遍 dom
    FinalAir
        4
    FinalAir  
    OP
       2015-08-17 17:25:25 +08:00
    @loading
    @ffffwh
    你们的意思是, ajax 之后 localstorage 状态变量,当页面刷新,前进或者后退时,根据状态变量,重做 dom ?
    FinalAir
        5
    FinalAir  
    OP
       2015-08-17 17:27:19 +08:00
    @ffffwh 大量大概是十几次的 ajax 通信吧,但我只需要保存最后一次更新的页面或 dom 结构。
    69
        6
    69  
       2015-08-17 17:51:56 +08:00   ❤️ 3
    分兩種情況:

    一、重新打開頁面之後,通過 AJAX 獲取的狀態(例如用戶信息、列表數據等)要更新到最新數據;
    二、重新打開頁面的時候,只要展示關閉頁面之前的數據即可;

    如果是一:對每個 AJAX 操作做一個記錄,下次打開的重新執行這些操作;
    如果是二:整個頁面的 DOM 結果保存到 localstorage 中,下次打開的時候直接讀取替換當前 DOM ;
    sneezry
        7
    sneezry  
       2015-08-17 20:12:42 +08:00 via iPhone
    hash 记状态
    ChefIsAwesome
        8
    ChefIsAwesome  
       2015-08-17 20:30:29 +08:00 via Android   ❤️ 1
    一,跳 b 也走 ajax ,然后 history 或者 hash 改 URL , a 的状态就保留了。
    二, a 的 ajax 是响应某个状态的, hash 或者 cookie , local storage 等等。进页面的时候先读那个状态。用户的操作也是改变那个状态。
    FrankFang128
        9
    FrankFang128  
       2015-08-17 20:33:09 +08:00 via Android
    每次刷微博 /推特都会想到楼主这个问题。

    他们都没解决,楼主。。。
    FrankFang128
        10
    FrankFang128  
       2015-08-17 20:33:52 +08:00 via Android
    新页面打开不就好了 ,哈哈
    dong3580
        11
    dong3580  
       2015-08-17 21:15:22 +08:00   ❤️ 1
    1. localstorage 缓存对象;
    2. 用 angularjs 的$scope 记下对象,无需使用 history 保存 dom 状态,直接更新状态;
    3. 跳第二个页面的时候后端异步处理,返回处理后的 key ,带到返回页面请求结果。
    FinalAir
        12
    FinalAir  
    OP
       2015-08-17 21:35:47 +08:00
    @69
    @ChefIsAwesome
    @dong3580
    思路已清晰,感谢已发,谢谢。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2377 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 02:23 · PVG 10:23 · LAX 18:23 · JFK 21:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.