为笔记应用实现LocalStorage存储与读取功能，解决页面刷新后笔记丢失问题

我看了你的代码，发现几个关键问题导致LocalStorage功能无法正常工作，下面是修复方案和详细解释：

核心问题分析 #

• 存储逻辑错误：你现在每次存储单个笔记文本，会直接覆盖之前的笔记。应该用数组来存储所有笔记，这样才能保留多条记录。
• 缺少页面加载渲染逻辑：页面刷新后没有从LocalStorage读取已存笔记并渲染的代码，所以刷新后笔记全部消失。
• 删除未同步LocalStorage：双击删除笔记后，没有更新LocalStorage里的数据，导致刷新后被删的笔记又会重新出现。
• 输入框未清空：创建笔记后没有清空文本框，影响后续输入体验。

修复后的完整代码 #

HTML（无需修改） #

<body>
 <div class="container">
 <div class="main-container">
 <div class="container1">
 <button class="btn btn-success" onclick="typeNote()">Create note</button>
 </div>
 <div id="output" class="container2">
 </div>
 <div class="container3">
 <form action="">
 <textarea name="" id="note-text" placeholder="Type Note" cols="30" rows="10"></textarea>
 <svg id="check-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
 <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
 <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
 </svg>
 <svg id="x-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
 <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
 <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
 </svg>
 </form>
 </div>
 </div>
 <script src="script.js"></script>
 </div>
</body>

JavaScript（修复后） #

var container2 = document.getElementsByClassName("container2")[0];
var container3 = document.getElementsByClassName("container3")[0];
var checkIcon = document.getElementById("check-icon");
var xIcon = document.getElementById("x-icon")
var i = 0;

// 页面加载时自动读取LocalStorage并渲染所有笔记
window.addEventListener('load', renderNotes);

xIcon.addEventListener("click", function(){
 typeNote();
})

checkIcon.addEventListener("click", function(){
 createNote();
})

function createNote(){
 var noteText = document.getElementById("note-text").value.trim();
 if (!noteText) return; // 过滤空笔记，避免创建无效内容

 // 从LocalStorage获取已有笔记数组，没有则初始化空数组
 let notes = JSON.parse(localStorage.getItem('notes')) || [];
 // 添加新笔记到数组末尾
 notes.push(noteText);
 // 将更新后的数组存回LocalStorage
 localStorage.setItem('notes', JSON.stringify(notes));

 // 渲染这条新笔记
 renderSingleNote(noteText);

 // 清空输入框并隐藏输入面板
 document.getElementById("note-text").value = "";
 typeNote();
}

// 渲染单条笔记的复用函数
function renderSingleNote(noteContent){
 var node0 = document.createElement("div");
 var node1 = document.createElement("h1");
 node1.innerHTML = noteContent;
 node1.setAttribute("style", "width:250px; height:250px; font-size:26px; padding:25px;margin-top:10px; overflow:hidden; box-shadow: 0px 10px 24px 0px rgba(0,0,0,0.75)");
 node1.style.margin = margin();
 node1.style.transform = rotate();
 node1.style.background = color();
 node0.appendChild(node1);
 container2.insertAdjacentElement("beforeend", node0);

 // 鼠标悬浮缩放效果
 node0.addEventListener("mouseenter", function(){
 node0.style.transform = "scale(1.1)";
 })
 node0.addEventListener("mouseleave", function(){
 node0.style.transform = "scale(1)";
 })

 // 双击删除笔记，同步更新LocalStorage
 node0.addEventListener("dblclick", function(){
 // 获取当前所有笔记数组
 let notes = JSON.parse(localStorage.getItem('notes')) || [];
 // 过滤掉当前被删除的笔记内容
 notes = notes.filter(note => note !== node1.innerHTML);
 // 更新LocalStorage数据
 localStorage.setItem('notes', JSON.stringify(notes));
 // 移除页面上的笔记元素
 node0.remove();
 })
}

// 渲染所有已存储的笔记
function renderNotes(){
 let notes = JSON.parse(localStorage.getItem('notes')) || [];
 notes.forEach(note => {
 renderSingleNote(note);
 });
}

function typeNote(){
 if(container3.style.display == "none"){
 container3.style.display = "block";
 } else{
 container3.style.display = "none";
 }
}

function margin(){
 var random_margin = ["-5px","1px","5px","10px","15px","20px"];
 return random_margin[Math.floor(Math.random() * random_margin.length)];
}

function rotate(){
 var random_rotate = ["rotate(3deg)", "rotate(1deg)","rotate(-1deg)", "rotate(-3deg)","rotate(-5deg)","rotate(-10deg)"];
 return random_rotate[Math.floor(Math.random() * random_rotate.length)];
}

function color (){
 var random_color = ["#c2ff3d","#ff3de8","#3dc2ff","#04e022","#bc83e6","#ebb328"];
 if(i > random_color.length -1){
 i = 0;
 }
 return random_color[i++]
}

关键修复点说明 #

1. 数组存储笔记：改用数组存储所有笔记，避免新笔记覆盖旧内容，每次添加新笔记时先读取已有数组再更新存储。
2. 页面加载自动渲染：通过window.load事件触发渲染函数，页面打开时自动加载已存笔记。
3. 删除同步数据：双击删除笔记时，同时从LocalStorage的数组中移除对应内容，确保本地数据和页面展示一致。
4. 空笔记过滤：添加空内容判断，避免创建无意义的空白笔记。
5. 体验优化：创建笔记后自动清空输入框并隐藏输入面板，提升使用流畅度。

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