將 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 項，作為“驗證”他們的一種方式，這樣當其他用戶登錄時，他們就不會看到以前的用戶書簽。

這真的應該在服務器端完成以獲得最佳實踐