刷新页面仍保留当前数据显示

刷新页面仍保留当前数据显示

背景：若当前该页面有数据（有任务），要求刷新保留当前的数据（任务）；关闭当前会话（页面）或完成任务后则把当前任务结束（清空），页面为空数据页。
保留数据一般用到：

1. localstorage
保存数据，长期有效直到过期（设置了过期时间）

 localStorage.setItem(keyname, value); //key and value should be string.
 localStorage.getItem(keyname);

2. sessionStorage
当前会话有效，同一个域名（如http://www.baidu.com/id=1234和http://www.baidu.com/search=ddsddfaf）下打开的tab都有当前会话的数据。（图片这里打开的两个页面为两个tab）

当前域名下的所有tab都关闭了，才算失效。

 sessionStorage.setItem(keyname, value); //key and value should be string.
 sessionStorage.getItem(keyname);

3. cookie
在客户端存储数据，移动端开发或者单纯的html页面想要存放值在下次打开页面还有效的时候，可以用cookie。
cookie的大小是受限的，并且每次请求一个新的页面的时候cookie都会被发送给服务端，让服务端返回cookie存储的sessionid的相关数据，这样无形中浪费了带宽，且不安全；另外cookie还需要指定作用域，不可跨域调用。

此处背景要求当前会话若有任务则保留数据，用sessionStorage更加合适。

1.刷新时检验当前页面是否有任务，此处通过有无生成任务id来判断是否有任务，若有任务，存储当前会话的任务id，当组件加载时若sessionStorage中有id则拿id重新请求数据（任务相关的数据，任务详情/任务列表）。
注意⚠️：在重新请求获取数据时，需要刷新组件（刷新组件看下一篇文章），否则会有旧数据存在，可能会导致组件渲染混乱/显示错误的旧数据。

  async getData() { //请求task详情和列表
    try {
      await this.getDetail();
      await this.getOrderList();
    } catch (error) {
      this.$message.error(error);
    }
  }
  async init() {//初始化数据
    this.taskId = sessionStorage.getItem('task_id') || '';
    if (this.taskId) {//如果有id则请求task相关数据
      await this.getData();
    } else {//没有则置空（更保险），也可以不置空，通过组件绑定的key属性的变化重新更新组件。
      this.taskData = [];
      this.taskDetail = {};
    }
  }
  
  private mounted() {
    this.init();
    window.onbeforeunload = () => {//window.onbeforeunload，在页面刷新前执行
     if (this.taskId) {
        sessionStorage.setItem('task_id', this.taskId);
      }
    };
  }

2.点击complete按钮完成任务，跳转空白数据页，等待新的任务流程。

    const routerData = this.$router.resolve({
      name: 'task',
      query: {
        tabs: `${(this.infoValues as any).task_type}`,//用query记录某些需要保留的数据（此处是记录当前所在的tab（el-tab组件中的tab），通过获取tabs的名字设置activeTabName默认跳转到刚刚的tab）
      },
    });
    sessionStorage.setItem('task_Id', '');//清空当前任务的存储
    window.open(routerData.href, '_blank');//新开一个窗口，并跳转到新页面