在 Vue.js 中使用 localStorage 或 sessionStorage 进行数据的存储和读取
前言
Vue.js 是一个流行的 JavaScript 前端框架，它通过组件化、响应式和虚拟 DOM 等技术，让开发者更高效地构建可维护的 Web 应用。而在实际开发中，经常需要将一些数据在页面之间或浏览器会话之间进行传递或持久化存储，这时候 localStorage 和 sessionStorage 就成为了常用的选择。
本文将重点介绍在 Vue.js 中如何使用 localStorage 和 sessionStorage 存储和读取数据，旨在帮助读者更好地使用这两种 Web 存储方式。
localStorage 和 sessionStorage 简介
localStorage 和 sessionStorage 是 HTML5 提出的两种 Web 存储方式，它们都可以在客户端（即浏览器）本地存储一些数据，而这些数据可以被同一站点的所有页面所访问到。下面简要介绍一下这两种存储方式的特点：
- localStorage：将数据存储在客户端的本地数据库中，即使关闭浏览器后再次打开也可以继续使用。同时，localStorage 存储的数据是永久性的，除非清除浏览器缓存或手动删除，否则这些数据会一直存在。
- sessionStorage：将数据存储在客户端的本地数据库中，与 localStorage 相比，sessionStorage 存储的数据生命周期更短。当会话结束（即用户关闭浏览器窗口）时，sessionStorage 中的数据将被自动清除。
使用 localStorage 和 sessionStorage 存储和读取数据
在 Vue.js 中使用 localStorage 和 sessionStorage 存储和读取数据，可以使用下面三个方法：
- 存储数据：localStorage.setItem(key, value) 和 sessionStorage.setItem(key, value)。
- 读取数据：localStorage.getItem(key) 和 sessionStorage.getItem(key)。
- 删除数据：localStorage.removeItem(key) 和 sessionStorage.removeItem(key)。
其中，key 是用于标识数据的唯一键名，value 可以是任意类型的数据，包括字符串、数字和对象等等。下面通过示例代码来演示如何使用这些方法。
示例代码
下面是一个简单的 Vue.js 组件，它包含了两个按钮和一个文本框。当用户点击“存储数据”按钮时，会将文本框的内容存储到 localStorage 中，并修改组件的 data 中的 message 值。当用户点击“读取数据”按钮时，会从 localStorage 中读取数据，并将其显示在文本框中。
<template>上面代码中的 saveData 和 loadData 方法分别用于存储和读取数据。它们通过 this.message 属性来实现组件状态的更新，从而动态修改 DOM。当存储成功时，会将 message 值修改为“数据已存储”，而如果 localStorage 中没有存储数据时，将 message 值修改为“没有找到数据”。
可以看到，在 Vue.js 中使用 localStorage 或 sessionStorage 存储和读取数据非常方便。你可以根据自己的需要使用这两种存储方式，实现数据的持久化和传递。此外，还可以使用一些插件（如 vue-ls 和 vue-session），来提供更加强大的本地存储功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bfcee50c976d473a4af941
