SessionStorage基础用法

window.sessionStrage    //localStorage用法大致相同（存储在 `localStorage` 的数据可以长期保留）

sessionStorage类似于 localStorage; 不同之处在于，虽然数据输入localStorage不会过期，sessionStorage但当页面会话结束时数据输入会被清除。

• 每当在浏览器的特定选项卡中加载文档时，都会创建一个唯一的页面会话并将其分配给该特定选项卡。该页面会话仅对该特定选项卡有效。
• 只要选项卡或浏览器处于打开状态，页面会话就会持续，并在页面重新加载和恢复后继续存在。
• 在新选项卡或窗口中打开页面会创建一个具有顶级浏览上下文值的新会话，这与会话 cookie 的工作方式不同。
• 使用相同的 URL 打开多个选项卡/窗口会sessionStorage 为每个选项卡/窗口创建。
• 复制选项卡会将选项卡复制sessionStorage到新选项卡中。
• 关闭选项卡/窗口会结束会话并清除 sessionStorage.

延申：

组件内的守卫：
 beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

基本用法：

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage   谨慎使用。
sessionStorage.clear();

上代码 ：

//`beforeRouteEnter` 守卫不能访问 this,通过传一个回调给 `next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数
beforeRouteEnter (to, from, next) {
 // 通过 `vm` 访问组件实例
  next(vm => {
    if (from.name === 'haulierDetail') {
      // vm.list = JSON.parse(localStorage.getItem('listInfoMessage'))
      // vm.getList(JSON.parse(localStorage.getItem('listInfoMessage')))
      vm.list = JSON.parse(sessionStorage.getItem('listInfoMessage'))
      vm.getList(JSON.parse(sessionStorage.getItem('listInfoMessage')))
    } else {
      sessionStorage.removeItem('listInfoMessage')
      vm.getList()
    }
  })
},
beforeRouteLeave (to, from, next) {
  console.log(to,from,222222)
  if (to.name === 'haulierDetail') {
    sessionStorage.setItem('listInfoMessage', JSON.stringify(this.list))
  }
  next()
},