点击添加按钮后仅显示当前笔记，需实现新增后保留全部笔记展示

嘿，我帮你找到了问题的核心原因，咱们来一步步解决它！

问题根源 #

你当前的代码里，userNotes数组在页面初始化时直接设为空数组[]，而没有从localStorage中加载已有的笔记数据。这就导致了：

• 页面刚启动时，displayNotes()直接从localStorage读取数据，所以能正常展示全部笔记；
• 但点击添加按钮时，你是往空数组里push新笔记，然后把这个只包含新笔记的数组存回localStorage，直接覆盖了原来的全部数据，所以再次调用displayNotes()时只能看到刚添加的那一条。

修复方案 #

只需要在初始化userNotes的时候，先从localStorage读取已有数据，同时处理localStorage为空的情况（避免JSON.parse报错）。

修改后的完整代码如下：

let addButton = document.querySelector(".addBtn");
// 初始化时从localStorage加载已有笔记，没有数据则设为空数组
let userNotes = JSON.parse(localStorage.getItem("Notes")) || [];
displayNotes();

// addButton Event Listner
addButton.addEventListener("click", function(e) {
 e.preventDefault();
 // get the user inputs
 let userInputs = {
 title: document.getElementById("title_input").value,
 description: document.getElementById("des_input").value
 };
 // push user inputs to arrays
 userNotes.push(userInputs);
 document.querySelector("form").reset();
 // store to the localstorage
 localStorage.setItem("Notes", JSON.stringify(userNotes));
 // display to the user
 displayNotes();
});

function displayNotes() {
 let gettingNotes = localStorage.getItem("Notes");
 let allNotes = JSON.parse(gettingNotes) || []; // 同样处理null情况
 let html = "";
 allNotes.forEach(element => {
 html += `
 <div class="single-item">
 <h2 class="single-item-title"> ${element.title} </h2>
 <p class="single-item-description"> ${element.description} </p>
 </div>
 `;
 });
 document.querySelector(".item-list").innerHTML = html;
}

关键修改点说明 #

1. 初始化userNotes：JSON.parse(localStorage.getItem("Notes")) || [] —— 如果localStorage里没有Notes项，getItem会返回null，JSON.parse(null)也是null，这时就用|| []设为空数组，避免报错的同时保证数组存在。
2. displayNotes里的容错处理：同样在解析gettingNotes时加上|| []，防止第一次使用时localStorage为空导致forEach报错。

这样修改后，每次添加新笔记时，都是在原有笔记的基础上追加，再存回localStorage，就能实现新笔记和原有笔记一同展示的效果啦！

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