目前我用VanillaJS创建的favorites函数是将选定的对象存储在本地存储器中，但是，当删除一个对象，然后向同一个favorites数组添加一个新项时，无论是原版（删除的）对象和新添加的收藏夹将显示在视口中。我可以确认这两个对象都从为收藏夹部分提供数据的数组中删除了，然后在只添加一个新对象时这两个对象都显示出来，但我不知道为什么会出现这个问题。
我已经确保检查了数组之间没有重叠。我将添加到DOM的所有对象打印到本地存储中，以便使用收藏夹函数和以后的购物车函数进行访问。
已从以下原始数组对象创建项目-
function feetCard(array){
document.getElementById('mainpageSectionforJS').innerHTML = "";
let footCard = document.querySelector('#mainpageSectionforJS');
console.log(array,"array name");
localStorage.setItem("feetarray", JSON.stringify(array));
console.log(array, "array name");
let data = JSON.parse(localStorage.getItem("feetarray"));
console.log(data, "item data");
data.forEach(component => {
localStorage.setItem(component.valAssign, JSON.stringify(component))
});
data.forEach(component => {
footCard.innerHTML = footCard.innerHTML +
`<div class="card card-margin" id="${component.valAssign}">
<div class="card-header">
<h4> ${component.name} </h4>
<a class="kneeClick btn btn-primary" onclick="footFavorites(${component.valAssign})" > Add To Favorites </a>
<div class="card-body">
<img class="card-image" src="${component.image}"></img>
<h5> Product Description </h5>
<div>${component.manufacturer}</div>
<div>${component.lcode1}</div>
<div>${component.lcode2}</div>
<div>${component.lcode3}</div>
<div>${component.lcode4}</div>
<div>${component.hdcode}</div>
<div>$${component.cost}</div>
<div>${component.reimbursement}</div>
<div>${component.percent}</div>
<div>${component.pdac}</div>
<a class="btn btn-primary" href="${component.link}" target="_blank">${component.linkname}</a>
<input type="button" class="additionSelectButton"></input>
</div>
</div>
</div>`;
console.log("Created", component.card, "Cards");
});
console.log("Card Creation Complete");
};接下来，点击收藏按钮后-
footFavoritesArray = [];
function footFavorites(foot){
console.log(foot, "foot object");
console.log(foot.id, "foot id object");
let getStoredFavorite = JSON.parse(localStorage.getItem(foot.id));
console.log(getStoredFavorite, "retrieved cart item from local storage");
// retrieve the stored favorite item
footFavoritesArray.push(getStoredFavorite);
console.log(footFavoritesArray, "local storage array with favorite item");
// add the item to the cart array
localStorage.setItem("Foot Favorites", JSON.stringify(footFavoritesArray))
// push the cartArray to local storage
let getFavorites = JSON.parse(localStorage.getItem("Foot Favorites"));
console.log(getFavorites, "local storage favorite array");
// retrieve the stored array to check the values
document.getElementById('footItemSectionJS').innerHTML = "";
// clear the favorites viewport so the older items are removed, and redisplayed as a new one is added
let favoritesLocation = document.querySelector('#footItemSectionJS');
// document.getElementById('footItemSectionJS').innerHTML = getFavorites;
// set the location where the favorite should show in the new configuration
getFavorites.forEach(component => {
favoritesLocation.innerHTML = favoritesLocation.innerHTML +
`<div class="card favorites card-margin" id="${component.valAssign}">
<a class="footClick btn-small btn btn-primary" onclick="footCartItem(${component.valAssign})" > + Cart </a>
<img class="card-image" src="${component.image}"></img>
<div class="card-header">
<h4 id=""> ${component.name} </h4>
<a class="footClick btn btn-primary" onclick="removeFavorites(${component.valAssign})" > Remove Favorite </a>
<div id="">HD Code: ${component.hdcode}</div>
<h5><u> L-Codes </u></h5>
<div class="lcodes">
<div id="${component.lcode1}">${component.lcode1}</div>
<div id="${component.lcode2}">${component.lcode2}</div>
<div id="${component.lcode3}">${component.lcode3}</div>
<div id="${component.lcode4}">${component.lcode4}</div>
<div id="${component.lcode5}">${component.lcode5}</div>
<div id="${component.lcode6}">${component.lcode6}</div>
</div>
</div>
</div>
</div>`;
console.log("Created", component.card, "Cards");
});
}把最喜欢的去掉-
function removeFavorites(item){
console.log(item[0].id, "item [0].id");
let getfavorite = JSON.parse(localStorage.getItem("Favorites"));
console.log(getfavorite, "local storage favorite array");
// the favorites array to be modified
let favoriteSpread = {...getfavorite};
console.log(favoriteSpread, "favoriteSpread");
let parts = JSON.parse(localStorage.getItem(item[0].id));
console.log(parts, "parts, the item created from the array item in local storage ");
let indexItem = getfavorite.map(object => object.valAssign).indexOf(item[0].id);
console.log(indexItem, "Index Item")
getfavorite.splice(indexItem, 1);
console.log(getfavorite, "getfavorite Array spliced")
// splice out the item from the favorite array.
localStorage.setItem("Favorites", JSON.stringify(getfavorite));
// push the modified favoriteArray back to local storage
let showfavorite = JSON.parse(localStorage.getItem("Favorites"));
console.log(showfavorite, "local storage favorite array");
// retrieve the favorite array back from local storage
document.getElementById('footItemSectionJS').innerHTML = "";
// clear the favorites viewport so the older items are removed, and redisplayed as a new one is added
let favoritesLocation = document.querySelector('#footItemSectionJS');
// document.getElementById('footItemSectionJS').innerHTML = getFavorites;
// set the location where the favorite should show in the new configuration
showfavorite.forEach(component => {
favoritesLocation.innerHTML = favoritesLocation.innerHTML +
`<div class="card card-margin" id="${component.valAssign}">
<a class="kneeClick btn-small btn btn-primary" onclick="cart(${component.valAssign})" > + Cart </a>
<img class="card-image" src="${component.image}"></img>
<div class="card-header">
<h4 id=""> ${component.name} </h4>
<a class="kneeClick btn btn-primary" onclick="removeFavorites(${component.valAssign})" > Remove Favorite </a>
<div id="">HD Code: ${component.hdcode}</div>
</div>
</div>
</div>`;
console.log("Created", component.card, "Cards");
});
// display the retrieved array items in the "favorite"
// reload the favorite and display it anew
}型
最后，这里是我的本地存储中发生的情况的快照-
首先，保存收藏夹-
[
{
"valAssign": "abc",
"manufacturer": "abc",
"name": "abc",
}
]第二，删除-
[]
第三，添加另一个项目的收藏夹-
[
{
"valAssign": "abc",
"manufacturer": "abc",
"name": "abc",
},
{
"valAssign": "def",
"manufacturer": "def",
"name": "def",
}
]同样，在我的本地存储中，键/值对的值看起来像[，...]，而其他时候它将是一个对象显示在该行中。2尝试提供尽可能多的信息。3谢谢你的帮助，这难倒了我。
1条答案
按热度按时间sxpgvts31#
正如上面的布局回答我的，这是一个范围的问题。2我没有修改全局数组，只修改了本地存储的数组。3这意味着每当我添加一个新的项目到数组中，我也添加了任何全局存储的数组对象到本地存储中，这些对象显示在我的视口中。4我与他的修复不同的地方是，我保持全局数组全局，这使我走上了正确的道路。但修改它的功能，以删除一个收藏夹。如下-