Vueでセッションを保存する方法

セッション ストレージを使用して Vue.js でデータを保存および取得するのは比較的簡単です。セッション ストレージは、現在のセッションに関連付けられたブラウザ内のストレージ領域であり、キーと値のペアで構成されるデータを保存できます (セッション ストレージに保存されたデータは、セッションが終了するとクリアされます)。 Vue.js では、sessionStorage オブジェクトを使用してキーと値のペアの読み取りと書き込みを行うことができます。

次に、セッション ストレージを使用してユーザー ログイン情報を保存する例を示します。

1. 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 に保存されます。ログインが成功すると、このメソッドによりプロンプト ボックスがポップアップ表示され、成功メッセージが表示されます。

2. 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 では、sessionStorage 内のユーザー名を取得する計算プロパティ username を定義します。 sessionStorage.clear() メソッドを使用して、保存されているすべての sessionStorage データをクリアしてシステムを終了すると、プロンプト ボックスがポップアップして成功メッセージが表示されます。

これは、Vue.js でセッション ストレージを使用してデータを保存および取得する方法です。セッション ストレージは、ユーザー構成やアプリケーションの状態などの一時データを保存するのに最適ですが、パスワードなどの機密データを保存しないでください。機密データを保存する場合は、暗号化やフラット テキスト ストレージ (PTP) プロトコルなどのより安全なテクノロジを使用して、機密性とセキュリティを確保してください。

以上がVueでセッションを保存する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。