将 div 加入书签，然后将其加载到单独的 html 文件中

Posted 2023-05-08

【中文标题】将 div 加入书签，然后将其加载到单独的 html 文件中

【英文标题】：Bookmark a div, then load it in a separate html file

【发布时间】：2022-01-13 17:17:09

【问题描述】：

我有一个包含多个 div 的页面。用户可以通过单击图标为每个 div 添加书签。单击图标时，我将 .saved-item 类添加到 div。我有一个单独的页面，我想在其中显示所有已添加书签的 div，但我不知道如何正确操作。

将类添加到 div 的函数：

$('.bookmark').on('click', function()
    $(this).parent().parent().addClass('saved-item');
);

在另一个文件中，然后我尝试加载所有保存的项目：

$("#content").load( "speaking-mistakes.html #wrapper .saved-item" );

不幸的是，由于 addClass 函数不是永久性的，因此它不起作用。我也尝试将 div 添加到 localStorage，但它不会保存整个 div 布局及其内容（带有按钮、文本、样式等），而且我认为加载 localStorage 可能有数百个 div 不会是个好主意。

是否有可能将 div 从一个 HTML 文件动态“移动”或“导出”到另一个 HTML 文件？

感谢您的帮助。

【问题讨论】：

您可以只保存书签项的数据（例如它的 id），然后根据存储的数据动态应用书签。

这里的“div”是什么？通常你会保存 data 并在其他地方重新渲染它。尝试实际保存标记有点奇怪。换句话说，您可能会问xy question。

您只能将字符串放在本地存储中。这意味着您可以字符串化并存储一个基本对象（例如这里的一个 id 数组），但不是 DOM 的一部分。正如Wais 所说，这完全没有必要，您所需要的只是存储一个div 列表，而不是div 本身。如果你借给某人一部电影，你显然不需要制作光盘的物理副本来跟踪它，只需记下他们的姓名和电影的标题。

当您从另一个页面使用 .load() 时，对 DOM（在浏览器中）所做的更改不会反映。这使用 AJAX 从新的 HTTP 请求加载内容。 HTTP 请求将从服务器读取页面，而不会从浏览器读取它

【参考方案1】：

这取决于内容的来源。

这些东西通常保存在数据库服务器端。当点击图标时，您可以在数据库的书签表中添加一个条目。

如果你想通过客户端来做，你可以使用 indexedDb 或local storage

所以你会有一个带有书签的 id 数组

const ids = [ 1, 35, 64 ]

当你点击一个图标时，它可以将 id 推送到这个数组，然后像这样保存到本地存储中

localStorage.setItem("bookmarks", JSON.stringify(ids))

另外，如果用户已登录，您可以将他们的用户 ID 添加为书签数组中的第 0 项，作为“验证”他们的一种方式，这样当其他用户登录时，他们就不会看到以前的用户书签。

这确实应该在服务器端完成，以获得最佳实践