如何在动态生成的HTML元素中展示LocalStorage数据并实现刷新保留

我尝试将LocalStorage中的数据展示到点击按钮触发函数后创建的两个HTML元素中。在浏览器“Application”标签的“Local Storage”中可以看到数据已成功保存，我希望HTML标题和URL在页面刷新后仍能保留。

HTML代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Work tracker</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="div-main">
        <div class="div-box">
            <h1 class="title-header">Work Tracker V1.00</h1>
            <p>The app was built in order to save the progress of you'r work</p>
            <label for="">Name</label>
            <input type="text" class="input-title">
            <label for="">Enter URL</label>
            <input type="text" class="input-url"> </br>
            <button class="btn-submit" onclick="createWork()">Submit work</button>
        </div>
    </div>

    <div class="div-tree">
        <h1>Tree Of Work</h1>
        <div class="div-work"></div>
    </div>
    <script src="script.js"></script>
</body>

</html>

JavaScript代码如下：

function createWork() {
    let inputTitle = document.querySelector(".input-title").value;
    let inputUrl = document.querySelector(".input-url").value;
    let div = document.createElement('div');
    let newTitle = document.createElement("h2");
    let newUrl = document.createElement("h3");

    div.className = "div-work";
    document.body.appendChild(div);

    div.appendChild(newTitle);
    div.appendChild(newUrl);

    newTitle.innerText = "Title: " + inputTitle;
    newUrl.innerText = "URL: " + inputUrl;

    // save data to local storage
    localStorage.setItem('title', newTitle.innerText);
    localStorage.setItem('url', newUrl.innerText);

    if (localStorage["title"] && localStorage["url"]) {
        let storedTitle = localStorage.getItem('title');
        let storedUrl = localStorage.getItem('url');
        console.log(storedTitle);
        console.log(storedUrl);
    }
};

解决方案 #

原代码存在两个核心问题：每次保存会覆盖LocalStorage中的单条数据，且页面刷新后没有读取存储数据并重新渲染元素的逻辑。以下是修改后的实现：

修改后的JavaScript代码 #

// 获取存储的工作项列表
function getWorks() {
  const storedWorks = localStorage.getItem('works');
  return storedWorks ? JSON.parse(storedWorks) : [];
}

// 渲染所有工作项到页面
function renderWorks() {
  const workContainer = document.querySelector('.div-tree .div-work');
  workContainer.innerHTML = ''; // 清空容器避免重复渲染

  const works = getWorks();
  works.forEach(work => {
    const itemDiv = document.createElement('div');
    itemDiv.className = 'work-item'; // 单独的项类名，避免和容器类冲突

    const titleEl = document.createElement('h2');
    titleEl.innerText = `Title: ${work.title}`;

    const urlEl = document.createElement('h3');
    urlEl.innerText = `URL: ${work.url}`;

    itemDiv.appendChild(titleEl);
    itemDiv.appendChild(urlEl);
    workContainer.appendChild(itemDiv);
  });
}

// 创建新工作项并保存
function createWork() {
  const inputTitle = document.querySelector('.input-title').value.trim();
  const inputUrl = document.querySelector('.input-url').value.trim();

  // 校验输入不为空
  if (!inputTitle || !inputUrl) {
    alert('请填写完整的标题和URL');
    return;
  }

  const works = getWorks();
  // 添加新工作项到数组
  works.push({ title: inputTitle, url: inputUrl });
  // 将数组转为JSON字符串存储
  localStorage.setItem('works', JSON.stringify(works));

  // 清空输入框
  document.querySelector('.input-title').value = '';
  document.querySelector('.input-url').value = '';

  // 重新渲染所有工作项
  renderWorks();
}

// 页面加载完成后自动渲染已保存的工作项
window.addEventListener('DOMContentLoaded', renderWorks);

修改说明 #

1. 存储多条数据：改用数组存储所有工作项，通过JSON字符串格式存入LocalStorage，避免单条数据被覆盖。
2. 页面加载自动渲染：监听DOMContentLoaded事件，页面加载时读取LocalStorage并渲染所有已保存的工作项。
3. 输入校验与优化：添加空输入校验，创建新项后清空输入框，提升用户体验。
4. 容器修正：将新创建的工作项渲染到指定的.div-tree .div-work容器内，而非直接添加到body，符合页面结构逻辑。

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