将JS LocalStorage代码重构为jQuery后功能失效的问题排查

你的jQuery代码失效的核心原因是混淆了jQuery对象与原生DOM元素的属性/方法调用方式：

错误点拆解 #

• 用$(".content-input")获取的是jQuery包装对象，并非原生DOM元素，直接访问.value属性会返回undefined，导致存入localStorage的是undefined，读取时自然得到null。
• jQuery对象没有原生的.textContent属性，直接赋值不会生效，必须使用jQuery提供的.text()方法来操作元素文本内容。

修正后的jQuery代码 #

var input_textarea = $(".content-input");
var output_div = $(".content-output");
var save_button = $(".save-button");

// 页面加载时读取localStorage并填充内容
var savedContent = localStorage.getItem("content");
if (savedContent) {
    output_div.text(savedContent);
    input_textarea.val(savedContent);
}

save_button.on("click", updateOutput);

function updateOutput(event) {
    event.preventDefault();
    var content = input_textarea.val();
    localStorage.setItem("content", content);
    output_div.text(content);
}

修改说明 #

1. 读取localStorage时先判断值是否存在，避免空值填充
2. 用input_textarea.val()获取/设置textarea的内容（jQuery对应原生.value的方法）
3. 用output_div.text(...)设置输出div的文本内容（jQuery对应原生.textContent的方法）

这样修改后，就能和原生JS版本实现完全一致的功能：点击保存按钮将文本存入localStorage，同时同步到输出div，页面刷新后也能从localStorage恢复之前保存的内容。

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