如何将输入框完整内容保存到localStorage并在列表中仅显示第一行？

嘿，看起来你已经有了不错的开头！问题的核心在于你需要把完整的任务文本存进localStorage，但只在列表里渲染第一行内容。咱们一步步调整你的代码就能解决：

首先，你需要在创建列表项的时候，把完整的任务内容“藏”在元素里，这样后续保存时能拿到完整信息。然后修改保存和加载逻辑，确保操作的是完整内容而不是仅显示的第一行。

调整后的完整代码示例： #

const ProgButton = document.getElementById("ProgButton");
const InputFieldProg = document.getElementById("InputFieldProg");
const ItemListProg = document.getElementById("ItemListProg");

// 页面加载时加载任务
LoadProgTasks();

function AddProgTask() {
    const ProgTask = InputFieldProg.value.trim(); // 去掉首尾空白，避免空输入

    if (ProgTask) {
        CreateProgTaskElement(ProgTask);
        InputFieldProg.value = '';
        SaveProgTasks();
    }
}

ProgButton.addEventListener("click", AddProgTask);

function CreateProgTaskElement(ProgTask) {
    const ProgListItem = document.createElement("li");
    // 把完整任务内容存在元素的data属性中，方便后续读取
    ProgListItem.dataset.fullContent = ProgTask;

    // 只提取第一行显示，处理第一行是空的情况
    const firstLine = ProgTask.split('\n')[0] || '无标题';
    const taskContent = document.createElement('div');
    taskContent.textContent = firstLine; // 用textContent更安全，避免XSS风险
    ProgListItem.appendChild(taskContent);

    ItemListProg.appendChild(ProgListItem);
}

function SaveProgTasks() {
    // 从所有列表项的data属性中提取完整任务内容
    const allTasks = Array.from(ItemListProg.children).map(item => item.dataset.fullContent);
    // 转成JSON字符串存到localStorage
    localStorage.setItem('progTasks', JSON.stringify(allTasks));
}

function LoadProgTasks() {
    const savedTasks = localStorage.getItem('progTasks');
    if (savedTasks) {
        const tasks = JSON.parse(savedTasks);
        // 逐个创建列表项，还是只显示第一行
        tasks.forEach(task => CreateProgTaskElement(task));
    }
}

关键改动说明： #

• 在CreateProgTaskElement中，用dataset.fullContent把完整任务内容绑定到列表项上，这样即使显示的是第一行，完整内容也不会丢失。
• SaveProgTasks不再读取列表项的显示文本，而是从dataset.fullContent中提取完整内容，确保存进localStorage的是用户输入的全部内容。
• LoadProgTasks读取到完整任务后，还是调用CreateProgTaskElement来渲染，所以加载后依然只显示第一行，完美符合你的需求。

另外我还加了两个小优化：一是用textContent代替innerHTML（避免用户输入特殊字符导致的安全问题），二是处理了第一行是空的情况（比如用户直接输入换行时，显示“无标题”）。

备注：内容来源于stack exchange，提问作者David