localStorage API

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

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

setItem()

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

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

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

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

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

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

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

getItem()

getItem() 方法可以用來(lái)訪問(wèn)已存儲(chǔ)在瀏覽器 localStorage 中的數(shù)據(jù)。

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

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

 localStorage.getItem("msg");

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

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

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

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

removeItem()

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

localStorage.removeItem("msg")

clear()

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

localStorage.clear()

key()

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

let index = localStorage.key(index)

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

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

//****將這段內(nèi)容放在tool.js文件中****
// 重寫setItem事件，當(dāng)使用setItem的時(shí)候，觸發(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)聽(tīng)localstorage中數(shù)據(jù)變化的文件中加以下代碼

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

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