如何在指定jQuery/HTML代码中正确放置localStorage getItem与setItem？

要实现页面刷新后盒子里的文本不丢失，你需要在两个关键位置加入localStorage操作：页面初始化时读取存储的内容，每次发送文本后更新存储的内容。以下是修改后的完整代码：

修改后的jQuery代码 #

$(document).ready(function() {
  var $input1 = $('.textField');
  
  // 页面加载时，从localStorage读取并恢复每个盒子的内容
  $('[data-box]').each(function() {
    var boxKey = $(this).data('box');
    var savedContent = localStorage.getItem(boxKey);
    // 如果有存储的内容，就替换盒子的默认内容
    if (savedContent) {
      $(this).html(savedContent);
    }
  });

  $(".sendTo").on("click", function() {
    var box = $(this).data("sendto");
    var $targetBox = $(`[data-box='${box}']`);
    
    // 把输入框内容追加到目标盒子
    $targetBox.append($input1.val());
    $input1.val("");
    
    // 把目标盒子的最新内容存入localStorage
    localStorage.setItem(box, $targetBox.html());
  });
});

对应HTML代码（无需修改） #

<input class="textField" type="text">
<div class="sendTo" data-sendto='box1'>send to box 1</div>   
<div class="sendTo" data-sendto='box2'>send to box 2</div> 
<div data-box="box1">box 1</div>
<div data-box="box2">box 2</div>

关键逻辑说明 #

• 初始化读取：页面加载完成后，遍历所有带data-box的元素，用它们的data-box值作为localStorage的键，读取对应存储的内容并渲染到盒子里。如果没有存储内容，就保留默认的"box 1"/"box 2"。
• 发送后存储：每次点击发送按钮，追加文本到目标盒子后，立即把盒子的完整HTML内容存入localStorage，确保最新状态被保存。
• 独立存储：每个盒子用自身的data-box值作为存储键，保证两个盒子的内容不会互相干扰。

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