V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
drymonfidelia
V2EX  ›  Angular

Angular 页面跳转后返回前页状态(输入的数据)丢失,有没有什么简单的包引入后就能像普通页面一样跳转后保留输入数据?

  •  
  •   drymonfidelia · 222 天前 · 1725 次点击
    这是一个创建于 222 天前的主题,其中的信息可能已经有所发展或是发生改变。
    12 条回复    2024-04-20 11:50:33 +08:00
    lisongeee
        1
    lisongeee  
       222 天前
    > 就能像普通页面一样跳转后保留输入数据

    好奇这个普通页面是哪种页面?
    solos
        2
    solos  
       222 天前
    搞个 service 存一下不就行了
    drymonfidelia
        3
    drymonfidelia  
    OP
       222 天前 via iPhone
    @lisongeee 非 SPA 网站跳转后点返回按钮之前输入的内容都在
    @solos 是一个现有的一千多个页面的巨型项目要升级,一个个改一个月都搞不定
    lisongeee
        4
    lisongeee  
       222 天前
    > 非 SPA 网站跳转后点返回按钮之前输入的内容都在

    那是你看的网站自己使用内部逻辑去保留了数据

    比如 V2EX 不是 spa 吧,但是你在顶部的搜索框随便输入几个字符(别按回车) 然后点击页面上其它地方的链接,再回来,这个搜索框的内容丢失了

    而底部的输入框没有丢失是因为文本就存在 localStorage 里,回退的时候再取出来显示就行
    drymonfidelia
        5
    drymonfidelia  
    OP
       222 天前 via iPhone
    @lisongeee 不是这样的,你做个 html 页面里面只放一个 input 标签,输入点内容,打开别的页面再返回,input 里输入的内容还在
    acoo
        6
    acoo  
       222 天前
    keepalive
    xwwsxp
        8
    xwwsxp  
       222 天前
    @drymonfidelia 不一样吧,v2ex 感觉不是 SPA ,是纯原生的,即 HTML 、CSS 、JavaScript 构建的,这种方式的返回按钮是通过浏览器的 history 来给你保存的,而 SPA 应用本质上就是利用的 history 的 API ,并且全是动态的 JS ,这个时候浏览器怎么可能给你保存,可以参考 Vue 中的 keepalive
    xwwsxp
        9
    xwwsxp  
       222 天前
    @drymonfidelia 如果换用 React ,就是 document.createElement(xxx,docuemnt.createElement(xxx)) 这种无限套娃的方式构建的 SPA 应用,和原生差别很大。
    xwwsxp
        10
    xwwsxp  
       222 天前
    @drymonfidelia 不一样吧,v2ex 感觉不是 SPA ,是纯原生的,即 HTML 、CSS 、JavaScript 构建的,这种方式点击返回按钮是通过浏览器的 history 来给你保存的,而 SPA 应用本质上就是利用的 history 的 API ,并且全是动态的 JS ,这个时候浏览器怎么可能给你保存,可以参考 Vue 中的 keepalive
    c3de3f21
        11
    c3de3f21  
       222 天前
    - 简单方式
    - 实现一个 CacheService ,两个接口 setCache(key,data),getCache(key),底层可以用 sessionStorage 实现
    - 所有组件的状态都放到一个字段里 `state`,组件离开的时候 setCache('key,state)
    - 组件初始化的时候 getCache(key)?this.state = getCache(key):初始化 state
    - 复杂方式
    - https://github.com/ng-alain/delon/blob/master/packages/abc/reuse-tab/provide.ts 可以看看 ng-alain 的 reuseTab 源码找找思路
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5411 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 05:49 · PVG 13:49 · LAX 21:49 · JFK 00:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.