web-dev-qa-db-ja.com

jQuery .data（）はどのように機能しますか？

アプリケーションで.data()を使用したい。 examples は役に立ちますが、値が格納されている場所はわかりません。

FirebugでWebページを検査し、.data（）がオブジェクトをdom要素に保存するとすぐに、Firebugにanyの変更が表示されません（どちらか） HTMLまたはDomタブ）。

私はjQueryソースを調べようとしましたが、それは私のJavaScriptの知識としては非常に高度なものであり、自分を失ってしまいました。

だから問題は：

JQuery.data（）によって保存された値は実際にはどこに行きますか？ツールを使用してそれらを検査/検索/一覧表示/デバッグできますか？

jqueryclientstorage
54
kazanaki

source をご覧ください。

一見すると、2行目に作成されたcache変数にデータが格納されているようです。

編集：

以下は、キャッシュ内のデータを見つける簡単なデモです。 http://jsfiddle.net/CnET9/

ダンプすることもできます$.cacheをコンソールに追加し、手動で探索します。

39
Matt

あなたはどこへの答えを得たようですが、ここではその方法について少し説明します。これを使用する前に知っておくべきいくつかのルールがあります。

[〜＃〜]追加[〜＃〜]

$（ '。selector'）。data（）から返されたオブジェクトを使用して変数を追加すると、データオブジェクトが参照で渡されるため、プロパティを追加する場所に追加されます。別の要素でdata（）を呼び出すと、変更されます。それはそれが何であるかです...

var oData = $('#id').data();
oData.num = 0;
oData.num == $('#id').data().num; // true

オブジェクトを追加すると、データオブジェクトの内部にオブジェクトが配置されるだけでなく、「その要素で以前に保存されたデータが拡張されます」。 - http://api.jquery.com/data/#entry-longdesc

つまり、objをdataObjに追加すると、

oData.obj = {};    
oData === { /*previous data*/, obj : { } }

配列を追加しても、以前に保存されたデータは拡張されませんが、単純な値と同じようには動作しません...

[〜＃〜]使用[〜＃〜]

単純な値が格納されている場合は、それらを変数に配置して、データオブジェクトを変更せずにそれらを使用して必要な処理を実行できます。

ただし

要素にデータを格納するためにオブジェクトまたは配列を使用している場合は、注意してください！

変数に格納したからといって、データ値を変更していないわけではありません。関数に渡したからといって、データ値を変更していないわけではありません。

それはそれが何であるかです。それが単純でない限り..それは単なるコピーです。 ：p

var data             = $("#id").data();  // Get a reference to the data object 
data.r_redirect      = "index.php";      // Add a string value
data.num             = 0;                // Add a integer value
data.arr             = [0,1,2];          // Add an array
data.obj             = { a : "b" };      // Add an object

                                         // but here is where the fun starts! 

var r_redirectString = data.r_redirect;  // returns "index.php", as expected.. cool
r_redirectString     = "changed"         // change the value and the compare :
data.r_redirect      == r_redirectString // returns false, the values are different

var oArr             = data.arr;         // Now lets copy this array
oArr.Push(3);                            // and modify it.
data.arr            == oArr              // should be false? Nope. returns true.
                                         // arrays are passed by reference.
                                         // but..

var oObj             = data.obj          // what about objects?       
oObj["key"]          = "value";          // modify the variable and
data.obj["key"]     == oObj["key"]       // it returns true, too!

だから、リソース...

jQueryの$ .data（）に複数の値を格納する最良の方法は何ですか？https://stackoverflow.com/a/5759883/1257652

7
Brett Weber

次のように、パラメーターなしで .data() を呼び出すだけで検査できます。

_$("div").data("thing", "value");​​​​​​
console.log($("div").data());
//or...
console.log($.data($("div").get(0)));
_

「場所」については、要素を表すキーの下のグローバルjQueryキャッシュオブジェクトに格納されます。 .data()を呼び出すと、実際にはjQuery.data(yourDomElement)が返されます。特定の値を要求した場合は、そのキーにタックを付けます。

4
Nick Craver