使用javascript或jquery從保存的html中獲取與元素相關的jquery.data（）

Question

我有一些要保存在數據庫中以供以后檢索的html。

假設html是一個簡單的div

<div id="mydiv">This is my div</div>

我使用jQuery.data（）來存儲一些與該div相關的信息，如下所示：

$("#mydiv").data("divNumber", "5").data("divRole", "adminMessage") .....

然后最后我將html保存在數據庫中，但是我希望以后可以在需要它們時獲得這些信息：

var myHtml = { here I get the html from my database }

$("body").append(myHtml);

console.log( $("#mydiv").data("divNumber") ); // I want it to show 5

console.log( $("#mydiv").data("divRole") ); // I want it to show adminMessag

從我對jquery.data（）的理解來看，我認為它將只是將那些數據信息臨時存儲在內部緩存中，如果我將html保存在數據庫中，然后離開頁面，它們將會丟失！

那么有沒有一種方法可以保留那些jquery.data（）信息並在需要時檢索它們？ 也許還有另一種“更好”的方法可以實現相同的目的（我不是在尋找localStorage方法）

Answer 1

您可以將.data()轉換為html上的數據屬性，然后保存。

 $("#mydiv").data("divNumber", "5").data("divRole", "adminMessage"); $.each($("#mydiv").data(), function(k,v){ $("#mydiv").attr("data-"+k.replace(/[AZ]/g, "-$&"), v); }); var toDatabase = $("#mydiv")[0].outerHTML; //save to database // ... // retrieve from database var fromDatabase = $(toDatabase); $('body').append(fromDatabase.data('divNumber')); $('body').append('<br>'); $('body').append(fromDatabase.data('divRole')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mydiv">This is my div</div> 

Answer 2

如果您希望瀏覽器中的數據庫能夠在所有平台上保持一致，盡管每個瀏覽器具有不同的基礎存儲機制，請嘗試使用PouchDB。 這太棒了！ 您可以將其保留在瀏覽器會話中，該會話將一直保留到用戶清除其數據為止，或者可以將其保留到CouchDB數據庫服務器中。

http://pouchdb.com/

有很多不錯的CouchDB提供程序，如果您不想自己設置，盡管這樣做很簡單。 在您每月的使用費超過$ 50之前，IBM Cloudant是免費的：

https://cloudant.com/

使用非常簡單，請參閱此處 。 幾行代碼創建一個db對象，幾行代碼放置/獲取。 然后每行一行以設置一個遠程副本，另一行進行實時同步。