如何在页面刷新后持久化保存动态添加的列表项-php教程-PHP中文网

如何在页面刷新后持久化保存动态添加的列表项

本文介绍使用浏览器本地存储（localstorage）实现动态增删列表项并持久化保存，确保页面重载后数据不丢失，无需服务端参与，适合轻量级管理需求。

本文介绍使用浏览器本地存储（localstorage）实现动态增删列表项并持久化保存，确保页面重载后数据不丢失，无需服务端参与，适合轻量级管理需求。

要实现在网页中动态添加汽车描述、图片和价格，并在页面刷新后仍保留所有条目，最简洁、可靠且无需后端支持的方案是利用 localStorage。它允许前端 JavaScript 在用户浏览器中长期保存结构化数据，完美匹配您“添加/删除 + 刷新留存”的核心需求。

✅ 推荐实现方案：基于 localStorage 的全前端管理

我们对原始代码进行重构升级，支持：

添加含 描述、图片 URL、价格 的完整商品项；
每项右侧带「删除」按钮；
所有操作实时同步至 localStorage；
页面加载时自动恢复历史数据；
无刷新交互，体验流畅专业。

以下是完整的 test.js 实现：

// 从 localStorage 加载已有数据，若无则初始化空数组
function loadItems() {
  const saved = localStorage.getItem('carItems');
  return saved ? JSON.parse(saved) : [];
}

// 保存当前数据到 localStorage
function saveItems(items) {
  localStorage.setItem('carItems', JSON.stringify(items));
}

// 渲染列表（清空后重新生成 DOM）
function renderList(items) {
  const listEl = document.getElementById('items');
  listEl.innerHTML = ''; // 清空现有内容

  items.forEach((item, index) => {
    const li = document.createElement('li');
    li.innerHTML = `
      <div class="item-content">
        <strong>${item.description || 'N/A'}</strong><br>
        ${item.image ? `<img src="%24%7Bitem.image%7D" alt="Car"    style="max-width:90%" style="vertical-align:middle; margin-right:8px;">` : ''}
        <span>¥${item.price || '0.00'}</span>
      </div>
      <span class="delete-btn" data-index="${index}">Delete</span>
    `;
    listEl.appendChild(li);
  });

  // 绑定新生成的删除按钮事件（委托更优，但此处简单绑定）
  document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      const idx = parseInt(this.getAttribute('data-index'));
      const items = loadItems();
      items.splice(idx, 1);
      saveItems(items);
      renderList(items); // 重绘
    });
  });
}

// 初始化：加载并渲染
document.addEventListener('DOMContentLoaded', () => {
  const items = loadItems();
  renderList(items);

  // 添加按钮逻辑
  const addButton = document.getElementById('add-item');
  addButton.addEventListener('click', () => {
    const desc = prompt('请输入汽车描述：');
    if (!desc) return;

    const image = prompt('请输入图片 URL（可选，直接回车跳过）') || '';
    const priceInput = prompt('请输入价格（如：299999.99）') || '0';
    const price = isNaN(parseFloat(priceInput)) ? 0 : parseFloat(priceInput).toFixed(2);

    const newItem = { description: desc.trim(), image, price };
    const items = loadItems();
    items.push(newItem);
    saveItems(items);
    renderList(items);
  });
});

同时建议补充简易 CSS 增强可读性（添加至 test.css）：

ul {
  padding: 0;
}
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9f9f9;
  margin: 6px 0;
  padding: 10px 12px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.item-content {
  flex: 1;
  font-size: 0.95em;
  line-height: 1.4;
}
.delete-btn {
  margin-left: 12px;
  background-color: #e74c3c;
  color: white;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85em;
  user-select: none;
}
.delete-btn:hover {
  background-color: #c0392b;
}
img {
  max-height: 40px;
  border-radius: 2px;
}