今天小编给大家分享一下Vue中localStorage怎么使用和监听localStorage值的变化的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
要在 web 应用中使用 localStorage,首先要熟悉它提供的属性和方法:
length:返回 localStorage 中的键值对的数目
setItem():增加一个键值对到 localStorage 中
getItem():从 localStorage 中查询指定 key 的值
removeItem():从 localStorage 中删除指定的键值对
clear():清空 localStorage 中所有键值对
key(): 传入一个数字 n,用于返回指定第 n 个键的值
从它的名字可以得知,此方法可以用来存储数据到 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() 方法可以用来访问已存储在浏览器 localStorage 中的数据。
它只接收一个参数 key ,会把对应的 value 作为字符串返回。
要检索上面保存的 msg 数据,可以这样做:
localStorage.getItem("msg");
调用之后会返回一个字符串:
{"name":"qwer","code":"1234"}
要在 JavaScript 中使用该值,你可能想把它转为一个对象。这时可以用 JSON.parse() 方法把 JSON 字符串转为 JavaScript 对象。
JSON.parse(localStorage.getItem("msg"))
当传入一个 key 时,removeItem() 方法会从 localStorage 中删除指定的数据。如果没有找到指定的 key,则什么都不做。
localStorage.removeItem("msg")
调用此方法后,会清空当前域名下所有存储在 localStorage 中的数据。调用时不需要传入任何参数。
localStorage.clear()
key() 方法一般用于遍历 localStorage 中所有的数据时,传入一个以 0 开始计数的数字,它会返回对应的 key 的名字。
let index = localStorage.key(index)
在根目录下创建一个名为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值的变化”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。