VueUse 介紹

VueUse文檔：Get Started | VueUse

VueUse是基于Vue3的Composition API的實用函數(shù)的集合，useStorage是其中的一個函數(shù)。我們可以使用useStorage來實現(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()將要用于引用的鍵名作為第一個參數(shù)傳遞，將要保存的值作為第二個參數(shù)傳遞。

值的保存、獲取、刪除

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

<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()只需要一個就可以進行值的保存和獲取，如下，用法：

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()自定義序列化

默認情況下，useStorage將根據(jù)提供的默認值的數(shù)據(jù)類型智能地使用相應的序列化程序。例如，JSON.stringify/JSON.parse將用于對象，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),
    },
  },
)

以上代碼，我們設置對象的名稱為key，初始值為空對象{},如果存儲中沒有key的值，則返回null。在寫入時，將對象序列化為JSON字符串。

補充知識：Vue_localStorage本地存儲和本地取值解決方法。

Vue本地存儲(3種)

① localStorage(長期存儲)

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

取:localStorage.getitem('key')

② sessionStorage(臨時存儲)

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

取:sessionStorage.getitem('key')

③ cookie(有時效性)

一、共同點:

①都可以存儲，并且存儲只跟域名走、只存儲在當前域名下。

二、不同點:

?存儲大小不同

①localStoage/sessionStorage  /5M

②cookie /4K 有時效性 如果沒有設置時間會話關閉自動失效

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

④sessionStorage/在瀏覽器打開期間存在，關閉當前會話即清空(刷新不清除)

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

總結(jié)

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

最新評論