Vue自定義Hook實現(xiàn)簡化本地存儲

更新時間：2023年12月01日 15:15:54 作者：北涼溫華

這篇文章主要為大家詳細介紹了如何通過使用 Vue 3 的 Composition API 創(chuàng)建一個強大而靈活的自定義 Hook,簡化了在 localStorage 或 sessionStorage 中管理數(shù)據(jù)的流程,需要的可以參考下

引言

在現(xiàn)代Web開發(fā)中，客戶端的本地存儲是一個重要的工具，用于在瀏覽器中保存和檢索用戶數(shù)據(jù)。本文將介紹如何通過使用 Vue 3 的 Composition API 創(chuàng)建一個強大而靈活的自定義 Hook，簡化了在 localStorage 或 sessionStorage 中管理數(shù)據(jù)的流程。

背景知識

在討論具體實現(xiàn)之前，讓我們回顧一下本地存儲的重要性以及為什么使用 Vue 3 的 Composition API 能夠更好地組織代碼。

本地存儲的重要性

在Web應用程序中，客戶端本地存儲是一種在瀏覽器中存儲數(shù)據(jù)的機制，它允許我們將信息保存在用戶的設備上。這對于存儲用戶首選項、會話狀態(tài)、緩存數(shù)據(jù)等方面都非常有用。通過在本地存儲中保留數(shù)據(jù)，用戶在關閉瀏覽器或刷新頁面后，仍能保留一些狀態(tài)和信息。

Vue 3 的 Composition API 優(yōu)勢

Vue 3 引入了 Composition API，這是一種新的組織組件邏輯的方式。相比于以前的選項 API，Composition API 提供更直觀、靈活和可組合的代碼結構。使用 Composition API，我們能夠更容易地組織和重用代碼塊，使代碼更清晰易懂。

解決方案設計

在我們深入討論代碼實現(xiàn)之前，讓我們先了解一下本地存儲是如何在現(xiàn)代Web應用中發(fā)揮作用的?？紤]到本地存儲的重要性，我們將使用 Vue 3 的 Composition API 來創(chuàng)建一個靈活且易于使用的自定義 Hook，簡化了在不同存儲類型（localStorage 或 sessionStorage）中存儲和檢索數(shù)據(jù)的過程。

import { onUnmounted, ref, watch } from 'vue';

/**
 * 自定義 hook 函數(shù)，用于使用 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 創(chuàng)建響應式對象
  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;
  };

  /**
   * 監(jiān)聽 value 的變化，即時將 value 的值存儲到 localStorage 或 sessionStorage 中
   */
  const stopWatch = watch(
    () => JSON.stringify(value.value),
    () => {
      storageType.setItem(key, JSON.stringify(value.value));
    },
    { immediate: true }
  );

  // 使用 onUnmounted 鉤子停止監(jiān)聽，防止內存泄漏
  onUnmounted(stopWatch);

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

如何使用

現(xiàn)在，讓我們看看如何在 Vue 組件中使用這個自定義 Hook：

<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>