vue2可以通过sessionStorage来实现登录以后的数据存储，是H5提供的一个API，可以在浏览器会话期间保持数据

简单模拟一个登录后的存储功能

目录

一、sessionStorage存储

二、localStorage本地存储

---

一、sessionStorage存储

1、登录的HTML+方法

HTML

  <div id="LoginContainer">
    <form>
      用户名：<input type="text" v-model="user.userName">
      <br>
      密码:<input type="password" v-model="user.pwd">
      <br>
      <input type="button" value="登录" @click="LoginFn(user.userName,user.pwd)">
    </form>
  </div>

登录方法

地址：http://1.12.254.80:8080/api/user/login

接受参数：用户账户、密码

请求类型：POST

请求体：JSON 格式的数据

返回值：用户信息

这里是给接口做了转发，所以没有直接用到地址

  data () {
    return {
      user: {
        userName: '',
        pwd: ''
      }
    }
  },

  methods: {
    LoginFn (userName, password) {
      // 如果用户名和密码为空就登录了，则提示错误
      if (userName === '' || userName === null) {
        console.log('用户名不能为空')
      } else if (password === '' || password === null) {
        console.log('密码不能为空')
      } else {
        // 允许登录，发起POST请求
        axios({
          method: 'post',
          // url: 'http://1.12.254.80:8080/api/user/login',
          url: '/user/api/user/login',
          data: { // 请求体数据
            userAccount: userName,
            userPassword: password
          }
        }).then(res => {
          // 如果res.data是空的，就是没有这个用户
          if (res.data === '') {
            console.log('找不到用户')
            console.log(res.data)
          } else { // 反之登录成功
            console.log('登录成功')
            console.log(res.data)
          }
        })
      }
    }
  }

这个时候模拟登录，返回的数据是一个对象

 2、把这个对象数据存储到SessionStorage中，然后再让路由跳转到一个用户详细页

        // 允许登录，发起POST请求
        axios({
          method: 'post',
          // url: 'http://1.12.254.80:8080/api/user/login',
          url: '/user/api/user/login',
          data: { // 请求体数据
            userAccount: userName,
            userPassword: password
          }
        }).then(res => {
          // 如果res.data是空的，就是没有这个用户
          if (res.data === '') {
            console.log('找不到用户')
            console.log(res.data)
          } else { // 反之登录成功
            // 1、登录成功以后，把返回回来的res.data存入到SessionStorage中
            sessionStorage.setItem('userInfo', JSON.stringify(res.data))
            // 2、让路由跳转到一个详情页
            this.$router.push('/Info')
          }
        })

3、进入到详情页，获取到存储后的数据并渲染

HTML代码

  <div id="InfoContainer">
    <div v-if="this.userInfo != ''">
      <p>用户名：{{ userInfo.userAccount }}</p>
      <p>用户Id:{{userInfo.id}}</p>
    </div>
    <div v-else>
      <h1>请先登录</h1>
    </div>
  </div>

JS代码

  data () {
    return {
      userInfo: {}
    }
  },

  mounted () {
    // 这里抛一个异常
    try {
      // 1、在跳转后，从钩子函数上获取到数据
      this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      console.log(this.userInfo)
    } catch (error) {
      console.log('数据不存在')
    }
  },

 4、退出用户的登录信息

同时用户点击退出按钮后，清空session中的数据

给HTML添加一个退出按钮

    <div v-if="this.userInfo != ''">
      <p>用户名：{{ userInfo.userAccount }}</p>
      <p>用户Id:{{userInfo.id}}</p>
      <input type="button" value="退出登录" @click="logOut()">
    </div>
    <div v-else>
      <h1>请先登录</h1>
    </div>

在退出点击的时候，清空数据

removeItem：是清空指定的

如果要全部删除，使用的是：clear（）

  methods: {
    logOut () {
      sessionStorage.removeItem('userInfo')
    }
  }

二、本地存储

可以使用会话存储session，也可以使用到本地的存储

代码回到登录界面的登录方法，axios的请求成功返回函数处理登录成功的代码块中

1、本地存储存入数据

            // 一、使用本地存储localStorage实现登录存储的功能、
            localStorage.setItem('userInfo', JSON.stringify(res.data))

2、信息页获取数据

  mounted () {
    // 这里抛一个异常
    try {
      // 1、在跳转后，从钩子函数上获取到数据
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
      console.log(this.userInfo)
    } catch (error) {
      console.log('数据不存在')
    }
  },

3、退出清空数据

    logOut () {
      localStorage.removeItem('userInfo')
    }