Local Storage存储HTML元素而非值，笔记App数据展示异常求助

问题根源 #

你的代码存在两个核心错误：

• 直接将DOM元素（input/textarea对象）存入LocalStorage，而非输入框的实际内容。LocalStorage仅支持字符串存储，存入对象时会自动转为[object HTMLInputElement]这类标识字符串，所以读取后显示异常。
• 输入为空的判断逻辑错误：document.getElementById("title")返回的是DOM元素对象，永远不会等于空字符串""，哪怕输入框为空，这个判断也会成立，导致空内容被错误存入。

修复后的代码 #

new note.html 脚本修改

function savetitle() {
    var titleInput = document.getElementById("title");
    // 取输入框的value属性获取实际内容，判断是否为空
    if (titleInput.value.trim() !== "") {
        localStorage.setItem("title", titleInput.value);
    } else {
        // 输入为空时移除LocalStorage对应项，避免主页面显示空内容
        localStorage.removeItem("title");
    }
}
function savewrite() {
    var writeInput = document.getElementById("write");
    if (writeInput.value.trim() !== "") {
        localStorage.setItem("write", writeInput.value);
    } else {
        localStorage.removeItem("write");
    }
}

index.html 脚本优化（可选）

如果需要保留textarea的换行格式，textContent已经可以正常识别换行，以下是优化后的读取逻辑：

var titled = localStorage.getItem("title");
var titledEl = document.getElementById("titled");

if (titled) {
    titledEl.textContent = titled;
} else {
    titledEl.textContent = "There isn't any notes";
} 

var written = localStorage.getItem("write");
var writtenEl = document.getElementById("written");

if (written) {
    writtenEl.textContent = written;
} else {
    // 可选：内容为空时添加提示
    writtenEl.textContent = "No content yet";
}

额外提示 #

• 如果后续要支持多条笔记，建议将所有笔记数据存入一个数组，用JSON.stringify()转为字符串存入LocalStorage，读取时用JSON.parse()解析成数组操作。
• 点击返回链接时，当前的onclick写法可以正常执行保存逻辑，但如果遇到保存延迟问题，也可以用event.preventDefault()先阻止跳转，保存完成后再手动跳转到index.html。

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