Jeśli kiedykolwiek tworzyłeś stronę z wykorzystaniem JavaScriptu/jQuery, to na pewno przynajmniej raz stanąłeś przed problemem, w jaki sposób przechowywać dane, z których korzystają Twoje skrypty. Rozwiązań istnieje wiele, jedne mniej lub bardziej elastyczne, ale praktycznie każde z nich posiada jakieś wady. Dziś chciałbym Wam zaprezentować metodę data wykorzystywaną w jQuery, która mi osobiście bardzo przypadła do gustu i w ostatnim czasie to mój numer jeden w tym temacie.

W jaki sposób teraz przechowujesz dane i dlaczego jest to zły sposób?

Dane z JavaScriptu, można przechowywać na naprawdę wiele sposobów, lecz chodzi mi tutaj o przechowywanie ich w taki sposób, by można do nich sięgnąć później i to nawet z poziomu innej funkcji, czyli niejako dane powinny być dostępne globalnie.

Zmienne globalne

Jeden z najprostszych rozwiązań, który przychodzi do głowy najszybciej, to wykorzystanie globalnych zmiennych. Zmienne takie deklarujemy np. na górze naszego pliku js, a dostęp do nich uzyskujemy w dowolnym miejscu. Nasz kod, przynajmniej z pozoru działa. Takie rozwiązanie, ma jednak dwie zasadnicze wady. Po pierwsze, tworząc niezliczoną liczbę zmiennych istnieje ryzyko, że jakieś zmienne, niezależnie czy to w naszym własnym kodzie, czy też w kodzie osób trzecich, z których bibliotek korzystamy się pokryją - katastrofa gotowa. Ponadto, stos zmiennych zostaje w pamięci i robi ogólny bałagan w kodzie.

Atrybuty dodatkowe w XHTML

Kolejne rozwiązanie, to wykorzystanie własnych atrybutów w XHTML. Takie atrybuty możemy stworzyć sami i przypisywać im wartości. Lecz tu pojawia się problem. Jeśli zależy nam na walidacji, to musimy stworzyć schemę, opisującą utworzone przez nas atrybuty. Ponadto jeśli korzystamy z namespace'ów, to może wystąpić problem z odczytem w niektórych przeglądarkach.

Na domiar złego, złośliwy internauta może podmienić wartość atrybutu np. za pomocą Firebuga i wprowadzić jakiś destrukcyjny kod.

Atrybuty data- w HTML5

Jakiś czas temu, pisałem na temat atrybutów data- w HTML5. Atrybuty te, można wykorzystać podobnie jak własne atrybuty w XHTML, tylko że w tym przypadku, nie trzeba martwić się o pisanie schemy. Atrybuty tej postaci są od razu walidowalne. Głównym problemem, może być za to wsparcie starszych przeglądarek, a także podatność XSS podobnie jak w przypadku XHTML. Jeśli chcemy korzystać z tych atrybutów, powinniśmy się odpowiednio zabezpieczyć przed destrukcyjnym kodem.

Czysta abstrakcja - ciasteczka

Ostatni przykład, będący trochę czystą abstrakcją, to wykorzystanie ciasteczek do przechowania danych. Strategia ta jest raczej realizowana, gdy chcemy przechować dane pomiędzy kolejnymi sesjami, ale na upartego można i tak;)

Oczywiście przedstawione powyżej sposoby, to na pewno nie wszystkie rozwiązania, przedstawiłem tylko kilka, moim zdaniem popularnych podejść do problemu.

Metoda data w jQuery

Czas przejść do meritum czyli do metody data() w jQuery. Co daje nam ta metoda? Najzwyczajniej w świecie, pozwala na zapisywanie danych do wybranego przez nas obiektu DOM. Dane przechowywane są w pamięci przeglądarki i tym samym stają się one transparentne dla użytkownika. Spójrzmy na sygnaturę metody data:

data(key, value);
data(obj);

Kluczem z reguły jest zwyczajny string, a wartością (i obiektem - patrz drugie przeładowanie metody) może być dowolna zmienna, a także tablica par klucz:wartość używanych w JSON. Metodę wywołujemy na dowolnym obiekcie DOM, czyli prawdziwy jest kod:

$("body").data("sName", "Jurek");
$("body").data("nAge", 24);
$("body").data("sPerson", {sName: "Jurek", nAge: 24});

W ten sposób przypisaliśmy trochę danych do znacznika body. Jak te dane wyciągnąć? Bardzo prosto:

alert($("body").data("sName"));
alert($("body").data("nAge"));
alert($("body").data("sPerson").sName + " " + $("body").data("sPerson").nAge);

Wyszukiwanie elementu o określonej wartości

Warto wiedzieć, że możemy przeprowadzić wyszukiwanie węzła, którego wartość dla klucza, jest równa podaną przez nas wartość. Jeśli przykładowo, dla pierwszego elementu na liście dodamy klucz sName z wartością Jurek:

$("ul > li:eq(0)").data("sName", "Jurek");

To będziemy mogli go odnaleźć, za pomocą następującego kodu:

var $aoElements = $("ul > li").filter(function() { 
    return $(this).data("sName") == "Jurek" 
});

Do funkcji przekazane zostały odpowiednie szukane wartości. Możemy jeszcze sprawdzić długość tablicy aoElements, by wiedzieć ile elementów zostało odnalezionych.

Data ostatniej modyfikacji: 28.11.2011, 18:35.