如何在Vue3中使用本地存储localStorage保存数据？

在前端开发中，尤其是利用Vue3构建现代Web应用时，掌握如何使用本地存储（localStorage）来保存数据是非常重要的能力。这不仅可以帮助我们提高应用的性能，还能提供更好的用户体验。在这篇博客中，我将详细介绍如何在Vue3中使用localStorage保存数据，并提供示例代码来帮助理解。

### localStorage简介

`localStorage` 是 Web Storage API 的一部分，允许我们在用户的浏览器中存储和检索数据。与 `sessionStorage` 不同，`localStorage` 中的数据在浏览器会话结束后不会被删除，除非显式地被清除。这使得 `localStorage` 成为持久化数据的理想选择，如用户设置、购物车信息等。

### Vue3概述

Vue3 是一个用于构建用户界面的渐进式JavaScript框架。相较于Vue2，Vue3在性能优化、组合API的引入、TypeScript支持等方面有显著提升。下面我们会结合Vue3，来看如何利用 `localStorage` 来保存数据。

### 使用Vue3和localStorage保存数据的步骤

#### Step 1: 创建一个新的Vue 3项目

首先，确保你已经安装了 Vue CLI。如果没有安装，可以使用以下命令进行安装：

```bashnpm install -g @vue/cli```

然后，创建一个新的 Vue 3 项目：

```bashvue create vue-localstorage-demo```

进入项目目录：
​​​​​​​

```bashcd vue-localstorage-demo```

#### Step 2: 添加保存数据到localStorage的功能

我们将创建一个简单的功能，让用户可以输入数据并将其保存到 `localStorage` 中，再次加载页面时可以检索和显示这些数据。

1. **创建一个用户输入组件**

在 `src/components` 目录下创建一个新文件 `UserInput.vue`：​​​​​​​

```vue<template>  <div>    <in