vue中如何存入session-前端问答-PHP中文网

vue中如何存入session

PHPz

发布： 2023-04-13 09:11:19

原创

2665人浏览过

在vue.js中使用session storage来存储和检索数据是相对简单的。session storage是与当前会话相关联的浏览器内存储区域，可以存储由键值对组成的数据（会话结束时，session storage中存储的数据将被清除）。在vue.js中，我们可以使用sessionstorage对象来读取和写入键值对。

以下是使用Session Storage储存用户的登录信息的示例：

创建一个Login.vue组件

<template>
  <div>
    <h2>用户登录</h2>
    <form>
      <div>
        <label for="username">用户名</label>
        <input type="text" name="username" v-model="username"/>
      </div>
      <div>
        <label for="password">密码</label>
        <input type="password" name="password" v-model="password"/>
      </div>
      <button @click.prevent="login()">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      sessionStorage.setItem('username', this.username)
      sessionStorage.setItem('password', this.password)
      alert('登录成功')
    }
  }
}
</script>

登录后复制

在这个组件中，我们使用了sessionStorage.setItem()方法来存储用户的用户名和密码。这是在登录按钮被点击时执行的，将输入的数据存储到浏览器的sessionStorage中。如果登录成功，这个方法将弹出一个提示框显示成功信息。

创建一个Dashboard.vue组件

<template>
  <div>
    <h2>用户主面板</h2>
    <p>欢迎 {{ username }}</p>
    <button @click.prevent="logout()">退出登录</button>
  </div>
</template>

<script>
export default {
  computed: {
    username () {
      return sessionStorage.getItem('username')
    },
  },
  methods: {
    logout () {
      sessionStorage.clear()
      alert('退出成功')
    }
  }
}
</script>

登录后复制

在这个组件中，我们使用sessionStorage.getItem()方法来读取之前存储的用户名。在computed中，我们定义了一个计算属性username，它检索sessionStorage中的用户名。我们使用sessionStorage.clear()方法来清除所有存储的sessionStorage数据以退出系统，并弹出提示框显示成功信息。