使用JavaScript localStorage实现每日计划页面文本保存遇问题求助

你的代码里的核心问题 #

• localStorage的setItem方法第一个参数必须是字符串类型的唯一标识（key），你直接传了jQuery对象textbox，这是无效的，应该用每个计划项的专属标识（比如data-hour的值）作为key。
• localStorage.setItem(textbox)写法错误：setItem需要两个参数（key和要保存的内容），且它没有返回值，不能赋值给变量。
• 逻辑顺序颠倒：页面初始化时应该从localStorage读取数据填充到输入框，而非直接写入；保存操作应该绑定在用户修改文本的事件上（比如输入完成、失去焦点时）。
• currVal变量未定义，导致判断条件完全无效。

修正后的实现思路和代码 #

1. 初始化输入框时，从localStorage读取对应key的内容填充
2. 给输入框绑定事件，用户修改内容后自动保存到localStorage
3. 用每个计划项的唯一标识作为key，确保每行数据独立存储

示例代码：

// 初始化单个计划项的文本框
div.text(dailyPlanner[i].hour);

let textbox = $("<textarea>");
textbox.attr("data-hour", dailyPlanner[i].line);
textbox.addClass("col-8 col-md-10 description");

// 生成唯一存储key，避免和其他localStorage数据冲突
const storageKey = `daily_plan_${dailyPlanner[i].line}`;

// 页面加载时读取已保存的内容
const savedContent = localStorage.getItem(storageKey);
if (savedContent) {
  textbox.val(savedContent);
} else {
  // 无保存数据时用默认内容
  textbox.val(dailyPlanner[i].text);
}

// 绑定保存事件：输入框失去焦点时保存内容
textbox.on("blur", function() {
  const currentText = $(this).val();
  localStorage.setItem(storageKey, currentText);
});

额外提醒 #

• localStorage仅支持存储字符串，若后续需要存储复杂对象，可使用JSON.stringify()转成字符串存入，读取时用JSON.parse()解析。
• 确保每个计划项的key唯一，避免不同行的数据互相覆盖。

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