sessionstorage和localstorage的区别

现象:

image.png image.png

第一次是有的，然后重新复制ip发现titlebar没有了

  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ userName: username.trim(), password: password }).then(response => {
        if (response.data) {
          const { data } = response
          console.log(data)
          commit('SET_TOKEN', data.token)
          // token和权限不能同时获取，否则路由菜单会进入死循环
          // const roles = ['admin']
          // commit('SET_ROLES', roles)
          sessionStorage.setItem('userInfo', JSON.stringify(data.userInfo))
          setToken(data.token)
        }
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },

<template>
  <div class="TitleBar">
    <div class="titleTime">
      <i class="el-icon-date" />
      {{ titleTime }}
    </div>
    <div class="titleName">
      欢迎您：
      <span class="redColor">{{ userInfo.userName }}</span>
    </div>
    <div class="titleName">
      身份：
      <span class="redColor">{{ userInfo.role.roleName }}</span>
    </div>
    <div class="titleNumber">
      本次是第
      <span class="redColor">{{ userInfo.loginCount }}</span>
      次登录
    </div>
  </div>
</template>

<script>
let _self
export default {
  name: 'TitleBar',
  data() {
    return {
      titleTime: '', // 时间,
      userInfo: '' // 用户信息
    }
  },
  created() {
    _self = this
    _self.setTime()

    // 获取当前账号的用户民
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
  },
  methods: {
    setTime() {
      // 设置时间
      const nowDate = new Date()
      const nowYear = nowDate.getFullYear()// 年
      let nowMonth = nowDate.getMonth() + 1// 月
      let nowOneDay = nowDate.getDate()// 日
      let nowHours = nowDate.getHours()// 时
      let nowMinutes = nowDate.getMinutes()// 分
      let nowSeconds = nowDate.getSeconds()// 秒
      let nowDay = nowDate.getDay()// 星期
      if (nowMonth < 10) {
        nowMonth = '0' + nowMonth
      }
      if (nowOneDay < 10) {
        nowOneDay = '0' + nowOneDay
      }
      if (nowHours < 10) {
        nowHours = '0' + nowHours
      }
      if (nowMinutes < 10) {
        nowMinutes = '0' + nowMinutes
      }
      if (nowSeconds < 10) {
        nowSeconds = '0' + nowSeconds
      }
      switch (nowDay) {
        case 0:
          nowDay = '星期天'
          break
        case 1:
          nowDay = '星期一'
          break
        case 2:
          nowDay = '星期二'
          break
        case 3:
          nowDay = '星期三'
          break
        case 4:
          nowDay = '星期四'
          break
        case 5:
          nowDay = '星期五'
          break
        case 6:
          nowDay = '星期六'
          break
      }
      const newDate = nowYear + '-' + nowMonth + '-' + nowOneDay + ' ' + nowHours + ':' + nowMinutes + ':' + nowSeconds + ' ' + nowDay
      _self.titleTime = newDate
    }
  }
}
</script>

<style lang="scss" scoped>
.redColor{
  color: #F56C6C;
}
.TitleBar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 34px;
  line-height: 34px;
  box-sizing: border-box;
  padding: 0 15px;
  overflow: hidden;
  position: relative;
  background: #fff;
  //background: rgba(48, 65, 86,0.2);
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  color: #606266;
}
</style>

image.png

最后发现是session的问题，每个tab都是一个session,所以sessionstorage不共用
解决办法就是改为localstorage

image.png
image.png

• localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。
• sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的
• cookie是tab共享的，但是关闭浏览器cookie也会清除掉