如何使用jQuery实现localStorage数据的存储与复用

开发者阿泽

2026-10-3

localStorage追加存储展示实现方案

你原有的代码存在两个问题：

每次调用localStorage.setItem("title", test)会直接覆盖之前存储的内容，无法实现追加效果
没有将存储的内容同步渲染到类为.result的元素中

调整后完整代码

JavaScript代码（替换原有JS即可，HTML、CSS无需修改）

// 页面加载完成后先渲染已存储的历史内容
$(function() {
  renderContent();
})

$(".Done").on("click", function() {
  // 获取输入内容，去除首尾空白
  const inputContent = $(".title").val().trim();
  // 空内容不做提交处理
  if (!inputContent) return;

  // 读取localStorage中已存储的内容列表，默认返回空数组
  const contentList = JSON.parse(localStorage.getItem("contentList") || "[]");
  // 追加新输入的内容到列表
  contentList.push(inputContent);
  // 将更新后的列表转为JSON字符串存回localStorage
  localStorage.setItem("contentList", JSON.stringify(contentList));

  // 渲染更新后的内容到页面
  renderContent();
  // 清空输入框，方便下次输入
  $(".title").val("");
});

// 封装渲染内容的公共方法
function renderContent() {
  const contentList = JSON.parse(localStorage.getItem("contentList") || "[]");
  // 多条内容用换行分隔展示，你也可以根据需求调整拼接格式
  $(".result").html(contentList.join("<br/>"));
}