用localstorage可实现刷新不丢数据的简易记事本：三步完成——页面加载时读取localstorage中"notecontent"并填入textarea；监听textarea的input事件实时保存；可选添加清空按钮和字数统计。

用 localStorage 就能做出一个不依赖后端、刷新不丢数据的简易记事本——核心就三步：读取已有内容、监听输入变化、自动保存。

页面结构与基础样式

一个 textarea 用于编辑，加个简单标题和说明即可。不需要表单提交，也不需要按钮触发保存——所有操作都实时响应。

示例结构：

我的记事本

初始化：从 localStorage 读取内容

页面加载时，先检查 localStorage 中是否存在 key 为 "noteContent" 的数据。如果有，填入 textarea；没有则留空。

代码要点：

• 用 document.getElementById("note").value = saved || "" 赋值，避免 undefined 显示为字符串
• 建议加上 try...catch，防止 localStorage 不可用（如无痕模式禁用）时脚本报错

自动保存：监听输入并写入 localStorage

给 textarea 绑定 input 事件（比 keyup 更可靠，兼容粘贴、删除等操作），每次内容变化就存一次。

关键细节：

• 直接调用 localStorage.setItem("noteContent", value) 即可
• 不需要防抖，简易记事本对性能要求不高；若想优化，可加 300ms 延迟，避免高频写入
• 注意：localStorage 只支持字符串，textarea.value 本身就是字符串，无需额外转换

可选增强：清空功能与字数统计

加个清空按钮让体验更完整：

• 按钮点击后清空 textarea，并执行 localStorage.removeItem("noteContent")
• 在底部加一行显示当前字数：0 字，并在 input 事件里同步更新 counter.textContent = note.value.length

不复杂但容易忽略：记得在 JS 开头检查 typeof localStorage !== 'undefined'，确保环境支持。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！