セッション ストレージを使用して Vue.js でデータを保存および取得するのは比較的簡単です。セッション ストレージは、現在のセッションに関連付けられたブラウザ内のストレージ領域であり、キーと値のペアで構成されるデータを保存できます (セッション ストレージに保存されたデータは、セッションが終了するとクリアされます)。 Vue.js では、sessionStorage オブジェクトを使用してキーと値のペアの読み取りと書き込みを行うことができます。
次に、セッション ストレージを使用してユーザー ログイン情報を保存する例を示します。
<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 に保存されます。ログインが成功すると、このメソッドによりプロンプト ボックスがポップアップ表示され、成功メッセージが表示されます。
<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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
