新增Textarea后jQuery待办清单的LocalStorage存储功能失效如何解决？

• 回车事件绑定逻辑错误：原代码给.iNote-items的按键事件多传了一个空字符串作为委托选择器参数，导致该回车监听被绑定到全局，所有元素触发回车都会执行保存回调。当你在新增的textarea里按回车时，回调会读取.iNote-items的内容，此时该输入框为空就会触发焦点抢占，看起来存储功能异常。
• 存储逻辑只适配单文本框：原代码的保存、清空逻辑都只针对.iNote-items这一个文本框，如果你需要新增的textarea内容也被存储，需要额外补充对应的取值、赋值逻辑。

如果你只需要保留原有逻辑，仅让新增的textarea不干扰原有功能，只需修正事件绑定的参数即可：

// 把原来错误的keypress绑定写法
// $('.iNote-items').keypress('', function(event) {
// 修改为下面的写法，去掉多余的空字符串参数
$('.iNote-items').keypress(function(event) {
  if (event.keyCode === 13) {
    // 阻止默认回车换行行为，避免文本框多出空行
    event.preventDefault();
    $('.aNote').click();
  }
});

如果你需要同时存储两个textarea的内容，可以将保存逻辑修改为读取两个文本框的值组合后存储：

$('.aNote').on('click', function() {
  // 同时读取两个文本框的内容
  let hrdVal = $('.hrd').val();
  let itemVal = $('.iNote-items').val();
  // 可以根据需求调整组合规则，这里示例是两个都不为空才保存
  if (hrdVal != "" && itemVal != "") {
    uniqid = Date.now();
    id = (uniqid / 1231).toString().split(".")[1] + randChar(4);
    // 存储对象保存两个字段
    list[id] = {
      hrd: hrdVal,
      item: itemVal
    };
    $('title').text("You have (" + Object.keys(list).length + ") item/s on your ToDo List");
    if (storage) {
      localStorage.setItem("list", JSON.stringify(list));
    }
    // 保存后清空两个文本框
    $('.hrd').val("");
    $('.iNote-items').val("");
    // 渲染对应两个字段
    $('.sNote').append(
      '<div class="list-item" data-postid="' + id + '">' + 
      '<p>分类：' + hrdVal + '</p>' +
      '<p>内容：' + itemVal + '</p>' +
      '</div><div class="close"><i class="fas fa-times"></i></div>'
    );
  } else {
    // 哪个为空就聚焦哪个
    if (hrdVal === "") $('.hrd').focus();
    else $('.iNote-items').focus();
  }
});

同时对应的初始化渲染逻辑也要同步修改：

for (var i = 0; i < Object.keys(list).length; i++) {
  let key = Object.keys(list)[i];
  let item = list[key];
  $('.sNote').append(
    '<div class="list-item" data-postid="' + key + '">' + 
    '<p>分类：' + item.hrd + '</p>' +
    '<p>内容：' + item.item + '</p>' +
    '</div><div class="close"><i class="fas fa-times"></i></div>'
  );
}

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