Vue中localStorage怎么使用和監聽localStorage值的變化

今天小編給大家分享一下Vue中localStorage怎么使用和監聽localStorage值的變化的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

localStorage API

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

• length：返回 localStorage 中的鍵值對的數目

• setItem()：增加一個鍵值對到 localStorage 中

• getItem()：從 localStorage 中查詢指定 key 的值

• removeItem()：從 localStorage 中刪除指定的鍵值對

• clear()：清空 localStorage 中所有鍵值對

• key()： 傳入一個數字 n，用于返回指定第 n 個鍵的值

setItem()

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

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

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

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

需要注意的是 localStorage 只能存儲字符串。要存儲數組或對象，需要先把它們轉成字符串。要實現這個操作，需要在調用 setItem() 之前先用 JSON.stringify() 方法轉換一下：

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

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

getItem()

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

它只接收一個參數 key ，會把對應的 value 作為字符串返回。

要檢索上面保存的 msg 數據，可以這樣做：

 localStorage.getItem("msg");

調用之后會返回一個字符串：

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

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

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

removeItem()

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

localStorage.removeItem("msg")

clear()

調用此方法后，會清空當前域名下所有存儲在 localStorage 中的數據。調用時不需要傳入任何參數。

localStorage.clear()

key()

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

let index = localStorage.key(index)

在vue中實現監聽localstorage中某個鍵對應的值的變化

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

//****將這段內容放在tool.js文件中****
// 重寫setItem事件，當使用setItem的時候，觸發，window.dispatchEvent派發事件
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);

在需要監聽localstorage中數據變化的文件中加以下代碼

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

以上就是“Vue中localStorage怎么使用和監聽localStorage值的變化”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。