如何实现将for循环处理的数组存入localStorage？购物清单代码问题

问题分析 #

你的代码存在两个核心问题：

• 数组每次提交都会重置：每次触发表单提交时，你都创建了新的空数组var items = []，导致之前存入localStorage的记录完全丢失，永远只能保存当前输入的单个项。
• 错误使用$.each循环：shoppingInput是获取到的输入框字符串值，不是DOM元素集合。用$.each遍历字符串会把它拆成单个字符逐个处理，而且$(this).val()完全无效——因为this此时是单个字符，不是jQuery对象，自然没有val()方法。

修正方案 #

关键修改点 #

1. 每次提交时先从localStorage读取已有的购物项数组，而非新建空数组
2. 直接将当前输入的项添加到数组，无需多余的循环
3. 页面加载时从localStorage恢复购物列表，避免刷新后丢失内容

修正后的JavaScript代码 #

var shoppingFormEl = $('#shopping-form');
var shoppingListEl = $('#shopping-list');

// 页面加载时从localStorage恢复购物列表
function loadShoppingList() {
  var savedItems = localStorage.getItem("items");
  if (savedItems) {
    var items = JSON.parse(savedItems);
    items.forEach(item => {
      shoppingListEl.append(`<li> ${item} </li>`);
    });
  }
}

function handleFormSubmit(event) {
  event.preventDefault();
  var shoppingInput = $('input[name="shopping-input"]').val();
    
  if (!shoppingInput) {
    alert('please enter a value in the input field');
    return;
  }

  // 先读取localStorage中已有的数组，没有则初始化空数组
  var items = JSON.parse(localStorage.getItem("items")) || [];
  // 添加当前输入的项
  items.push(shoppingInput);
  
  shoppingListEl.append(`<li> ${shoppingInput} </li>`);
  $('input[name="shopping-input"]').val('');

  // 存入localStorage
  localStorage.setItem("items", JSON.stringify(items));
}

// 页面加载完成后恢复列表并绑定事件
$(document).ready(function() {
  loadShoppingList();
  shoppingFormEl.on("submit", handleFormSubmit);
});

修正后的HTML代码（移除重复的jQuery引入） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>jQuery Shopping List</title>
  <link rel="stylesheet" type="text/css" href="./assets/css/jass.css" />
  <link rel="stylesheet" type="text/css" href="./assets/css/style.css" />
</head>
<body class="bg-dark text-light">
  <main class="my-5 mx-auto">
    <h1>Shopping List</h1>
    <hr />

    <h2>Add an item to the list.</h2>
    <form id="shopping-form">
      <input type="text" class="form-input w-100" id="shopping-input" name="shopping-input"
        placeholder="Enter item name" />
      <button class="btn btn-info">Add Item</button>
   </form>

   <ul id="shopping-list"></ul>
  </main>

  <!-- 保留一个jQuery引入即可 -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="assets/js/script.js"></script>
</body>
</html>

说明 #

• 新增loadShoppingList函数，页面加载时从localStorage读取并渲染已保存的购物项
• 提交表单时先获取已有数组，再添加新项，确保历史记录不会丢失
• 移除了无效的$.each循环，直接操作数组即可完成需求

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