概要
在做一个查询系统时，用户会选择很多条件，但在切换页面或者刷新页面时，这些条件就会丢失。为了解决这个问题，我们通常会有书签功能，即保存筛选条件到后端数据库。但是总不能用户更改一个条件，就去保存一次吧，所以设计了这个本地+远端持久化的方案。
流程图
注意观察localStorage的数据流入与流出
主要思想
- 在router的beforeEach里判断是否有query参数，如果有就缓存query到localStorage，然后直接next();否则，把localStorage中缓存的query恢复到路由的query上。
let lastRoute;const beforeEach = function(to, from, next) { // HACK: 避免死循环 if(lastRoute && to.path === lastRoute.path) { next(); lastRoute = null; } else if(!to.name) { // 第一个路由是根路由，这个不处理 next(); } else { const projectId = store.getters.projectId; const persistName = genName(projectId, to.name); // 如果是通过导航来切换路由，query都会是空的，此时需要恢复url参数 if(isEmpty(to.query)) { lastRoute = to; next({ path: to.path, query: { query: getStorage(persistName, true /**使用原生localStorage */) } }); } else { // 否则，如果是F5或者copy的url，那么直接缓存到本地 const {query} = to.query; setStorage(persistName, JSON.parse(query), true /**使用原生localStorage */); next(); } }};复制代码 - 在我们的业务页面里，如果有类似书签这样的功能，应该把当前的筛选条件，同时保存到本地和远端。
- 还有很多细节，需要根据具体的业务编写适应性的代码。