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

[lisongeee]

> 就能像普通页面一样跳转后保留输入数据

好奇这个普通页面是哪种页面？

[solos]

搞个 service 存一下不就行了

[drymonfidelia]

@lisongeee 非 SPA 网站跳转后点返回按钮之前输入的内容都在
@solos 是一个现有的一千多个页面的巨型项目要升级，一个个改一个月都搞不定

[lisongeee]

> 非 SPA 网站跳转后点返回按钮之前输入的内容都在

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

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

而底部的输入框没有丢失是因为文本就存在 localStorage 里，回退的时候再取出来显示就行

[drymonfidelia]

@lisongeee 不是这样的，你做个 html 页面里面只放一个 input 标签，输入点内容，打开别的页面再返回，input 里输入的内容还在

[acoo]

keepalive

[zhuisui]

https://stackoverflow.com/a/8861236/6196166

[xwwsxp]

@drymonfidelia 不一样吧，v2ex 感觉不是 SPA ，是纯原生的，即 HTML 、CSS 、JavaScript 构建的，这种方式的返回按钮是通过浏览器的 history 来给你保存的，而 SPA 应用本质上就是利用的 history 的 API ，并且全是动态的 JS ，这个时候浏览器怎么可能给你保存，可以参考 Vue 中的 keepalive

[xwwsxp]

@drymonfidelia 如果换用 React ，就是 document.createElement(xxx,docuemnt.createElement(xxx)) 这种无限套娃的方式构建的 SPA 应用，和原生差别很大。

[xwwsxp]

@drymonfidelia 不一样吧，v2ex 感觉不是 SPA ，是纯原生的，即 HTML 、CSS 、JavaScript 构建的，这种方式点击返回按钮是通过浏览器的 history 来给你保存的，而 SPA 应用本质上就是利用的 history 的 API ，并且全是动态的 JS ，这个时候浏览器怎么可能给你保存，可以参考 Vue 中的 keepalive

[c3de3f21]

- 简单方式
- 实现一个 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 源码找找思路

[scung]

听上去你可能需要的是 “路由复用” ，可以参考 https://scung.cn/p/Angular%e4%bd%bf%e7%94%a8%e8%b7%af%e7%94%b1%e5%a4%8d%e7%94%a8%e5%ae%9e%e7%8e%b0%e5%8d%95%e9%a1%b5%e5%a4%9a%e7%aa%97%ef%bc%88Tab%ef%bc%89