jQuery使用localStorage存数成功但append无法渲染到.sNote节点求助

你代码里有3个核心错误导致没渲染出来：

1. 遍历localStorage的语法完全错误：localStorage没有keys(hrd, para)这个API，而且hrd、para是点击事件内的局部变量，页面初始化执行遍历逻辑时根本拿不到这两个变量
2. 只有页面初始化的时候执行了一次渲染逻辑，点击Done按钮存完数据后没有触发重新渲染，新存的内容自然不会显示
3. 你直接用输入的标题内容当localStorage的key，要是后续输入了相同的标题，旧的内容会被直接覆盖，建议后续优化时加唯一前缀或者用数组存所有笔记

修复后的代码 #

JS代码

$(document).ready(function() {
  // 封装渲染笔记的公共函数
  function renderNotes() {
    // 先清空原有内容，避免重复渲染
    $(".sNote").empty()
    // 正确遍历localStorage的写法
    for (var i = 0; i < localStorage.length; i++) {
      // 拿到第i项的key（就是你存的标题）
      const noteTitle = localStorage.key(i)
      // 拿到对应的值（就是你存的内容）
      const noteContent = localStorage.getItem(noteTitle)
      // 追加到节点
      $(".sNote").append(
        `<div class="hrd">${noteTitle}</div><div class="para">${noteContent}</div>`
      );
    }
  }

  // 页面初始化先渲染一次已有的笔记
  renderNotes()

  $(".aNote").on("click", function() {
    var hrd = $(".iNote-items").val();
    var para = $(".iNote-items-2").val();

    console.log(hrd);
    console.log(para);

    if (hrd && para) {
      localStorage.setItem(hrd, para);
      // 存完之后重新调用渲染函数，新内容就会显示了
      renderNotes()
      // 可选：存完清空输入框
      $(".iNote-items, .iNote-items-2").val('')
    }
  });
});

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="iNote-inputs">
  <textarea class="iNote-items" rows="3">aaaa</textarea>
  <textarea class="iNote-items-2" rows="3"></textarea>
  <div class="aNote">Done</div>
</div>

<div class="spl-hrd-iNote">
  <div class="sNote"></div>
</div>

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