Vue3?localStorage讀取數(shù)組并賦值的問題及解決
更新時間：2025年06月16日 08:37:15 作者：不想起名55
這篇文章主要介紹了Vue3?localStorage讀取數(shù)組并賦值的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
問題描述
今天在寫項目用到localStorage進行存儲并讀取數(shù)據(jù)，并將讀取到的數(shù)據(jù)存放到列表的時候，發(fā)現(xiàn)vue3不能直接對數(shù)組進行賦值。
因為Vue3的響應(yīng)式是proxy，對所有的數(shù)據(jù)進行了攔截。
onBeforeMount(() => {
console.log(JSON.parse(localStorage.keywordList));
});
可以看出來JSON.parse（）解析出來是一個數(shù)組，里面包含很多對象。
現(xiàn)在的問題變成了如何從數(shù)組中取出每個對象的值，并將它們存放到數(shù)組中。
加個數(shù)組下標(biāo)，讀取下標(biāo)所在的對象
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 = [];
}
});
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了使用canvas實現(xiàn)一個vue彈幕組件功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
vue3?setup中父組件通過Ref調(diào)用子組件的方法(實例代碼)
這篇文章主要介紹了vue3?setup中父組件通過Ref調(diào)用子組件的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了vue3 diff 的算法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vite+vue3項目中使用SVG方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue高級特性的相關(guān)知識，文中介紹非常細致，幫助大家更好的參考和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
這篇文章主要介紹了VUE項目axios請求頭更改Content-Type操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue項目WebPack打包刪除注釋和console，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-element-admin 菜單標(biāo)簽失效的解決方式
今天小編就為大家分享一篇vue-element-admin 菜單標(biāo)簽失效的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue中使用Day.js時間轉(zhuǎn)化插件詳細教程(附Vue2與Vue3寫法)
Day.js是一個極簡的JavaScript庫,可以為現(xiàn)代瀏覽器解析、驗證、操作和顯示日期和時間,這篇文章主要介紹了Vue中使用Day.js時間轉(zhuǎn)化插件的相關(guān)資料,需要的朋友可以參考下2025-05-05
本篇文章主要介紹了解析Vue2 dist 目錄下各個文件的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11