快捷導(dǎo)航

教你在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能

更新時(shí)間：2023年06月15日 10:46:34 作者：Emo_TT

這篇文章主要給大家介紹了關(guān)于如何在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

VueUse 介紹

VueUse文檔：Get Started | VueUse

VueUse是基于Vue3的Composition API的實(shí)用函數(shù)的集合，useStorage是其中的一個(gè)函數(shù)。我們可以使用useStorage來(lái)實(shí)現(xiàn)我們的localStorage功能。

安裝

npm i @vueuse/core

使用CDN

<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

useStorage()的用法

useStorage()將要用于引用的鍵名作為第一個(gè)參數(shù)傳遞，將要保存的值作為第二個(gè)參數(shù)傳遞。

值的保存、獲取、刪除

localStorage設(shè)置setItem()來(lái)保存值，用getItem()來(lái)獲取值，用removeItem來(lái)刪除值如下：

<script setup >
   import {ref} from "vue";
   const counter = ref('消息')
   //保存值
   localStorage.setItem('counter',counter.value)
   //獲取值
   const data = localStorage.getItem('counter')
   console.log('data',data)
   //刪除值
   localStorage.removeItem('counter')
</script>

而useStorage()只需要一個(gè)就可以進(jìn)行值的保存和獲取，如下，用法：

const storedValue = useStorage('key', value)

例子：

 const msg = ref('你好')
   //保存值
   useStorage('msg',msg.value)
   //獲取值
   const msgData = useStorage('msg')
   console.log('msgData',msgData.value)
   //刪除
   const clear = () => {
     msg.value = null
   }

useStorage()自定義序列化

默認(rèn)情況下，useStorage將根據(jù)提供的默認(rèn)值的數(shù)據(jù)類(lèi)型智能地使用相應(yīng)的序列化程序。例如，JSON.stringify/JSON.parse將用于對(duì)象，Number.toString/parseFloat用于數(shù)字等。如下：

import { useStorage } from '@vueuse/core'
useStorage(
  'key',
  {},
  undefined,
  {
    serializer: {
      read: (v: any) => v ? JSON.parse(v) : null,
      write: (v: any) => JSON.stringify(v),
    },
  },
)

以上代碼，我們?cè)O(shè)置對(duì)象的名稱(chēng)為key，初始值為空對(duì)象{},如果存儲(chǔ)中沒(méi)有key的值，則返回null。在寫(xiě)入時(shí)，將對(duì)象序列化為JSON字符串。

補(bǔ)充知識(shí)：Vue_localStorage本地存儲(chǔ)和本地取值解決方法。

Vue本地存儲(chǔ)(3種)

① localStorage(長(zhǎng)期存儲(chǔ))

存:localStorage.setitem('key',data)

取:localStorage.getitem('key')

② sessionStorage(臨時(shí)存儲(chǔ))

存:sessionStorage.setitem('key',data)

取:sessionStorage.getitem('key')

③ cookie(有時(shí)效性)

一、共同點(diǎn):

①都可以存儲(chǔ)，并且存儲(chǔ)只跟域名走、只存儲(chǔ)在當(dāng)前域名下。

二、不同點(diǎn):

?存儲(chǔ)大小不同

①localStoage/sessionStorage /5M

②cookie /4K 有時(shí)效性如果沒(méi)有設(shè)置時(shí)間會(huì)話關(guān)閉自動(dòng)失效

③localStorage/不主動(dòng)刪除，數(shù)據(jù)一直在。

④sessionStorage/在瀏覽器打開(kāi)期間存在，關(guān)閉當(dāng)前會(huì)話即清空(刷新不清除)

sessionStorage和localStorage用法基本一致，引用類(lèi)型的值需要轉(zhuǎn)換成Json，我這里用localstorage來(lái)舉例。

總結(jié)

到此這篇關(guān)于在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能的文章就介紹到這了,更多相關(guān)Vue3實(shí)現(xiàn)localStorage功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: