使用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对象，几行代码放置/获取。 然后每行一行以设置一个远程副本，另一行进行实时同步。