在 Vue 中，可以使用localStorage或sessionStorage来进行本地存储。这两种存储方式都是基于浏览器的，并且可以在不同的页面之间共享数据。

1 localStorage 的基本使用

// 在 Vue 实例中使用
const app = new Vue({data() {return {username: ''}},methods: {// 存储数据到 localStoragestoreData() {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: {// 存储数据到 SessionStoragestoreData() {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适用于在当前会话中存储临时数据，如登录状态、购物车信息等。