localStorage

序列化和反序列化的必要性：

不同系统可能有不同的数据处理方式
可能导致类型丢失
网络协议通常基于文本，而不传输复杂的数据结构

使用localStorage存取对象的时候，如果不想存成[object Object]，记得要使用JSON.stringify和JSON.parse来转化

const userConfig = JSON.parse(localStorage.getItem("IDE_xxx"));
localStorage.setItem("IDE_xxx", JSON.stringify(this.userConfig));

sessionStorage

通常存储临时会话。例如，在页面中搜索、翻页之后选择了列表中的某一项查看详情，产生url的跳转，再返回，搜索内容和页数信息就会丢失。解决办法是进行会话存储：

onMounted(() ={
    if(sessionStorage.getItem('params')) {
        state.params = JSON.parse(sessionStorage.getItem('params'))
    }
    getList()
})

const getList = () => {
    const params = { ...state.params, }
    sessionStorage.setItem('params', JSON.stringify(params))
    getListAll(params)
        .then()
        .catch()
}

路由params或query传值

遇到过这样一个问题，父子路由配置如下：

path: '/pt', 
name: 'parent', 
component: pt, 
children: [ 
    { 
        path: 'cld', 
        component: cld, 
    },

由于历史原因，导航标题写在parent组件里面，所以需要cld向parent传值，告诉自己目前加载了哪一项业务，然后显示在parent上方。

虽然有eventBus、VueX等状态管理办法，由于传值的数据量小也安全，所以采用的方法是：

子组件中业务改变时，触发query更新
父组件监听query，改变业务名称

// 父组件
'$route': {
  handler(to) {
    if(to.path == '/pt/cld'){
      this.activeTitle = to.query.name
    } else {
      this.handleOpen(to.path)
    }
  },
  immediate: true
},
// 子组件
this.$router.push({
    path: "/pt/cld",
    query: {
      name: this.data.name,
    },
});

使用params和query不一样的地方：params标识不同的资源，query是可选的

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: UserComponent
    }
  ]
})

// 使用params时，要用name而不能用path，否则，不知道id该放在哪
this.$router.push({ name: 'user', params: { id: '123' } });

前端存储和传值

localStorage

sessionStorage

路由params或query传值