如何在页面刷新后使用Local Storage恢复并管理动态Div内容

来源：站长论坛作者：广州程序员头衔：程序员
导读：本期聚焦于小伙伴创作的《如何在页面刷新后使用Local Storage恢复并管理动态Div内容》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何在页面刷新后使用Local Storage恢复并管理动态Div内容》有用，将其分享出去将是对创作者最好的鼓励。

在前端开发场景里，用户操作页面时动态生成的Div内容，在页面刷新后会直接消失，这是因为动态内容仅存在于当前页面的运行时内存中，没有进行持久化存储。Local Storage是浏览器提供的本地存储API，数据会保存在客户端，除非手动清除，否则不会因为页面刷新、关闭浏览器而丢失，非常适合用来保存这类动态Div的相关数据。

如何在页面刷新后使用Local Storage恢复并管理动态Div内容

Local Storage基础操作说明

Local Storage的操作非常简单，核心方法只有几个，所有数据都以键值对的形式存储，值只能是字符串类型，因此存储复杂数据时需要先序列化。

  • 存储数据：使用localStorage.setItem(key, value)，key是存储的键名，value是要存储的字符串值
  • 读取数据：使用localStorage.getItem(key)，传入键名返回对应的字符串值，如果不存在则返回null
  • 删除数据：使用localStorage.removeItem(key)，传入键名删除对应的存储项
  • 清空所有数据：使用localStorage.clear()，会清空当前域名下所有Local Storage存储的内容

动态Div内容存储与恢复的实现步骤

1. 定义动态Div的数据结构

我们需要先明确动态Div需要保存哪些信息，通常至少包含Div的唯一标识、内容、样式类等，这里用一个对象数组来存储所有动态Div的信息，每个对象代表一个动态Div。

// 动态Div的数据结构示例，每个对象对应一个动态Div
// id: 唯一标识，content: Div内部文本，className: Div的类名，用于样式控制
const divDataTemplate = {
    id: null,
    content: '',
    className: ''
};

2. 动态创建Div时同步存储数据

当用户触发操作创建新的动态Div时，先生成对应的数据对象，存入Local Storage，再渲染到页面上，保证存储和页面展示同步。

// 获取存储的动态Div数据，没有则初始化为空数组
function getStoredDivData() {
    const stored = localStorage.getItem('dynamic_div_list');
    return stored ? JSON.parse(stored) : [];
}

// 保存动态Div数据到Local Storage
function saveDivDataToStorage(divList) {
    localStorage.setItem('dynamic_div_list', JSON.stringify(divList));
}

// 创建新的动态Div
function createDynamicDiv(content, className) {
    // 获取现有数据
    const divList = getStoredDivData();
    // 生成唯一id，这里用时间戳简单实现，实际项目可以用更复杂的唯一id生成方案
    const newDivItem = {
        id: Date.now(),
        content: content,
        className: className || ''
    };
    // 添加新数据到数组
    divList.push(newDivItem);
    // 同步保存到Local Storage
    saveDivDataToStorage(divList);
    // 渲染到页面
    renderDivToPage(newDivItem);
}

// 将单个Div渲染到页面的容器里
function renderDivToPage(divItem) {
    const container = document.getElementById('dynamic-div-container');
    if (!container) return;
    const div = document.createElement('div');
    div.id = 'dynamic-div-' + divItem.id;
    div.className = divItem.className;
    div.textContent = divItem.content;
    container.appendChild(div);
}

3. 页面加载时恢复动态Div

在页面加载完成后，从Local Storage读取存储的动态Div数据，遍历渲染到页面上，实现刷新后内容恢复。

// 页面加载完成后恢复动态Div
window.addEventListener('DOMContentLoaded', function() {
    const divList = getStoredDivData();
    const container = document.getElementById('dynamic-div-container');
    if (!container) return;
    // 清空容器原有内容，避免重复渲染
    container.innerHTML = '';
    // 遍历存储的数据，逐个渲染Div
    divList.forEach(divItem => {
        const div = document.createElement('div');
        div.id = 'dynamic-div-' + divItem.id;
        div.className = divItem.className;
        div.textContent = divItem.content;
        container.appendChild(div);
    });
});

动态Div内容的管理操作

修改动态Div内容

当修改某个动态Div的内容时，需要同步更新Local Storage中的数据，保证存储和页面展示一致。

// 修改指定id的动态Div内容
function updateDynamicDiv(divId, newContent) {
    const divList = getStoredDivData();
    // 找到对应的Div数据项
    const targetIndex = divList.findIndex(item => item.id === divId);
    if (targetIndex === -1) return;
    // 更新内容
    divList[targetIndex].content = newContent;
    // 保存到Local Storage
    saveDivDataToStorage(divList);
    // 更新页面上的Div
    const pageDiv = document.getElementById('dynamic-div-' + divId);
    if (pageDiv) {
        pageDiv.textContent = newContent;
    }
}

删除动态Div

删除动态Div时，需要从Local Storage的数据数组中移除对应项，同时移除页面上的对应元素。

// 删除指定id的动态Div
function deleteDynamicDiv(divId) {
    let divList = getStoredDivData();
    // 过滤掉要删除的Div数据
    divList = divList.filter(item => item.id !== divId);
    // 保存到Local Storage
    saveDivDataToStorage(divList);
    // 移除页面上的Div
    const pageDiv = document.getElementById('dynamic-div-' + divId);
    if (pageDiv) {
        pageDiv.remove();
    }
}

