Vue3 localStorage读取数组并赋值的问题及解决
更新时间：2025年06月16日 08:37:15 作者：不想起名55
这篇文章主要介绍了Vue3 localStorage读取数组并赋值的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题描述
今天在写项目用到localStorage进行存储并读取数据，并将读取到的数据存放到列表的时候，发现vue3不能直接对数组进行赋值。
因为Vue3的响应式是proxy，对所有的数据进行了拦截。
onBeforeMount(() => {
console.log(JSON.parse(localStorage.keywordList));
});
可以看出来JSON.parse（）解析出来是一个数组，里面包含很多对象。
现在的问题变成了如何从数组中取出每个对象的值，并将它们存放到数组中。
加个数组下标，读取下标所在的对象
onBeforeMount(() => {
console.log(JSON.parse(localStorage.keywordList)[0]);
});
想要取其中的value值
onBeforeMount(() => {
console.log(JSON.parse(localStorage.keywordList)[0]._value);
});
解决方案
知道了取出一个_value的方法了，如何取出全部的？就要用到遍历了。
const keywordList = reactive([]);
onBeforeMount(() => {
let res = localStorage.keywordList;
if (res) {
for (let [index, elem] of JSON.parse(localStorage.keywordList).entries()) {
keywordList.push(elem._value)
}
} else {
keywordList = [];
}
});
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了使用canvas实现一个vue弹幕组件功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
vue3 setup中父组件通过Ref调用子组件的方法(实例代码)
这篇文章主要介绍了vue3 setup中父组件通过Ref调用子组件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
这篇文章主要为大家介绍了vue3 diff 的算法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vite+vue3项目中使用SVG方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue高级特性的相关知识，文中介绍非常细致，帮助大家更好的参考和学习，感兴趣的朋友可以了解下2020-06-06
这篇文章主要介绍了VUE项目axios请求头更改Content-Type操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue项目WebPack打包删除注释和console，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
今天小编就为大家分享一篇vue-element-admin 菜单标签失效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Vue中使用Day.js时间转化插件详细教程(附Vue2与Vue3写法)
Day.js是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间,这篇文章主要介绍了Vue中使用Day.js时间转化插件的相关资料,需要的朋友可以参考下2025-05-05
本篇文章主要介绍了解析Vue2 dist 目录下各个文件的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论