如何Immutable本地存储jQuery对象？解决Pug创建DOM移除后恢复问题

嘿，我完全get你的场景：页面加载用Pug生成带嵌套元素的容器DIV，过滤操作必须用.remove()而非.hide()，现在需要把初始状态的容器存起来，方便“清除筛选”时找回所有被移除的元素，还打算存在window对象上对吧？

核心思路其实很简单：在页面初始状态时，立刻克隆一份容器的完整快照（深克隆），把这个快照作为不可变的“基准版本”存储——因为原容器会随着.remove()操作改变，但快照是完全独立的，不会受后续DOM操作影响。

下面给你具体的实现步骤和代码示例：

1. 时机：在任何操作前保存初始快照 #

一定要在过滤操作执行前完成快照存储，最好是DOM加载完成后立刻执行：

$(document).ready(function() {
  // 假设你的容器选择器是#filter-container
  // 用.clone(true, true)做深克隆，连元素绑定的事件、数据也一起复制
  window.filterContainerSnapshot = $('#filter-container').clone(true, true);
});

这里的clone(true, true)很重要：第一个参数控制是否复制元素数据，第二个控制是否复制事件绑定，这样后续恢复的元素功能不会失效。

2. 执行过滤操作（用.remove()） #

用户触发过滤时，直接操作原容器里的元素就行：

function applyFilter(filterRule) {
  // 移除不符合筛选规则的元素
  $('#filter-container .item').filter(filterRule).remove();
}

3. 清除筛选：从快照恢复初始状态 #

清除筛选时，先清空当前容器，再从快照克隆一份新的内容插入进去——注意必须克隆快照，不能直接把快照元素移到DOM里，否则快照本身会被修改，下次恢复就失效了：

function clearFilter() {
  // 清空当前容器的剩余元素
  $('#filter-container').empty();
  // 克隆快照的内容，插入到容器中
  $('#filter-container').append(window.filterContainerSnapshot.clone(true, true).children());
}

4. window存储的小技巧 #

存在window上是可行的，但为了避免全局变量冲突，建议加个命名空间：

// 先创建全局命名空间
window.MyApp = window.MyApp || {};
// 把快照存在命名空间下
window.MyApp.snapshots = {
  filterContainer: $('#filter-container').clone(true, true)
};
// 后续调用就用window.MyApp.snapshots.filterContainer

额外提示 #

如果你的容器里有AJAX加载的动态内容，一定要等动态内容渲染完成后再保存快照，不然快照会缺失这些内容：

$.get('/api/items', function(data) {
  // 先把动态数据渲染到容器里
  renderItemsToContainer(data);
  // 数据渲染完成后再保存快照
  window.filterContainerSnapshot = $('#filter-container').clone(true, true);
});

这样就能完美解决你的需求：每次清除筛选时，都能从不可变的快照里恢复所有初始元素，完全不受之前.remove()操作的影响。

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