一、前言
在前段时间公司有个需求是对前一个页面的操作进行记忆，例如分页的样式，选中的条件等。之前是用的session去存储记忆数据，老大让我调研一下目前比较合理的方式然后分析一下，这里以本篇博客作为总结。
二、核心思想
既然需要返回上一个页面时能够回到上一次的操作界面, 势必需要对某些数据进行记忆, 所以关键点就是缓存数据.随之而来的问题是:
- 需要缓存哪些数据
- 数据缓存在什么位置
- 缓存的数据何时应该销毁, 如何销毁
- 某种场景下如果用户就想要一个全新的页面而不需要缓存数据如何实现
我觉得如果我们能解决这几个问题，那么整个问题就迎刃而解了。
三、常用方式
经过搜索之后，目前比较主流的记忆方式都采用了下面几种方式:
- vue 的 keep-alive, react中也有类似的库实现该功能(react-keeper)
- 使用url记忆数据
- 使用sessionStorage/localStorage记忆数据
- 使用redux/vuex记忆数据
其中第一种方式和其他三种略有区别，他的核心思想是将虚拟结点缓存下来，下次渲染时直接取出上次的缓存。达到记忆的效果。而后面几种方式都是存储关键数据，下次渲染时再根据这些数据进行渲染。最后就决定从这几种方式里面选取一种方式去实现。
四、方法比较
- 缓存虚拟结点
- 典型案例: vue中的keep-alive组件
- 实现原理: 第一次渲染完组件后, 将组件的VNode结点缓存在this.cache中, 下次渲染组件时会直接从cache中取出对应结点进行渲染.
- 何时销毁: 重新刷新页面会导致缓存失效.因为数据存储在vue实例中, 刷新页面会导致vue重新走一遍生命周期, 所以缓存自然失效. 同时keep-alive提供了两个钩子函数activated和deactivated在组件激活和停用时调用.
- 优点: 总体来说比较方便, 不需要自己做太多的工作
- 缺点: 如果页面组件比较多, 全部缓存起来内存消耗较大, 很可能会有性能问题.
- 缓存关键数据
- 实现原理: 在加载组件后, 缓存部分关键数据, 在下次加载时, 如果有缓存的数据优先使用缓存的数据, 否则加载默认的数据, 同时目前可选的缓存方式是下面几种
- url缓存
- 何时销毁: 与url相关, 只要url中存在数据就会使用url中的数据
- 优点: 方便快捷
- 缺点: 如果用户直接复制url给他人, 也会使用url中的参数, 即也会有记忆效果, 不太合理.同时只能记录简单的值, 比如滚动条的位置.如果记录数据较多会造成url过长
- sessionStorage缓存
- 何时销毁: 会话被关闭的时候清除数据
- 优点: 只与当前会话有关, 存储上限较多, 可以存储较复杂的数据, 关闭页面时sessionStorage自动清除
- 缺点: 用户刷新页面时, session不会自动清除, 但是用户此时可能想要一个全新的页面, 需要使用者手动判断多种情况.
- localStorag缓存
- 何时销毁: 不会自动销毁…只能手动销毁
- 优点: 可以长期存储
- 缺点: 退出页面时需要手动清除记忆数据, 除非有长期记忆的需求.
- vuex/redux缓存
- 何时销毁: 应该和缓存虚拟结点的效果差不多, 因为都和vue/react本身有关, 刷新时会失效.
- 优点: 相对于虚拟结点来说可以只缓存关键数据, 并且开发者可能对vuex/redux更加熟悉, 开发起来更加方便
- 缺点: 刷新页面不能记住数据.
- url缓存
- 实现原理: 在加载组件后, 缓存部分关键数据, 在下次加载时, 如果有缓存的数据优先使用缓存的数据, 否则加载默认的数据, 同时目前可选的缓存方式是下面几种
五、总结
由于公司项目特点，第一种方式并不适合我们，所以最后决定从后面三种方式中选取一种。而个人感觉这几种方式实现起来没有太大的区别，同时之前就是使用的session作为数据存储的载体，所以决定继续使用session来实现页面的记忆。
