如何用jQuery事件监听器结合preventDefault保存textarea数据并刷新留存

1. 修正点击事件中的错误 #

你代码里的preventDefault($(this).siblings(".description").val());是错误用法：

• preventDefault()是事件对象的专属方法，需要通过点击事件的参数调用（比如function(event) { event.preventDefault(); }），但这里完全没必要用——按钮点击本身不会清空textarea的内容，直接删掉这行错误代码即可。

修改后的点击事件代码：

$(".saveBtn").on("click", function() {
  var getId = $(this).parent().attr("id");
  var getText = $(this).siblings(".description").val();
  localStorage.setItem(getId, getText);
  console.log(getId, getText);
});

2. 实现刷新页面后显示已保存内容 #

需要在页面加载完成后，遍历所有时间段区块，从localStorage中取出对应ID的存储值，填充到对应的textarea里：

添加以下初始化代码：

// 页面加载时恢复保存的内容
$(document).ready(function() {
  $(".time-block").each(function() {
    var blockId = $(this).attr("id");
    var savedText = localStorage.getItem(blockId);
    if (savedText) {
      $(this).find(".description").val(savedText);
    }
  });
});

逻辑说明 #

• 点击保存按钮的逻辑本身是正确的：获取当前时间段ID和输入内容，存入localStorage，只需要移除错误的preventDefault调用即可正常工作。
• 新增的初始化代码会在页面加载时，自动遍历所有时段区块，检查localStorage中是否有对应ID的保存内容，存在就填充到对应textarea，实现刷新后保留内容的效果。

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