VueUse 的 useLocalStorage 是什么？怎么用？

在前端开发中，我们经常需要与浏览器的本地存储（localStorage）打交道，VueUse 是一个非常实用的 Vue 工具库，其中的 useLocalStorage 更是为我们操作本地存储提供了极大的便利，VueUse 的 useLocalStorage 究竟是什么？又该如何使用呢？让我们一起来探讨。

VueUse 的 useLocalStorage 是什么？

VueUse 的 useLocalStorage 是一个组合式函数（Composition API），它的作用是让我们能够更方便、更优雅地与浏览器的 localStorage 进行交互，就是通过这个函数，我们可以轻松地读取、写入和监听 localStorage 中的数据变化。

它的底层原理是利用了 Vue 的响应式系统，当 localStorage 中的数据发生变化时，我们在 Vue 组件中使用 useLocalStorage 获取到的数据也会自动更新，这就使得我们的组件能够实时响应数据的变化,无需手动去处理数据更新的逻辑。

VueUse 的 useLocalStorage 怎么用？

基本使用

我们需要安装 VueUse，如果你的项目是基于 npm 的,可以通过以下命令安装：

```bash npm install @vueuse/core ```

安装完成后，在你的 Vue 组件中引入 useLocalStorage：

```javascript import { useLocalStorage } from '@vueuse/core' ```

然后就可以使用它了,我们要存储一个字符串类型的数据：

```javascript const storedValue = useLocalStorage('my-key', 'default-value') ```

这里，第一个参数'my-key'是 localStorage 中数据的键名，第二个参数 'default-value' 是默认值，当 localStorage 中不存在'my-key' 对应的数据时，storedValue 就会使用这个默认值，storedValue 是一个响应式的数据，你可以像使用普通的 Vue 响应式数据一样在模板中使用它。

### 2. 存储对象类型数据

如果我们要存储一个对象类型的数据,也非常简单。

```javascript const user = { name: 'John', age: 30 } const storedUser = useLocalStorage('user-key', user) ```

useLocalStorage 会自动将对象转换为 JSON 字符串存储到 localStorage 中，当读取时又会自动将 JSON 字符串解析为对象，不过要注意的是，对象中的数据类型必须是可以被 JSON 序列化的,像函数等特殊类型是无法正确存储和读取的。

### 3. 监听数据变化

useLocalStorage 还提供了监听数据变化的功能,我们可以通过它的返回值来获取一个用于监听变化的方法。

```javascript const storedValue = useLocalStorage('my-key', 'default-value') const stopListen = storedValue.$watch((newValue, oldValue) => { console.log('Value changed from', oldValue, 'to', newValue) }) ```

这里，$watch 方法接收一个回调函数，当 localStorage 中'my-key' 对应的数据发生变化时，回调函数就会被触发，传入新值和旧值。$watch 方法会返回一个用于停止监听的函数 stopListen，当我们不需要监听时,可以调用它来停止。

### 4. 与计算属性结合使用

在一些复杂的场景中，我们可能需要将 useLocalStorage 与计算属性结合使用，我们有一个存储了用户设置的主题颜色的数据,我们希望根据这个主题颜色计算出一些相关的样式。

```javascript import { useLocalStorage, computed } from '@vueuse/core'

const themeColor = useLocalStorage('theme-color', 'light') const computedStyle = computed(() => { return { backgroundColor: themeColor.value === 'light'? '#fff' : '#000', color: themeColor.value === 'light'? '#000' : '#fff' } })

<p>在这个例子中，themeColor 是从 localStorage 中获取的响应式数据，computedStyle 是一个计算属性，它会根据 themeColor 的变化而自动更新，这样，我们就可以在模板中直接使用 computedStyle 来设置元素的样式了。</p>
## 三、使用 VueUse 的 useLocalStorage 的注意事项
### 1. 数据大小限制
<p>localStorage 是有大小限制的，不同浏览器的限制可能不同，一般在 5MB 左右，所以在使用 useLocalStorage 存储数据时，要注意数据的大小，避免存储过多过大的数据导致浏览器报错。</p>
### 2. 安全性
<p>localStorage 中的数据是明文存储的，并且可以被同一域名下的所有页面访问，所以不要在 localStorage 中存储敏感信息，如用户密码等，如果确实需要存储一些敏感信息，一定要进行加密处理。</p>
### 3. 兼容性
<p>虽然现代浏览器都支持 localStorage，但在一些老旧的浏览器中可能存在兼容性问题，在开发时，如果需要兼容这些老旧浏览器，要做好相应的处理，比如提供降级方案等。</p>
## 四、
<p>VueUse 的 useLocalStorage 是一个非常强大且实用的工具，它简化了我们与 localStorage 的交互过程，结合 Vue 的响应式系统，让我们能够更高效地开发出具有良好用户体验的前端应用，通过本文的介绍，相信你已经对 useLocalStorage 的基本使用和一些注意事项有了一定的了解，在实际项目中，你可以根据具体的需求灵活运用它，为你的应用增添更多的功能和便利性。</p>