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

Question

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

Function 将 class 添加到 div：

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

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

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

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

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

谢谢您的帮助。

Answer 1

这取决于内容的来源。

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

如果你想通过客户端来做，你可以使用 indexedDb 或本地存储

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

const ids = [ 1, 35, 64 ]

当您单击图标时，它可以将 id 推送到该数组，然后像这样保存到本地存储中

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

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

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