How to save session in vue

Using Session Storage to store and retrieve data in Vue.js is relatively simple. Session Storage is an in-browser storage area associated with the current session, which can store data consisting of key-value pairs (the data stored in session storage will be cleared when the session ends). In Vue.js, we can use the sessionStorage object to read and write key-value pairs.

The following is an example of using Session Storage to store user login information:

1. Create a Login.vue component

<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>

In this component, we The sessionStorage.setItem() method is used to store the user's username and password. This is performed when the login button is clicked, storing the entered data into the browser's sessionStorage. If the login is successful, this method will pop up a prompt box to display the success message.

2. Create a Dashboard.vue component

<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>

In this component, we use the sessionStorage.getItem() method to read the previously stored user name. In computed, we define a computed property username that retrieves the username in sessionStorage. We use the sessionStorage.clear() method to clear all stored sessionStorage data to exit the system, and a prompt box will pop up to display a success message.

This is how to use Session Storage in Vue.js to store and retrieve data. Session Storage is great for storing temporary data such as user configuration and application state, but please do not store sensitive data such as passwords in it. Whenever storing sensitive data, use more secure technologies such as encryption or the Flat Text Storage (PTP) protocol to ensure confidentiality and security.

The above is the detailed content of How to save session in vue. For more information, please follow other related articles on the PHP Chinese website!