Ранее мы уже использовали метод .data() для сохранения информации при тестировании методов .remove() и .detach(). Именно для этого метод .data() и предназначен: сохранение информации об элементе в объекте jQuery безопасным и доступным способом.

 
Присвоим первым двум абзацам тестового документа имена, сохраним эту информацию с помощью метода .data(), а затем выведем ее на экране консоли.
$("p:first")
   .data("nickname","Pookie")
   .next("p")
      .data("nickname","Shnookums");
console.log("Меня зовут: "+$("p:first").data("nickname"));
console.log("Меня зовут: "+$("p:eq(1)").data("nickname"));

После выполнения этого сценария в консоли будет выведен следующий результат.
______________________________________________________________

______________________________________________________________

Используя формат JSON, в элемент можно добавить целую группу данных.

$("p.foo").data({
   "nickname":"Wubby",
   "favorite":{
      "movie":"Pretty Woman",
      "music":"Sade", "color":"pink"
   }
});
console.log("Имя: "+$("p.foo").data("nickname"));
console.log("Любимый фильм: "+$("p.foo").data("favorite").movie);

 
После вьшолнения этого кода в консоли будет получен следующий результат.

__________________________________________________________

__________________________________________________________

 
Это можно упростить, кешируя данные в переменной, например так.
$("p.foo").data({
   "nickname":"Wubby",
   "favorite":{
      "movie":"Pretty Woman",
      "music":"Sade",
      "color":"pink"
   }
});
var info = $("p.foo").data(); // кешируем объект данных
                              // в переменной
console.log("Меня зовут: "+info.nickname);
console.log("Любимый фильм: "+info.favorite.movie);

 
Результат аналогичен предыдущему, но этот код несколько лучше предыдущего и легче воспринимается.