大家都应该明白，Vue项目中，搞数据存取是很重要滴。今天咱们就聊聊如何合法运用浏览器附带的APIs —— localStorage 这玩意儿，来帮咱们保管数据，且还会给你举个实实在在的例子
初始化数据
在Vue项目中，要把要存档的信息搞定哟～data选项就是放这东西的地儿；还有，别忘了用created钩子函数来检查一下本地是不是已经有了这些信息。找着了，就直接赋给组件呗～
想用本地缓存？在Vue组件里设个data属性就行了~
javascript
data(){
return {
userData:{}
};
},
data() {
return {
myData: ''
}
},
created() {
const localData = localStorage.getItem('myData')
if (localData) {
this.myData = JSON.parse(localData)
}
}
created(){
如果你的手机里有保存了用户数据，就执行以下操作：
用户数据在这里，我们用JSON格式读出来。
}
}
咱们这儿搞了个用户数据对象储存点啥儿，再用created钩子瞅瞅附近有没这个名称的本地数据。找到的话，直接塞到组件中的同名属性中就行！
保存数据
数据换了要赶紧记下新的！用Vue的’watch’来监视变化，在回调中用’localStorage.setItem’搞定它。
好比说，我们可以看着用户数据这个玩意儿动来动去的，然后把最新的数据收在本地存起来就行了。
watch: {
myData: {
handler(newData) {
localStorage.setItem('myData', JSON.stringify(newData))
},
deep: true
}
}
watch:{
userData:{
handler(newData){
相信大家都懂的，直接把新用户数据存起来就好了。
},
deep: true
你们看，这里的代码使用了watch功能来时刻关注着’userData’。记住，我们还得加上个”deep=true”这个小参数，这样才能直观地看到值的变化状况！不管’userData’是变好了还是恶化了，它都会通过handler函数更新到本地储存中，而且，还能用字符串形式表示出来哦～
清除数据
本地那些小秘密要消掉？用上 localStorage 的 removeItem 就搞定！
methods:{
methods: {
clearData() {
localStorage.removeItem('myData')
this.myData = ''
}
}
clearUserData(){
用户资料在本地储存中删除了。
就是这些用户数据:{};//把组件里的所有数据都清空喽.
这就是告诉你如何利用’clearUserData’清除’userData’这个本地储存的小秘密，还能顺便把组件里头data关联的属性值一锅端掉喔！
其他操作
这个东西不止能存取数据，还能看到本地储存里有哪些键名和数量这些小细节。
getAllKeys(){
咱们就随便设个变量i，从0开始，每次加1，直到得到本地存储里的数字为止。那接下来怎么做？
咱们来把这个尝试一下，看看能不能用 Console.log()输出’ localStorage.keys(i)’！
}
},
methods: {
getDataCount() {
return localStorage.length
}
}
getStorageLength(){
试试看！就在浏览器里，打开控制台用console.log来查看一下本地存储的内存有多大。
这段代码就是告诉你咋利用getAllKeys查出所有键，然后把它们都打印出来啦；接下来，就用getStorageLength探查下LocalStorage里键值对儿有几个，看看数量然后直接输出
注意事项
用到localStorage保存小数据的话，记得注意这些小事！
记住，Local Storage也有限制滴，不同浏览器的最高存储量都不相同~
2.数据存储在客户端浏览器上，可能被恶意篡改；
3.敏感信息不建议直接以明文形式存储；
4.可以通过加密等方式增加安全性。
总结
在 Vue 项目中用 localStorage 存储数据超便利直接设个初始值、储存纪录啥的，就不怕数据会迷路啦～别忘了还要关注数据的一致性和完整性。
原文链接：https://www.icz.com/technicalinformation/web/2024/04/14045.html，转载请注明出处~~~ 
评论0