localStorage API

要在 web 應(yīng)用中使用 localStorage，首先要熟悉它提供的屬性和方法：

• length：返回 localStorage 中的鍵值對的數(shù)目
• setItem()：增加一個鍵值對到 localStorage 中
• getItem()：從 localStorage 中查詢指定 key 的值
• removeItem()：從 localStorage 中刪除指定的鍵值對
• clear()：清空 localStorage 中所有鍵值對
• key()： 傳入一個數(shù)字 n，用于返回指定第 n 個鍵的值

setItem()

從它的名字可以得知，此方法可以用來存儲數(shù)據(jù)到 localStorage 中。

它接收兩個參數(shù)：一個 key 和一個 value。這個 key 稍后可用于從 localStorage 中檢索它的值。

localStorage.setItem("code","12345")

上述代碼中的 ‘code’ 就是 key，’Tylor’ 就是 12345。

需要注意的是 localStorage 只能存儲字符串。要存儲數(shù)組或?qū)ο?，需要先把它們轉(zhuǎn)成字符串。要實(shí)現(xiàn)這個操作，需要在調(diào)用 setItem() 之前先用 JSON.stringify() 方法轉(zhuǎn)換一下：

 let obj = {
      name: "qwer",
      code: "1234",
    };
 localStorage.setItem("msg", JSON.stringify(obj));

注意：此方法執(zhí)行時可能會拋出異常，例如存儲空間已滿時。建議使用 try...catch...語句處理異常以避免程序報錯。

getItem()

getItem() 方法可以用來訪問已存儲在瀏覽器 localStorage 中的數(shù)據(jù)。

它只接收一個參數(shù) key ，會把對應(yīng)的 value 作為字符串返回。

要檢索上面保存的 msg 數(shù)據(jù)，可以這樣做：

 localStorage.getItem("msg");

調(diào)用之后會返回一個字符串：

{"name":"qwer","code":"1234"}

要在 JavaScript 中使用該值，你可能想把它轉(zhuǎn)為一個對象。這時可以用 JSON.parse() 方法把 JSON 字符串轉(zhuǎn)為 JavaScript 對象。

JSON.parse(localStorage.getItem("msg"))

removeItem()

當(dāng)傳入一個 key 時，removeItem() 方法會從 localStorage 中刪除指定的數(shù)據(jù)。如果沒有找到指定的 key，則什么都不做。

localStorage.removeItem("msg")

clear()

調(diào)用此方法后，會清空當(dāng)前域名下所有存儲在 localStorage 中的數(shù)據(jù)。調(diào)用時不需要傳入任何參數(shù)。

localStorage.clear()

key()

key() 方法一般用于遍歷 localStorage 中所有的數(shù)據(jù)時，傳入一個以 0 開始計數(shù)的數(shù)字，它會返回對應(yīng)的 key 的名字。

let index = localStorage.key(index)

在vue中實(shí)現(xiàn)監(jiān)聽localstorage中某個鍵對應(yīng)的值的變化

在根目錄下創(chuàng)建一個名為utils的文件夾,在文件夾中創(chuàng)建一個tool.js文件

//****將這段內(nèi)容放在tool.js文件中****
// 重寫setItem事件，當(dāng)使用setItem的時候，觸發(fā)，window.dispatchEvent派發(fā)事件
function dispatchEventStroage() {
    const signSetItem = localStorage.setItem
    localStorage.setItem = function(key, val) {
        let setEvent = new Event('setItemEvent')
        setEvent.key = key
        setEvent.newValue = val
        window.dispatchEvent(setEvent)
        signSetItem.apply(this, arguments)
    }
}

export default dispatchEventStroage;

在main.js中引入使用

import tool from "./utils/tool";
Vue.use(tool);

在需要監(jiān)聽localstorage中數(shù)據(jù)變化的文件中加以下代碼

//解決this指向問題，在window.addEventListener中this是指向window的。
//需要將vue實(shí)例賦值給_this,這樣在window.addEventListener中通過_this可以為vue實(shí)例上data中的變量賦值
let _this=this;
//根據(jù)自己需要來監(jiān)聽對應(yīng)的key
window.addEventListener("setItemEvent",function(e){
	//e.key : 是值發(fā)生變化的key
	//e.newValue : 是可以對應(yīng)的新值
	if(e.key==="formDocumnet"){
		console.log(e.newValue);
		_this.content=e.newValue;
	}
})

到此這篇關(guān)于Vue中l(wèi)ocalStorage的用法和監(jiān)聽 localStorage值的變化的文章就介紹到這了,更多相關(guān)localStorage的用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論