如何用localStorage保存追加的div，实现页面刷新/跳转后仍可见？

你当前的问题核心在于只在点击时尝试存储聊天框内容，但页面刷新或跳转后没有读取存储状态来恢复聊天框，而且原代码里的localStorage.setItem还存在语法错误（括号未闭合、html()参数缺失）。另外直接存储HTML可能导致fbchat.txt里的动态脚本无法重新执行，所以更稳妥的方式是存储一个「是否已打开」的状态标记，而非完整HTML。

下面是修正后的完整实现方案：

步骤1：页面初始化时自动恢复聊天框 #

页面加载完成后，先检查localStorage里的状态，如果标记为「已打开」，直接加载聊天代码并插入页面：

jQuery(document).ready(function ($) {
    // 页面加载时检查状态，自动恢复聊天框
    const isFbChatOpened = localStorage.getItem("fbChatOpened") === "true";
    if (isFbChatOpened) {
        $('<div class="facebook-chat"></div>').load("/fbchat.txt").appendTo("body");
    }

    // 点击触发聊天框的逻辑
    $('.w-iconbox.iconpos_left.style_default.color_primary.no_text.ico-fbm').one('click', function (e) {
        e.preventDefault();
        const $chatBox = $('<div class="facebook-chat"></div>').load("/fbchat.txt").appendTo("body");
        // 存储「已打开」的状态标记
        localStorage.setItem("fbChatOpened", "true");

        // 可选：如果聊天框有关闭按钮，添加关闭逻辑并同步更新状态
        $chatBox.on('click', '.close-btn', function() {
            $chatBox.remove();
            localStorage.setItem("fbChatOpened", "false");
        });
    });
});

关键修正说明： #

• 改用状态标记存储：不再存储聊天框HTML，而是存fbChatOpened字符串（localStorage仅支持字符串存储），避免直接存HTML导致的脚本无法重新执行问题。
• 初始化时恢复状态：页面加载后先判断存储状态，符合条件就自动加载聊天框，无需用户再次点击。
• 修复语法错误：补全原代码中缺失的括号与参数，确保存储逻辑正常运行。
• 同步关闭状态（可选）：如果聊天框有关闭按钮，添加对应逻辑并更新localStorage，保证用户关闭后刷新页面不会再次自动显示。

注意事项： #

• 确保/fbchat.txt里的Facebook聊天代码支持重复加载，官方客服聊天脚本一般已处理重复加载的判断。
• 若用户清除浏览器本地存储，状态会丢失，这是localStorage的固有特性，属于正常情况。

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