如何使用JavaScript配合localstorage实现数据存储、页面展示及删除功能？

1. 调整HTML结构 #

新增一个专属容器用来展示存储的内容，避免插入元素时打乱原有布局，修改后完整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>Document</title>
</head>
<body>
    <input type="text" name="" id="inp-value">
    <button id="btn">Klicka här!</button>
    <!-- 新增存储条目展示容器 -->
    <div id="storage-list"></div>

    <script src="script.js"></script>
</body>
</html>

2. 重写JavaScript逻辑 #

原有逻辑只能存储单条内容且没有渲染能力，我们调整为数组存储+渲染+删除的完整逻辑，完整代码如下：

const btn = document.getElementById("btn");
const inpValue = document.getElementById("inp-value");
const listContainer = document.getElementById("storage-list");

// 渲染存储列表的公共函数
function renderStorageList() {
    // 清空现有列表，避免重复渲染
    listContainer.innerHTML = '';
    // 从localStorage取已存的内容，没有就默认空数组
    const storedList = JSON.parse(localStorage.getItem('userInputs') || '[]');
    
    // 遍历生成每个条目
    storedList.forEach((item, index) => {
        // 创建条目容器
        const itemDiv = document.createElement('div');
        itemDiv.style.margin = '8px 0';
        itemDiv.style.display = 'flex';
        itemDiv.style.gap = '10px';
        itemDiv.style.alignItems = 'center';
        
        // 内容文本
        const textSpan = document.createElement('span');
        textSpan.textContent = item;
        
        // 删除按钮
        const delBtn = document.createElement('button');
        delBtn.textContent = '删除';
        // 绑定删除事件
        delBtn.onclick = function() {
            // 移除对应索引的条目
            storedList.splice(index, 1);
            // 存回localStorage
            localStorage.setItem('userInputs', JSON.stringify(storedList));
            // 重新渲染列表
            renderStorageList();
        }
        
        // 组装元素
        itemDiv.appendChild(textSpan);
        itemDiv.appendChild(delBtn);
        listContainer.appendChild(itemDiv);
    })
}

// 页面加载时先渲染一次已有的存储内容
renderStorageList();

// 按钮点击逻辑
btn.onclick = function(){
    const value = inpValue.value.trim();
    // 空内容不提交
    if (!value) return;
    
    // 取已有列表，加入新内容
    const storedList = JSON.parse(localStorage.getItem('userInputs') || '[]');
    storedList.push(value);
    // 存回localStorage
    localStorage.setItem('userInputs', JSON.stringify(storedList));
    // 清空输入框
    inpValue.value = '';
    // 更新列表展示
    renderStorageList();
};

核心调整说明 #

• 将localStorage存储结构从单字符串改为数组，支持存储多条内容不会互相覆盖
• 抽取独立的渲染函数，页面加载、新增内容、删除内容时都可以复用，保证视图和存储数据一致
• 删除按钮通过索引定位对应条目，操作完成后自动更新存储和视图

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