项目收尾期Local Storage收藏增删功能异常求助

我来帮你搞定这两个收藏管理的问题，本质都是页面DOM和LocalStorage的数据不同步导致的，咱们一步步来修复：

问题1：单个收藏项删除后刷新又出现 #

你当前的删除按钮只做了页面元素的移除，但完全没改动LocalStorage里的存储数据，所以刷新页面后，旧数据又被重新加载出来了。

修复思路： #

点击删除按钮时，需要同步完成三件事：

• 获取要删除的项的文本内容
• 从LocalStorage对应的数组中移除该项，并更新LocalStorage
• 最后移除页面上的DOM元素

修改删除按钮的事件监听代码：

for (let j = 0; j < del.length; j++) {
  del[j].addEventListener('click', function() {
    // 1. 获取要删除的项文本
    const itemText = this.parentNode.firstChild.textContent.trim();
    // 2. 从数组中过滤掉该项
    ll = ll.filter(item => item !== itemText);
    // 3. 更新LocalStorage
    localStorage.setItem('favorites', ll.join(','));
    // 4. 移除DOM元素
    this.parentNode.remove();
  })
}

问题2：清空全部收藏功能无效 #

你的deleteListe函数只删除了LocalStorage里的favorites项，但页面上的列表元素还留在DOM里，所以看起来没生效。

修复思路： #

清空LocalStorage后，还要同步清空页面上的列表，并重置数组：

修改deleteListe函数：

function deleteListe() {
  localStorage.removeItem("favorites");
  // 清空页面上的列表
  const listElement = document.getElementById('list');
  if (listElement) {
    listElement.innerHTML = '';
  }
  // 重置数组
  ll = [];
}

完整修复后的代码 #

把这些修改整合后，完整代码如下：

<body>
<main>
<h1>Your Favourite Recipes</h1>
<p>These are your favourite recipes that we have saved for you.</p>
<button id="probam" type="button" name="button" onclick="deleteListe()">brisi</button>
<p id="fav"></p>
<script>
let list = localStorage.getItem('favorites');
list = list ? list.split(',') : [];
var ll = [];
ll = list;
var output = document.createElement('ul');
output.setAttribute('id', 'list')
for (let i = 0; i < ll.length; i++) {
var it = document.createElement('li');
var bt = document.createElement('button');
bt.innerHTML = ('Delete');
bt.setAttribute('class', 'delete')
it.appendChild(document.createTextNode(ll[i]));
it.appendChild(bt);
output.appendChild(it);
}
document.getElementById('fav').appendChild(output);

var del = document.getElementsByClassName('delete');
for (let j = 0; j < del.length; j++) {
del[j].addEventListener('click', function() {
  // 获取要删除的项文本
  const itemText = this.parentNode.firstChild.textContent.trim();
  // 过滤数组
  ll = ll.filter(item => item !== itemText);
  // 更新LocalStorage
  localStorage.setItem('favorites', ll.join(','));
  // 移除DOM元素
  this.parentNode.remove();
})
}

function deleteListe() {
localStorage.removeItem("favorites");
// 清空页面列表
const listElement = document.getElementById('list');
if (listElement) {
  listElement.innerHTML = '';
}
// 重置数组
ll = [];
}
</script>
<button type="button" name="button"></button>
<a href="index.html" class='vido'>Home</a>
</main>
</body>

额外小提示 #

• 可以给ll数组起个更有意义的名字，比如favoriteRecipes，这样代码可读性更好
• 如果收藏项里可能包含逗号，用逗号分割数组会有问题，建议改用JSON.stringify和JSON.parse来存储数组，比如：

  // 存储时
  localStorage.setItem('favorites', JSON.stringify(favoriteRecipes));
  // 获取时
  const favoriteRecipes = JSON.parse(localStorage.getItem('favorites')) || [];
  

内容的提问来源于stack exchange，提问作者Harranth