如何通过localStorage保存追加的div，实现刷新/换页后仍显示？

嘿，我来帮你搞定这个问题！你当前的代码只处理了点击时创建聊天框的逻辑，但没有在页面初始化时恢复之前的状态，所以刷新或跳转页面后聊天框就消失了。咱们调整一下代码，让它能记住这个状态：

核心思路 #

• 页面加载时先检查localStorage里是否保存了聊天框的内容，如果有直接渲染到页面
• 点击触发聊天框加载时，要等内容加载完成后再把完整的HTML存入localStorage（因为load()是异步操作，直接存会拿到空内容）

修改后的完整代码 #

jQuery(document).ready(function ($) {
    // 页面初始化时恢复聊天框
    const savedChat = localStorage.getItem("fb-opened");
    if (savedChat) {
        // 把保存的HTML插入到body
        $('<div class="facebook-chat"></div>').html(savedChat).appendTo("body");
    }

    // 点击触发聊天框（如果还没显示的话）
    $('.w-iconbox.iconpos_left.style_default.color_primary.no_text.ico-fbm').one('click', function (e) {
        // 如果已经有聊天框了，直接返回
        if ($('.facebook-chat').length > 0) return;

        $('<div class="facebook-chat"></div>')
            .load("/fbchat.txt", function() {
                // 加载完成后，把聊天框的HTML存入localStorage
                localStorage.setItem("fb-opened", $(this).html());
            })
            .appendTo("body");
    });
});

关键细节说明 #

• 初始化恢复：页面加载时先读取localStorage里的fb-opened值，存在的话就直接创建聊天框并填充内容，这样刷新或跳转后就能直接显示
• 异步处理：把localStorage.setItem放到load()的回调函数里，确保只有当fbchat.txt的内容加载完成后，才把完整的聊天框HTML存起来，避免存到空内容
• 重复点击防护：点击事件里先检查是否已经存在聊天框，避免重复创建；同时保留.one('click')确保只绑定一次点击事件

扩展建议（可选） #

如果以后需要添加关闭聊天框的功能，记得在关闭时调用localStorage.removeItem("fb-opened")，这样下次页面加载就不会自动显示聊天框了。

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