Vue项目查询条件持久化流程设计

概要

在做一个查询系统时，用户会选择很多条件，但在切换页面或者刷新页面时，这些条件就会丢失。为了解决这个问题，我们通常会有书签功能，即保存筛选条件到后端数据库。但是总不能用户更改一个条件，就去保存一次吧，所以设计了这个本地+远端持久化的方案。

流程图

注意观察localStorage的数据流入与流出

主要思想

1. 在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();
    }
  }
};

2. 在我们的业务页面里，如果有类似书签这样的功能，应该把当前的筛选条件，同时保存到本地和远端。
3. 还有很多细节，需要根据具体的业务编写适应性的代码。