欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3封裝localStorage基本使用示例詳解

 更新時(shí)間：2023年12月19日 14:39:57   作者：他在時(shí)間門外  
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲(chǔ) key/value 對(duì)的數(shù)據(jù),localStorage 用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時(shí)間,直到手動(dòng)去刪除,本文給大家介紹Vue3封裝localStorage-基本使用,感興趣的朋友一起看看吧

定義和使用

localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲(chǔ) key/value 對(duì)的數(shù)據(jù)。

localStorage 用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時(shí)間，直到手動(dòng)去刪除。

localStorage 屬性是只讀的。

提示: 如果你只想將數(shù)據(jù)保存在當(dāng)前會(huì)話中，可以使用 sessionStorage 屬性， 該數(shù)據(jù)對(duì)象臨時(shí)保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁之后將會(huì)刪除這些數(shù)據(jù)。

原生語法

window.localStorage

保存數(shù)據(jù)語法：

localStorage.setItem("key", "value");

讀取數(shù)據(jù)語法：

var lastname = localStorage.getItem("key");

刪除數(shù)據(jù)語法：

localStorage.removeItem("key");

Vue3封裝localStorage

新建 cache.js 文件

class LocalCache {
  // 添加
  setCath(key: string, value: any) {
    window.localStorage.setItem(key, JSON.stringify(value))
  }
  // 查找
  getCache(key: string) {
    // obj=>sting=>obj
    const value = window.localStorage.getItem(key)
    if (value) {
      return JSON.parse(value)
    }
  }
  // 刪除
  deleteCatch(key: string) {
    window.localStorage.removeItem(key)
  }
  // 清理
  clearCache() {
    window.localStorage.clear()
  }
}
export default new LocalCache()

示例

先引入封裝好的文件
例：import LocalCache from '@/utils/cache'

查詢本地緩存

const obj = reactive({
  name: LocalCache.getCache("name") ?? "",
  password: LocalCache.getCache("password") ?? "",
});
console.log('obj',obj.name);

添加

LocalCache.setCath('name', account.name)
LocalCache.setCath('password', account.password)

刪除本地緩存

LocalCache.deleteCatch('name')
LocalCache.deleteCatch('password')

到此這篇關(guān)于Vue3封裝localStorage-基本使用的文章就介紹到這了,更多相關(guān)Vue3 localStorage使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論