注意事项

  • Local Storage的存储容量一般为5MB左右，不要存储过大的动态Div数据，避免超出限制导致存储失败
  • 存储的数据必须是字符串，复杂数据要用JSON.stringify()序列化，读取时用JSON.parse()反序列化，注意处理反序列化失败的情况
  • Local Storage是同源策略限制的，不同域名下的页面无法互相访问对方的Local Storage数据
  • 敏感数据不要存储在Local Storage中，因为客户端可以轻易修改Local Storage的内容

完整页面示例代码

以下是一个可以直接运行的完整HTML示例，包含动态Div的创建、刷新恢复、修改、删除功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Local Storage恢复动态Div示例</title>
    <style>
        .dynamic-div-container {
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            min-height: 100px;
        }
        .dynamic-item {
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .operate-btn {
            margin-left: 10px;
            padding: 2px 8px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div style="margin: 20px;">
        <input type="text" id="div-content-input" placeholder="输入动态Div内容">
        <button onclick="handleCreateDiv()">创建动态Div</button>
    </div>
    <div id="dynamic-div-container" class="dynamic-div-container"></div>

    <script>
        // 获取存储的动态Div数据
        function getStoredDivData() {
            const stored = localStorage.getItem('dynamic_div_list');
            return stored ? JSON.parse(stored) : [];
        }

        // 保存动态Div数据到Local Storage
        function saveDivDataToStorage(divList) {
            localStorage.setItem('dynamic_div_list', JSON.stringify(divList));
        }

        // 渲染单个动态Div到页面
        function renderDivToPage(divItem) {
            const container = document.getElementById('dynamic-div-container');
            if (!container) return;
            const div = document.createElement('div');
            div.id = 'dynamic-div-' + divItem.id;
            div.className = 'dynamic-item';
            div.innerHTML = `
                <span>${divItem.content}</span>
                <div>
                    <button class="operate-btn" onclick="handleUpdateDiv(${divItem.id})">修改</button>
                    <button class="operate-btn" onclick="handleDeleteDiv(${divItem.id})">删除</button>
                </div>
            `;
            container.appendChild(div);
        }

        // 创建动态Div的处理函数
        function handleCreateDiv() {
            const input = document.getElementById('div-content-input');
            const content = input.value.trim();
            if (!content) {
                alert('请输入Div内容');
                return;
            }
            const divList = getStoredDivData();
            const newDivItem = {
                id: Date.now(),
                content: content,
                className: 'dynamic-item'
            };
            divList.push(newDivItem);
            saveDivDataToStorage(divList);
            renderDivToPage(newDivItem);
            input.value = '';
        }

        // 修改动态Div的处理函数
        function handleUpdateDiv(divId) {
            const newContent = prompt('请输入新的Div内容');
            if (newContent === null) return;
            const divList = getStoredDivData();
            const targetIndex = divList.findIndex(item => item.id === divId);
            if (targetIndex === -1) return;
            divList[targetIndex].content = newContent.trim();
            saveDivDataToStorage(divList);
            const pageDiv = document.getElementById('dynamic-div-' + divId);
            if (pageDiv) {
                pageDiv.querySelector('span').textContent = newContent.trim();
            }
        }

        // 删除动态Div的处理函数
        function handleDeleteDiv(divId) {
            if (!confirm('确定要删除这个Div吗？')) return;
            let divList = getStoredDivData();
            divList = divList.filter(item => item.id !== divId);
            saveDivDataToStorage(divList);
            const pageDiv = document.getElementById('dynamic-div-' + divId);
            if (pageDiv) {
                pageDiv.remove();
            }
        }

        // 页面加载时恢复动态Div
        window.addEventListener('DOMContentLoaded', function() {
            const divList = getStoredDivData();
            const container = document.getElementById('dynamic-div-container');
            if (!container) return;
            container.innerHTML = '';
            divList.forEach(divItem => {
                renderDivToPage(divItem);
            });
        });
    </script>
</body>
</html>

Local_Storage动态Div页面刷新前端存储JavaScript修改时间：2026-06-21 18:45:56

免责声明：​ 已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。

上一篇Phaser 3游戏画布如何实现响应式布局，同时做到高度适配与宽度裁剪

下一篇如何用Tesseract.js优化多栏文本识别？活用页面分段模式PSM的方法有哪些

猜你喜欢

内容垂直聚焦
专注技术核心技术栏目，确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计，为用户提供无干扰的纯技术知识沉淀，精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。AI、前端、编程、数据库、服务器、建站、系统层层递进，构建清晰学习路径，帮助用户系统化掌握开发与运维所需的核心技术。
深度技术解析
拒绝泛泛而谈，深入技术细节与实践难点。无论是数据库优化还是服务器配置，均结合真实场景与代码示例进行剖析，致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端编程，从数据库操作到服务器运维，形成完整闭环，一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性，步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目，显著缩短从学习到实践的距离，快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代，紧跟主流技术发展趋势，为用户提供经久不衰的学习价值。

负责任网站 - 免责声明 - 隐私政策 - 网站地图

举报邮箱：chomcom@qq.com

Copyright (C) www.ipipp.com All Rights Reserved.