在 Vue 中，可以使用localStorage或sessionStorage来进行本地存储。这两种存储方式都是基于浏览器的，并且可以在不同的页面之间共享数据。
1 localStorage 的基本使用
// 在 Vue 实例中使用
const app = new Vue({
data() {
return {
username: ''
}
},
methods: {
// 存储数据到 localStorage
storeData() {
localStorage.setItem('username', this.username)
},
// 从 localStorage 获取数据
getData() {
this.username = localStorage.getItem('username') || ''
}
}
})
// 在组件中使用
<template>
<div>
<input v-model="username" type="text" />
<button @click="storeData">存储</button>
<button @click="getData">获取</button>
<p>{
{
username }}</p>
</div>
</template>
使用storeData方法将username存储到localStorage中，使用getData方法从localStorage中获取数据。
2 SessionStorage 的基本使用
这是一种在浏览器中存储数据的临时存储机制，它将数据存储在当前会话中，并且在浏览器关闭后会自动清除。
// 在组件中使用
<template>
<div>
<input v-model="username" type="text" />
<button @click="storeData">存储</button>
<button @click="getData">获取</button>
<p>{
{
username }}</p>
</div>
</template>
<script>
export default {
data() {
return {
username: ''
}
},
methods: {
// 存储数据到 SessionStorage
storeData() {
window.sessionStorage.setItem('username', this.username)
},
// 从 SessionStorage 获取数据
getData() {
this.username = window.sessionStorage.getItem('username') || ''
}
}
}
</script>
在上述示例中，我们创建了一个Vue组件。该组件包含一个输入框和两个按钮，分别用于存储数据和获取数据。当点击"存储"按钮时，会将输入框中的数据存储到SessionStorage中；当点击"获取"按钮时，会从SessionStorage中获取存储的数据，并将其显示在页面上。
请注意，SessionStorage的数据在浏览器会话结束后会被清除，因此它只适用于在当前会话中存储临时数据。如果你需要在浏览器关闭后仍然保留数据，可以考虑使用localStorage。
3 localStorage和sessionStorage 不同之处
- 持久性：localStorage的数据在浏览器关闭后仍然存在，而sessionStorage的数据在浏览器会话结束后会被清除。浏览器会话是指从用户打开浏览器到关闭浏览器的时间段。
- 存储容量：localStorage的存储容量一般没有限制，而sessionStorage的存储容量通常受到限制，不同的浏览器可能有不同的限制。
- 作用域：localStorage的数据在同一浏览器中所有的标签页之间共享，而sessionStorage的数据仅在当前标签页中有效。
- 应用场景：localStorage适用于长期存储用户偏好设置、缓存数据等，而sessionStorage适用于在当前会话中存储临时数据，如登录状态、购物车信息等。
