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值的变化的文章就介绍到这了,更多相关localStorage的用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论