使用 Vue 自定义 Hook 简化本地存储

引言

在现代Web开发中,客户端的本地存储是一个重要的工具,用于在浏览器中保存和检索用户数据。本文将介绍如何通过使用 Vue 3 的 Composition API 创建一个强大而灵活的自定义 Hook,简化了在 localStoragesessionStorage 中管理数据的流程。

背景知识

在讨论具体实现之前,让我们回顾一下本地存储的重要性以及为什么使用 Vue 3 的 Composition API 能够更好地组织代码。

本地存储的重要性

在Web应用程序中,客户端本地存储是一种在浏览器中存储数据的机制,它允许我们将信息保存在用户的设备上。这对于存储用户首选项、会话状态、缓存数据等方面都非常有用。通过在本地存储中保留数据,用户在关闭浏览器或刷新页面后,仍能保留一些状态和信息。

Vue 3 的 Composition API 优势

Vue 3 引入了 Composition API,这是一种新的组织组件逻辑的方式。相比于以前的选项 API,Composition API 提供更直观、灵活和可组合的代码结构。使用 Composition API,我们能够更容易地组织和重用代码块,使代码更清晰易懂。

解决方案设计

在我们深入讨论代码实现之前,让我们先了解一下本地存储是如何在现代Web应用中发挥作用的。考虑到本地存储的重要性,我们将使用 Vue 3 的 Composition API 来创建一个灵活且易于使用的自定义 Hook,简化了在不同存储类型(localStoragesessionStorage)中存储和检索数据的过程。

javascript 复制代码
import { onUnmounted, ref, watch } from 'vue';

/**
 * 自定义 hook 函数,用于使用 localStorage 或 sessionStorage
 * @param {string} key - 存储的键名
 * @param {*} defaultVal - 默认值
 * @param {string} storage - 存储类型,可选值为 'localStorage' 或 'sessionStorage'
 * @return {object} - 响应式对象,包含 value、setValue 属性
 */
export function useLocalStorage(key, defaultVal, storage) {
  const storageType = storage === 'localStorage' ? localStorage : sessionStorage;

  // 使用 ref 创建响应式对象
  const value = ref(JSON.parse(storageType.getItem(key)) || defaultVal);

  /**
   * 更新 value 的值,并将新的值存储到 localStorage 或 sessionStorage 中
   * @param {*} newVal - 新的值
   */
  const setValue = (newVal) => {
    storageType.setItem(key, JSON.stringify(newVal));
    value.value = newVal;
  };

  /**
   * 监听 value 的变化,即时将 value 的值存储到 localStorage 或 sessionStorage 中
   */
  const stopWatch = watch(
    () => JSON.stringify(value.value),
    () => {
      storageType.setItem(key, JSON.stringify(value.value));
    },
    { immediate: true }
  );

  // 使用 onUnmounted 钩子停止监听,防止内存泄漏
  onUnmounted(stopWatch);

  /**
   * 清除存储在 localStorage 或 sessionStorage 中的值
   */
  const clearValue = () => {
    storageType.removeItem(key)
    value.value = defaultVal
  }
  
  return {
    value,
    setValue,
  };
}

如何使用

现在,让我们看看如何在 Vue 组件中使用这个自定义 Hook:

html 复制代码
<template>
    <el-button type="primary" v-throttle="{ time: 1000, fn: updateStoredValue }">update</el-button>
    <el-button type="primary" v-throttle="{ time: 1000, fn: clearStorage }">clearStorage</el-button>
</template>

<script setup>
  import { useLocalStorage } from 'hooks/index.js'

  //赋值
  const localStorageExample = useLocalStorage(`localStorageExample`, `localStorageExample`, `localStorage`)
  const sessionStorageExample = useLocalStorage(`sessionStorageExample`, `sessionStorageExample`, `sessionStorage`)
  //更新
  const updateStoredValue = () => {
    console.log(`11`)
    localStorageExample.setValue(`localStorageExample改变了`)
    sessionStorageExample.setValue(`sessionStorageExample改变了`)
  }
  //清除
  const clearStorage = () => {
    console.log(`11`)
    localStorageExample.clearValue()
    sessionStorageExample.clearValue()
  }
</script>

<style lang="scss" scoped></style>

实际应用场景

想象一下,在你的 Vue 项目中,你需要保存用户的偏好设置或用户登录状态。使用这个自定义 Hook,你可以轻松地实现这些功能,让你的代码更加清晰和易维护。

性能考虑

在这个自定义 Hook 中,我们通过使用 watch 来监听数据的变化,并在组件卸载时使用 onUnmounted 停止监听,以避免内存泄漏。这种设计确保了性能和稳定性。

结论

通过本文,我们学习了如何使用 Vue 3 的 Composition API 创建一个强大的自定义 Hook,用于简化本地存储的管理。这个 Hook 提供了一个清晰、灵活的解决方案,使得在 Vue 组件中使用本地存储变得更加容易。

希望这篇博客对你在 Vue 项目中管理本地存储有所帮助。如果你有任何问题或建议,欢迎在评论中分享!

相关推荐
百思可瑞教育34 分钟前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
qq_12498707532 小时前
基于node.js+vue的医院陪诊系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·node.js·毕业设计
科兴第一吴彦祖2 小时前
在线会议系统是一个基于Vue3 + Spring Boot的现代化在线会议管理平台,集成了视频会议、实时聊天、AI智能助手等多项先进技术。
java·vue.js·人工智能·spring boot·推荐算法
沙尘暴炒饭3 小时前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
百思可瑞教育3 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
前端码虫4 小时前
2.9Vue创建项目(组件)的补充
javascript·vue.js·学习
BillKu4 小时前
Vue3中app.mount(“#app“)应用挂载原理解析
javascript·vue.js·css3
VueVirtuoso6 小时前
SaaS 建站从 0 到 1 教程:Vue 动态域名 + 后端子域名管理 + Nginx 配置
前端·vue.js·nginx
祈祷苍天赐我java之术6 小时前
Vue 整体框架全面解析
前端·javascript·vue.js
清风细雨_林木木9 小时前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js