Bardzo często pierwszą aplikacją JavaScript jest lista rzeczy do zrobienia, ale problem z takimi aplikacjami polega na tym, że po odświeżeniu strony znikają wszystkie pozycje na liście.

Prostym rozwiązaniem tego problemu jest użycie Lokalny magazyn(Lokalny magazyn). Pamięć lokalna umożliwia przechowywanie danych na komputerze użytkownika i po odświeżeniu strony można z niej łatwo załadować listę. W tym artykule napiszemy małą listę rzeczy do zrobienia przy użyciu pamięci lokalnej.

Co to jest pamięć lokalna?

Pamięć lokalna („magazynowanie internetowe”) była pierwotnie częścią specyfikacji HTML5, ale teraz została przeniesiona do osobnej. Możesz przechowywać dane na dwa sposoby:

  • Lokalny magazyn: pamięć trwała, której będziemy używać.
  • przechowywanie sesji: przechowuje dane tylko dla tej sesji, jeśli użytkownik zamknie stronę, dane zostaną utracone.

Pamięć lokalna umożliwia przechowywanie danych na komputerze użytkownika w postaci par klucz-wartość, a dane te będą dostępne nawet po zamknięciu przeglądarki lub wyłączeniu komputera.

HTML

Aby stworzyć listę rzeczy do zrobienia, potrzebujemy:

  • Wejście tekstowe do wprowadzenia zawartości elementu.
  • Przycisk dodawania pozycji do listy.
  • Przycisk do wyczyszczenia listy.
  • Sama lista
      ).
    • I dodatkowy div do pokazywania błędów.

    Tak więc znacznik HTML będzie wyglądał tak:

    Wystarczająco prosta struktura, który ożywimy za pomocą JavaScript.

    Dlatego używamy jQuery, musimy go dodatkowo uwzględnić.

    JavaScript

    Najpierw musimy śledzić kliknięcie przycisku dodawania i sprawdzić, czy pole wejściowe nie jest puste:

    $("#add").click(function() ( var Description = $("#description").val(); if($("#description").val() == "") ( $( "#alert").html(" Ostrzeżenie! Zadanie zostało pozostawione puste"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

    Ten kod sprawdza wartość wprowadzonego tekstu i jeśli jest pusty, pokazuje błąd i zwraca wartość false, dzięki czemu reszta kodu nie zostanie wykonana, a element nie zostanie dodany do listy.

    // wstaw wpis $("#todos").prepend("

  • " + Opis + "
    • "); // usuń wszystko, co pozostało w polu tekstowym $("#form").reset();var todos = $("#todos").html();localStorage.setItem("todos", todos); zwróć fałsz;));

    Aby pracować z magazynem lokalnym, musisz podać klucz i odpowiadającą mu wartość. W naszym przypadku nazwijmy klawisz 'todos', a wartością będzie cały kod HTML, który jest zawarty na liście (w tagu

      ). Ten kod jest łatwy do zdobycia jQuery. I na koniec zwracamy false, aby zapobiec przesłaniu formularza i nie przeładowywaniu strony.

      Następnym krokiem jest sprawdzenie pamięci lokalnej, jeśli istnieje wartość z kluczem 'todos', a następnie załaduj listę z pamięci lokalnej:

      If (localStorage.getItem("todos")) ( $("#todos")).html(localStorage.getItem("todos")); )

      Dlatego przechowujemy gotowy HTML w repozytorium, po prostu wklejamy ten kod na listę.

      Nasza lista rzeczy do zrobienia jest już prawie gotowa, pozostaje tylko zaimplementować funkcję czyszczenia listy. Gdy użytkownik kliknie przycisk, cała lista zostanie usunięta, a pamięć lokalna wyczyszczona:

      $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

      Gotowy! Cały kod wygląda tak:

      $(document).ready(function() ( $("#add").click(function() ( var Description = $("#description").val(); if ($("#description"). val() == "") ( $("#alert").html(" Ostrzeżenie! Zadanie zostało pozostawione puste"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

    • " + Opis + "
      • "); $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; )); if (localStorage .getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); ) $("#clear").click(function() ( window.localStorage.clear( ); location.reload(); return false; )); ));

      Obsługa przeglądarki

      Przechowywanie w sieci jest obsługiwane przez wszystkie główne przeglądarki, nawet IE8. Powinieneś bać się tylko IE7 i niższych.

      Wniosek

      Pamięć lokalna w tak małych aplikacjach może stać się świetny zamiennik Baza danych. Przechowywanie niewielkich ilości informacji nie powinno być trudne.

      Tworzenie aplikacji z listą rzeczy do zrobienia jest zwykle pierwszą aplikacją, którą tworzysz podczas nauki JavaScript, ale problem z tymi wszystkimi aplikacjami polega na tym, że po ponownym załadowaniu strony wszystkie te listy znikają.
      Jest proste rozwiązanie - przy użyciu pamięci lokalnej. Zaletą pamięci lokalnej jest to, że można przechowywać bity danych na komputerze użytkownika, a po ponownym załadowaniu strony wszystkie listy zadań nadal tam są.

      Co to jest pamięć lokalna?

      Pamięć lokalna jest częścią sieci pamięci masowej, która sama w sobie jest częścią specyfikacji HTML5. Istnieją dwie opcje przechowywania danych w BOM:

      • Pamięć lokalna: przechowuje dane bez daty wygaśnięcia. Z tej opcji skorzystamy, ponieważ chcemy, aby nasze aukcje pozostały na stronie tak długo, jak to możliwe.
      • Przechowywanie sesji: zapisuje dane tylko dla jednej sesji, więc jeśli użytkownik zamknie kartę i otworzy ją ponownie, wszystkie jego dane zostaną utracone.

      Mówiąc prościej, wszystko, co robi przechowywanie w sieci, to przechowywanie par klucz/wartość z nazwą lokalnie i w przeciwieństwie do plików cookie, dane te są zachowywane nawet po zamknięciu przeglądarki lub wyłączeniu komputera.

      Jeśli myślimy o liście rzeczy do zrobienia, będziesz potrzebować:

      • Wejście, gdzie będzie można umieścić naszą listę
      • Przycisk Enter, aby dodać listę
      • Przycisk, aby wyczyścić cały dziennik
      • Nieuporządkowany kontener listy, w którym nasza lista zostanie umieszczona w liście elementów
      • I na koniec potrzebujemy kontenera DIV, aby pokazać powiadomienie, gdy próbujesz wprowadzić puste zadanie.

      Więc nasz kod HTML powinien wyglądać mniej więcej tak:

      Jest to całkiem standardowy kontener HTML, a dzięki naszemu JavaScript możemy wypełnić go dynamiczną zawartością.

      Ponieważ w tym przykładzie będziemy używać jQuery, konieczne będzie również uwzględnienie go w dokumencie HTML.

      JavaScript

      Jeśli myślimy o strukturze prostej aplikacji typu „lista rzeczy do zrobienia”, pierwszą rzeczą, którą musimy zrobić, to sprawdzić, czy dane wejściowe mają pustą wartość, gdy użytkownik kliknie przycisk „dodaj” lub „sprawdź”:

      $("#add").click(function() ( var Description = $("#description").val(); //jeśli zadanie jest puste if($("#description").val( ) == "") ( $("#alert").html(" Ostrzeżenie! Zadanie zostało pozostawione puste"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

      Wszystko, co zrobiliśmy, to przetestowanie kliknięcia przycisku Dodaj i uruchomienie prostego testu, aby sprawdzić, czy użytkownik wprowadził coś. Jeśli nie, wyskakuje alert div i pozostaje przez 1000 ms, a następnie znika.

      Następną rzeczą, którą musimy zrobić, to wstawić element listy z wartością do wiersza wejściowego, a poprzedzimy go tak, aby gdy użytkownik doda zadanie, zawsze przejdzie na górę listy, a następnie zapisze wymień element w pamięci lokalnej, na przykład:

      // dodaj element listy $("#todos").prepend("

    • " + Opis + "
      • "); // usuń wszystko, co jest w danych wejściowych $("#form").reset(); var todos = $("#todos").html();localStorage.setItem("todos", todos); return fałszywy; ));

      Jak widać, jest to dość standardowe jQuery, a jeśli chodzi o pamięć lokalną, musimy przechowywać klucz i wartość. Kluczem jest nazwa, którą sami nadajemy, w tym przypadku nazwiemy ją po prostu „Todos”, a następnie musimy zdefiniować, co chcemy przechowywać, czyli w tym przypadku cały kod HTML znajdujący się wewnątrz listy rzeczy do zrobienia na liście nieuporządkowanej. Jak widać, przechwyciliśmy wszystko jQuery, a na koniec zwróciliśmy „false” (false), aby formularz się nie poddawał i nasza strona się nie odświeżała.

      Następnym krokiem jest sprawdzenie, czy mamy coś przechowywanego lokalnie. Jeśli tak, to musimy go umieścić na stronie, biorąc pod uwagę, że nadaliśmy naszemu kluczowi nazwę „todos”, musimy sprawdzić, czy istnieje. Lubię to:

      // jeśli mamy coś w lokalnej pamięci, to if(localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

      Jeśli przetestujesz naszą aplikację i przeładujesz stronę, zobaczysz, że już działa. Wystarczy, że stworzymy funkcję, która będzie odpowiedzialna za wyczyszczenie całej listy. Usuwamy całą pamięć lokalną, ponownie ładujemy stronę, aby nasza zmiana zaczęła obowiązywać, a następnie zwracamy „false”, aby zapobiec haszowaniu przed adresem URL, w następujący sposób:

      // wyczyść całą pamięć lokalną $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

      Cały kod wygląda tak:

      $("#add").click(function() ( var Description = $("#description").val(); if($("#description").val() == "") ( $( "#alert").html(" Ostrzeżenie! Zadanie zostało pozostawione puste"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

    • " + Opis + "
      • "); $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; )); if(localStorage .getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); ) $("#clear").click(function() ( window.localStorage.clear( lokalizacja.reload();zwróć false;));

      Obsługa przeglądarki

      Obsługa Web Storage jest całkiem dobra jak na specyfikację HTML5, jest obsługiwana przez wszystkie główne przeglądarki, a nawet IE8.

      Tłumaczenie: Vlad Merzhevich

      Trwała pamięć lokalna to jeden z obszarów, w którym aplikacje klienckie mają przewagę nad aplikacjami serwerowymi. Do zastosowań takich jak system operacyjny, udostępnia warstwę abstrakcji do przechowywania i pobierania danych, takich jak ustawienia lub stan wykonania. Wartości te mogą być przechowywane w rejestrze, plikach INI, plikach XML lub w innym miejscu, w zależności od zasad platformy. Jeśli aplikacja kliencka wymaga magazynu lokalnego dla więcej niż tylko pary klucz/wartość, możesz wstawić własną bazę danych, wymyślić własny format pliku lub dowolną liczbę innych rozwiązań.

      W przeszłości aplikacje internetowe nie miały żadnego z tych luksusów. Pliki cookie zostały wynalezione na początku historii Internetu i mogą być używane do trwałego przechowywania lokalnie niewielkich ilości danych. Ale mają trzy potencjalne wady:

      • pliki cookie są dołączane do każdego żądania HTTP, co spowalnia twoją aplikację internetową, niepotrzebnie wysyłając te same dane w kółko;
      • pliki cookie są zawarte w każdym żądaniu HTTP, gdy dane są przesyłane przez Internet w postaci niezaszyfrowanej (nawet jeśli cała aplikacja internetowa jest przesyłana przez SSL);
      • pliki cookie są ograniczone do około 4 KB danych - wystarczy, aby spowolnić działanie aplikacji (patrz wyżej), ale nie na tyle, aby były przydatne.

      Oto, czego naprawdę chcemy:

      • dużo miejsca do przechowywania;
      • praca po stronie klienta;
      • rozważ odświeżenie strony;
      • brak wysyłania do serwera.

      Przed HTML5 wszystkie próby osiągnięcia tego celu kończyły się niepowodzeniem na różne sposoby.

      Krótka historia pamięci lokalnej przed HTML5

      Na początku był tylko jeden Internet Explorer. Przynajmniej Microsoft chciał, żeby świat tak myślał. W tym celu, w ramach Pierwszej Wielkiej Wojny Przeglądarek, Microsoft wymyślił wiele rzeczy i umieścił je w swojej przeglądarce, która zakończyła wojnę, Internet Explorerze. Jedna z tych rzeczy została nazwana Zachowaniami DHTML, a jedno z tych zachowań nazywa się userData .

      UserData umożliwia stronie internetowej przechowywanie do 64 KB danych na domenę w hierarchicznej strukturze podobnej do XML. Zaufane domeny, takie jak witryny intranetowe, mogą przechowywać dziesięć razy więcej. I hej, 640 KB powinno wystarczyć dla wszystkich. IE nie zapewnił żadnego sposobu na zmianę tych konwencji, więc nie ma możliwości zwiększenia dostępnej pamięci.

      W 2002 r. firma Adobe wprowadziła w programie Flash 6 funkcję, która okazała się nieskuteczna i błędnie nazwana „Ciasteczkami Flash”. We Flashu ta funkcja jest bardziej poprawnie znana jako Local Shared Objects (obiekty dostępne lokalnie, LSO). Krótko mówiąc, pozwala obiektom Flash przechowywać do 100 KB danych na domenę. Brad Neuberg opracował wczesny prototyp pomostu między Flashem a JavaScriptem, nazwany AMASS (AJAX Massive Storage System), ale był ograniczony przez pewne dziwactwa związane z projektowaniem Flasha. Do 2006 roku, wraz z pojawieniem się interfejsu ExternalInterface we Flashu 8, dostęp do LSO przez JavaScript stał się o rząd wielkości łatwiejszy i szybszy. Brad przepisał AMASS i zintegrował go z popularnym Dojo Toolkit pod aliasem dojox.storage . Flash „bezpłatny” zapewnia każdej domenie 100 kb przestrzeni dyskowej. Ponadto, na żądanie, monituje użytkownika o zwiększenie ilości pamięci o rząd wielkości (1 MB, 10 MB itd.).

      if (Modernizr.localstorage) (
      // window.localStorage jest dostępny!
      ) w przeciwnym razie (
      // brak wbudowanej obsługi przechowywania HTML5
      }

      Korzystanie z pamięci HTML5

      Pamięć HTML5 jest oparta na nazwach par klucz/wartość. Przechowujesz informacje na podstawie nazwy klucza, a następnie możesz pobrać te dane za pomocą tego samego klucza. Nazwa klucza to ciąg. Dane mogą być dowolnego typu obsługiwanego przez JavaScript, w tym łańcuchów, wartości logicznych, liczb całkowitych lub liczb zmiennoprzecinkowych. Jednak dane są w rzeczywistości przechowywane jako ciąg. Jeśli nie przechowujesz i nie pobierasz ciągów, będziesz musiał użyć funkcji takich jak parseInt() lub parseFloat(), aby przetłumaczyć otrzymane dane na poprawne typy JavaScript.

      Interfejs pamięci (
      Pobierz przez getItem(klucz);
      Ustaw przez setItem(klucz, dane);
      };

      Wywołanie setItem() z istniejącą nazwą klucza spowoduje po cichu nadpisanie poprzedniej wartości. Wywołanie getItem() z nieistniejącym kluczem zwróci NULL zamiast zgłosić wyjątek.

      jak inni Obiekty JavaScript można uzyskać dostęp do obiektu localStorage jako tablicy asocjacyjnej. Zamiast używać metod getItem() i setItem(), możesz po prostu użyć nawiasów kwadratowych. Na przykład ten fragment kodu

      var foo = localStorage.getItem("bar");
      // ...
      localStorage.setItem("bar", foo);

      można przepisać za pomocą składni nawiasów kwadratowych:

      var foo = localStorage["bar"];
      // ...
      localStorage["bar"] = foo;

      Istnieją również metody usuwania wartości po nazwie klucza, a także wyczyszczenia całego sklepu (czyli usunięcie wszystkich kluczy i wartości na raz).

      Interfejs pamięci (
      Usuń poprzez removeItem(klucz);
      jasne();
      }

      Wywołanie removeItem() z kluczem, który nie istnieje, nic nie zwróci.

      Wreszcie istnieje właściwość, która pozwala uzyskać całkowitą liczbę wartości w obszarze pamięci i iterować po wszystkich kluczach według indeksu (pobiera nazwę każdego klucza).

      Interfejs pamięci (
      długość
      Pobierz klucz (nieujemna liczba całkowita);
      }

      Jeśli po wywołaniu key() indeks nie mieści się w zakresie od 0 do (długość-1), funkcja zwróci null .

      Śledzenie obszaru przechowywania HTML5

      Jeśli chcesz programowo śledzić zmiany magazynu, musisz przechwycić zdarzenie magazynu. To zdarzenie jest wywoływane w obiekcie window, gdy setItem() , removeItem() lub clear() są wywoływane i coś zmieniają. Na przykład, jeśli ustawisz istniejącą wartość lub wywołasz clear(), gdy nie ma kluczy, zdarzenie nie zostanie wywołane, ponieważ obszar przechowywania w rzeczywistości się nie zmienił.

      Zdarzenie storage jest obsługiwane wszędzie tam, gdzie działa obiekt localStorage, w tym Internet Explorer 8. IE 8 nie obsługuje standardu W3C addEventListener (chociaż zostanie on ostatecznie dodany w IE 9), więc aby przechwycić zdarzenie storage, musisz sprawdzić, które mechanizm zdarzeń obsługuje przeglądarkę (jeśli zrobiłeś to wcześniej z innymi zdarzeniami, możesz pominąć tę sekcję do końca). Zalewkowanie zdarzenia magazynu działa tak samo, jak zalewkowanie innych zdarzeń. Jeśli wolisz używać jQuery lub jakiegoś innego Biblioteka JavaScript aby zarejestrować programy obsługi zdarzeń, możesz to zrobić również za pomocą magazynu.

      if (window.addEventListener) (
      window.addEventListener("magazyn", handle_storage, false);
      ) w przeciwnym razie (
      window.attachEvent("onstorage", handle_storage);
      };

      Wywołanie zwrotne handle_storage zostanie wywołane z obiektem StorageEvent, z wyjątkiem Internet Explorera, gdzie zdarzenia są przechowywane w window.event .

      funkcja handle_storage(e) (
      if (!e) ( e = okno.zdarzenie; )
      }

      W takim przypadku zmienna e będzie obiektem StorageEvent, który ma następujące przydatne właściwości.

      *Uwaga: Właściwość url była pierwotnie nazywana uri i niektóre przeglądarki obsługiwały tę właściwość przed zmianą specyfikacji. Aby uzyskać maksymalną zgodność, należy sprawdzić, czy właściwość url istnieje, a jeśli nie, należy zamiast tego sprawdzić właściwość uri.

      Zdarzenia przechowywania nie można anulować, nie ma możliwości zatrzymania zmiany wewnątrz wywołania zwrotnego handle_storage. To tylko sposób, w jaki przeglądarka powie Ci: „Hej, to się właśnie stało. Nic nie możesz zrobić, chciałem tylko, żebyś wiedziała.

      Ograniczenia w obecnych przeglądarkach

      Mówiąc o historii pamięci lokalnej z wtyczkami firm trzecich, wspomniałem o ograniczeniach każdej techniki. Przypomniałem sobie, że nie powiedziałem nic o ograniczeniach standardowego obecnie przechowywania HTML5. Udzielę odpowiedzi, a następnie je wyjaśnię. Odpowiedzi, w kolejności ważności, to: „5 megabajtów”, „QUOTA_EXCEEDED_ERR” i „brak”.

      "5 megabajtów" - ile miejsca jest domyślnie przydzielone. Ta wartość jest zaskakująco taka sama we wszystkich przeglądarkach, mimo że jest sformułowana jako jedynie sugestia w specyfikacji HTML5. Musisz zrozumieć, że przechowujesz ciągi, a nie dane w ich oryginalnym formacie. Jeśli przechowujesz wiele liczb całkowitych lub zmiennoprzecinkowych, różnica w reprezentacji może być duża. Każda cyfra w liczbie zmiennoprzecinkowej jest przechowywana jako znak, a nie w zwykłej reprezentacji takich liczb.

      „QUOTA_EXCEEDED_ERR” to wyjątek, który otrzymasz, jeśli przekroczysz limit 5 MB. „Nie” to odpowiedź na kolejne oczywiste pytanie: „Czy mogę poprosić użytkownika o więcej miejsca?”. W chwili pisania tego tekstu przeglądarki nie implementują żadnego mechanizmu, aby twórcy stron internetowych żądali więcej miejsca do przechowywania. Niektóre przeglądarki (takie jak Opera) pozwalają użytkownikowi kontrolować przydziały pamięci dla poszczególnych witryn, ale jest to wyłącznie inicjatywa użytkownika i nie ma nic wspólnego z tym, co jako programista możesz wbudować w swoją aplikację internetową.

      Pamięć HTML5 w akcji

      Przyjrzyjmy się pamięci masowej HTML5 w akcji. Wróćmy do tego, który zbudowaliśmy w rozdziale rysunku. Z tą grą jest mały problem: jeśli zamkniesz okno przeglądarki w środku gry, stracisz wyniki. Ale dzięki pamięci HTML5 możemy zapisać grę na miejscu, w samej przeglądarce. Otwórz demo, wykonaj kilka ruchów, zamknij kartę przeglądarki, a następnie otwórz ją ponownie. Jeśli Twoja przeglądarka obsługuje przechowywanie HTML5, strona demonstracyjna w magiczny sposób zapamięta Twoją dokładną pozycję w grze, w tym liczbę wykonanych ruchów, położenie każdego pionka na planszy, a nawet wybranego pionka.

      Jak to działa? Za każdym razem, gdy nastąpi zmiana w grze, wywołamy tę funkcję.

      funkcja saveGameState() (

      localStorage["halma.game.in.progress"] = gGameInProgress;
      dla (zmienna i = 0; i< kNumPieces; i++) {
      localStorage["halma.piece." + i + ".wiersz"] = gSztuki[i].rząd;
      localStorage["halma.piece." + i + ".kolumna"] = gSztuki[i].kolumna;
      }
      localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
      localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
      localStorage["halma.movecount"] = gMoveCount;
      zwróć prawdę;
      }

      Jak widać obiekt localStorage służy do zapisywania postępów w grze (gGameInProgress , boolean). Następnie wszystkie żetony są sortowane (gPieces , Tablica JavaScript) i zapisz wiersz i kolumnę dla każdego. Następnie zapisywane są dodatkowe stany gry, w tym aktualnie wybrany element (gSelectedPieceIndex , liczba całkowita), element będący w środku długiej serii skoków (gSelectedPieceHasMoved , boolean) oraz Łączna wykonane ruchy (gMoveCount , integer).

      Kiedy strona się ładuje, zamiast automatycznie wywoływać funkcję newGame(), która zwracałaby wszystkie zmienne do ich pierwotnych wartości, wywołujemy resumeGame() . Funkcja resumeGame() używa sklepu HTML5 do sprawdzenia stanu gry w sklepie lokalnym. Jeśli jest obecny, przywraca wartości za pomocą obiektu localStorage.

      funkcja resumeGame() (
      if (!supportsLocalStorage()) ( zwróć false; )
      gGameInProgress = (localStorage["halma.game.in.progress"] == "prawda");
      if (!gGameInProgress) ( zwróć false; )
      gPieces = new Array(kNumPieces);
      dla (zmienna i = 0; i< kNumPieces; i++) {
      var row = parseInt(localStorage["halma.piece." + i + ".row"]);
      var kolumna = parseInt(localStorage["halma.piece." + i + ".column"]);
      gPieces[i] = new Cell(wiersz, kolumna);
      }
      gLiczbaSztuk = kLiczbaSztuk;
      gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]);
      gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "prawda";
      gMoveCount = parseInt(localStorage["halma.movecount"]);
      Tablica Rysunkowa();
      zwróć prawdę;
      }

      Najważniejszą częścią tej funkcji jest zastrzeżenie, o którym wspomniałem wcześniej w tym rozdziale i powtórzę tutaj: dane są przechowywane jako ciągi. Jeśli przechowujesz coś innego niż ciągi, musisz je przekonwertować, gdy je otrzymasz. Na przykład flaga gry w toku (gGameInProgress ) jest wartością logiczną. W funkcji saveGameState() po prostu przechowujemy i nie przejmujemy się typem danych.

      localStorage["halma.game.in.progress"] = gGameInProgress;

      Ale w funkcji resumeGame() musimy traktować wartość pobraną z lokalnej pamięci jako ciąg i ręcznie skonstruować własną wartość logiczną.

      gGameInProgress = (localStorage["halma.game.in.progress"] == "prawda");

      Podobnie liczba ruchów jest przechowywana w gMoveCount jako liczba całkowita, w funkcji saveGameState() po prostu ją zapisujemy.

      localStorage["halma.movecount"] = gMoveCount;

      Ale w funkcji resumeGame() musimy przekonwertować wartość na liczbę całkowitą za pomocą wbudowanego Funkcja JavaScript parseInt() .

      gMoveCount = parseInt(localStorage["halma.movecount"]);

      Poza parą klucz/wartość: konkurencyjna wizja

      Chociaż w historii było wiele sztuczek i obejść, obecny stan przechowywania HTML5 jest zaskakująco bezpieczny. Nowy interfejs API został ustandaryzowany i zawarty we wszystkich głównych przeglądarkach, platformach i urządzeniach. Dla programisty stron internetowych nie widzisz tego na co dzień, prawda? Ale to więcej niż „5 megabajtów par klucz/wartość”, a przyszłość trwałej pamięci lokalnej to… jak to powiedzieć… wizja konkurencji.

      Jedną z wizji jest znany już akronim - SQL. W 2007 roku firma Google uruchomiła Gears, wtyczkę typu open source dla różnych przeglądarek. kod źródłowy, który zawiera wbudowaną bazę danych opartą na SQLite. Ten wczesny prototyp wpłynął później na stworzenie specyfikacji Web SQL Database. Web SQL Database (wcześniej znana jako „WebDB”) zapewnia cienkie opakowanie wokół bazy danych SQL, które umożliwia wykonywanie następujących czynności z poziomu JavaScript:

      openDatabase("dokumenty", "1.0", "Lokalne przechowywanie dokumentów", 5*1024*1024, funkcja (db) (
      db.changeVersion("", "1.0", funkcja (t) (
      t.executeSql("CREATE TABLE docids (id, name)");
      ), błąd);
      });

      Jak widać, większość akcji odbywa się w linii z metodą ExecuteSQL. Ten ciąg może obsługiwać dowolne polecenie SQL, w tym SELECT, UPDATE, INSERT i DELETE. Przypomina to programowanie baz danych po stronie serwera, z wyjątkiem tego, że robisz to za pomocą JavaScript! O radości!

      Specyfikacja bazy danych Web SQL została zaimplementowana w czterech przeglądarkach i platformach.

      Obsługa internetowych baz danych SQL
      TJ Firefox safari Chrom Opera iPhone Android
      – – 4.0+ 4.0+ 10.5+ 3.0+ 2.0+

      Oczywiście, jeśli w swoim życiu korzystałeś z więcej niż jednej bazy danych, to wiesz, że „SQL” jest bardziej terminem marketingowym niż trudnym i szybkim. szybki standard(ktoś mógłby powiedzieć to samo o HTML5, ale to nie ma znaczenia). Oczywiście istnieje rzeczywista specyfikacja SQL (nazywa się SQL-92), ale nie ma na świecie serwera baz danych, który byłby zgodny tylko z tą specyfikacją. Jest Oracle SQL, Microsoft SQL, SQL na MySQL, SQL na PostgreSQL, SQL na SQLite. W rzeczywistości każdy z tych produktów z czasem dodaje nowe funkcje. Funkcje SQL, więc nie wystarczy nawet powiedzieć „SQL w SQLite”. Powinieneś powiedzieć „wersja SQL dostarczana z SQLite w wersji X.Y.Z”.

      To wszystko prowadzi nas do następnego zastrzeżenia, które obecnie znajduje się na szczycie specyfikacji Web SQL.

      Specyfikacja znalazła się w ślepym zaułku: wszyscy zainteresowani programiści używają SQL po stronie serwera (SQLite), ale potrzebujemy kilku niezależnych implementacji, aby podążać ścieżką standaryzacji. Podczas gdy inni programiści są zainteresowani implementacją tej specyfikacji, opis dialektu SQL pozostawiono jedynie jako odniesienie do Sqlite, co nie jest akceptowane przez standard.

      W tym kontekście opowiem o innej konkurencyjnej wizji zaawansowanej, trwałej lokalnej pamięci masowej dla aplikacji internetowych: API Indexed Database, dawniej znanego jako „WebSimpleDB”, teraz pieszczotliwie nazywanego IndexedDB.

      Interfejs Indexed Database API zapewnia tak zwaną składnicę obiektów, z wieloma pomysłami zapożyczonymi z baz danych SQL. Istnieją „bazy danych” z „rekordami”, każdy rekord ma określoną liczbę „pól”. Każde pole ma określony typ danych, który jest definiowany podczas tworzenia bazy danych. Możesz wybrać część wpisów, a następnie wyświetlić je za pomocą „kursora”. Zmiany w składnicy obiektów są przetwarzane za pomocą „transakcji”.

      Jeśli kiedykolwiek programowałeś bazy danych SQL, terminy te są Ci prawdopodobnie znajome. Główna różnica polega na tym, że obiektowa pamięć masowa nie ma strukturalnego języka zapytań. Nie wpisujesz warunku takiego jak „WYBIERZ * z UŻYTKOWNICY, gdzie AKTYWNY = „Y””. Zamiast tego używamy metod udostępnionych przez składnicę obiektów, aby otworzyć bazę danych USERS, wyliczyć rekordy, przefiltrować nasze rekordy i użyć metod akcesorów, aby uzyskać wartość każdego pola pozostałych rekordów. Wczesny przewodnik po IndexedDB jest dobrym przewodnikiem po tym, jak działa IndexedDB i jak porównuje IndexedDB z Web SQL.

      W chwili pisania tego tekstu indeks IndexedDB został zaimplementowany tylko w wersji beta Firefoksa 4. W przeciwieństwie do tego Mozilla stwierdziła, że ​​nigdy nie zaimplementuje Web SQL. Google oświadczył, że rozważa wsparcie IndexedDB dla Chromium i Google Chrome. A nawet Microsoft powiedział, że IndexedDB to „świetne rozwiązanie dla sieci”.

      Co możesz zrobić jako programista z IndexedDB? Na ten moment praktycznie nic poza demonstracjami technologicznymi. Za rok? Może.

      The API przechowywania danych w sieci Web udostępnia mechanizmy, dzięki którym przeglądarki mogą przechowywać pary klucz/wartość w znacznie bardziej intuicyjny sposób niż przy użyciu plików cookie .

      Koncepcje i wykorzystanie pamięci masowej w sieci Web

      Dwa mechanizmy w Web Storage są następujące:

      • sessionStorage utrzymuje oddzielny obszar przechowywania dla każdego źródła, który jest dostępny na czas trwania sesji strony (o ile przeglądarka jest otwarta, w tym ponowne ładowanie i przywracanie strony)
        • Przechowuje dane tylko dla sesji, co oznacza, że ​​dane są przechowywane do momentu zamknięcia przeglądarki (lub karty).
        • Dane nigdy nie są przesyłane na serwer.
        • Limit przechowywania jest większy niż plik cookie (maksymalnie 5 MB).
      • localStorage robi to samo, ale utrzymuje się nawet po zamknięciu i ponownym otwarciu przeglądarki.
        • Przechowuje dane bez daty wygaśnięcia i są usuwane tylko przez JavaScript lub wyczyszczenie pamięci podręcznej przeglądarki / danych przechowywanych lokalnie.
        • Limit pamięci to maksymalna wartość spośród tych trzech.

      Specyfikacje

      Specyfikacja Status Komentarz
      Standard życia HTML Standard życia

      Kompatybilność z przeglądarką

      Window.localStorage

      https://github.com/mdn/browser-compat-data i wyślij nam pull request.

      Pulpitmobilny
      ChromBrzegFirefoxInternet ExplorerOperasafariwidok na AndroidaChrome na AndroidaFirefox dla AndroidaOpera na AndroidaSafari na iOSSamsung Internet
      Lokalny magazynPełna obsługa Chrome 4Krawędź Pełne wsparcie 12Firefox Pełna obsługa 3.5IE Pełne wsparcie 8Opera Pełne wsparcie 10,5Safari Pełne wsparcie 4

      Legenda

      Pełne wsparcie Pełne wsparcie

      Window.sessionStorage

      Tabela zgodności na tej stronie jest generowana na podstawie uporządkowanych danych. Jeśli chcesz wnieść swój wkład w dane, wejdź na https://github.com/mdn/browser-compat-data i wyślij nam pull request.

      Zaktualizuj dane zgodności na GitHub

      Pulpitmobilny
      ChromBrzegFirefoxInternet ExplorerOperasafariwidok na AndroidaChrome na AndroidaFirefox dla AndroidaOpera na AndroidaSafari na iOSSamsung Internet
      sesjaStoragePełna obsługa Chrome 5Krawędź Pełne wsparcie 12Firefox Pełna obsługa 2IE Pełne wsparcie 8Opera Pełne wsparcie 10,5Safari Pełne wsparcie 4Pełna obsługa WebView Android TakPełna obsługa Chrome na Androida TakPełna obsługa Firefoksa AndroidTakPełna obsługa Opery Android 11Safari iOS Pełna obsługa 3.2Samsung Internet Android Pełna obsługa Tak

      Legenda

      Pełne wsparcie Pełne wsparcie

      Tryby przeglądania prywatnego / incognito

      Większość nowoczesnych przeglądarek obsługuje opcję prywatności o nazwie „Incognito”, „Prywatne przeglądanie" lub coś podobnego, która nie przechowuje danych, takich jak historia i pliki cookie. Z oczywistych powodów jest to zasadniczo niezgodne z usługą Web Storage. W związku z tym producenci przeglądarek eksperymentują z różnymi scenariusze postępowania z tą niezgodnością.

      Większość przeglądarek wybrała strategię, w której interfejsy API pamięci masowej są nadal dostępne i pozornie w pełni funkcjonalne, z tą jedną dużą różnicą, że wszystkie przechowywane dane są usuwane po zamknięciu przeglądarki. W przypadku tych przeglądarek wciąż istnieją różne interpretacje tego, co należy zrobić z istniejącymi przechowywanymi danymi (ze zwykłej sesji przeglądania). Czy powinien być dostępny do odczytu w trybie prywatnym? Są też przeglądarki, w szczególności Safari, które wybrały rozwiązanie, w którym pamięć jest dostępna, ale jest pusta i ma przydzielony limit 0 bajtów, co skutecznie uniemożliwia zapisywanie w nim danych.

      Deweloperzy powinni być świadomi tych różnych implementacji i brać je pod uwagę podczas tworzenia witryn internetowych w zależności od interfejsów API Web Storage. Aby uzyskać więcej informacji, zajrzyj do tego wpisu na blogu WHATWG, który dotyczy konkretnie tego tematu.

      Wysłałem artykuł z artykułem o HTML5 LocalStorage w przeglądarkach. Dajmy mu głos.

      Starałem się napisać najprostszy i najbardziej zrozumiały przewodnik po technologii localStorage. Artykuł okazał się dość mały, ze względu na fakt, że zarówno sama technologia, jak i sposób pracy z nią nie niosą ze sobą niczego skomplikowanego. Aby rozpocząć, musisz tylko trochę znać JavaScript. Daj więc temu artykułowi 10 minut i możesz spokojnie dodać wiersz „Wiem, jak pracować z localStorage” do swojego CV.

      Co to jest localStorage?

      Tak wygląda obiekt JavaScript:

      Var myCar = ( koła: 4, drzwi: 4, silnik: 1, nazwa: "Jaguar" )

      I tak wygląda JSON. Prawie tak samo jak zwykły obiekt js, tylko wszystkie właściwości muszą być ujęte w cudzysłów.

      ( "firstName": "Ivan", "lastName": "Ivanov", "address": ( "streetAddress": "Moskovskoye sh., 101, kv.101", "city": "Leningrad", "postalCode": 101101 ), "numery telefonów": [ "812 123-1234", "916 123-4567" ] )

      Aby zrozumieć, czym jest localStorage, wyobraź sobie, że gdzieś w Twojej przeglądarce znajduje się taki obiekt, którego możemy użyć. Jednocześnie obiekt ten nie czyści wartości, które tam zapisujemy, jeśli przeładujemy stronę lub nawet całkowicie zamkniemy przeglądarkę.

      Jeśli mówić JavaScript, wtedy localStorage jest właściwością globalnego obiektu przeglądarki (okna). Można go uzyskać jako window.localStorage lub po prostu localStorage.

      Warto również wspomnieć, że przeglądarka posiada klon localStorage, który nazywa się sessionStorage. Jedyną różnicą jest to, że ta ostatnia przechowuje dane tylko dla jednej karty (sesji) i po prostu wyczyści jej miejsce, gdy tylko zamkniemy kartę

      Zobaczmy go na żywo. Na przykład w Google Chrome musisz otworzyć DevTools (F12), przejść do zakładki "Zasoby" i w lewym panelu zobaczysz localStorage dla tej domeny i wszystkie wartości, które zawiera.

      Przy okazji powinieneś wiedzieć, jak localStorage działa z domenami. Dla każdej domeny Twoja przeglądarka tworzy własny obiekt localStorage i można go edytować lub wyświetlać tylko w tej domenie. Na przykład mojadomena-1.com nie może uzyskać dostępu do localStorage Twojej domeny mojadomena-2.com .

      Dlaczego potrzebuję localStorage?

      LocalStorage jest potrzebne tylko do jednego - do przechowywania pewnych danych pomiędzy sesjami użytkowników. Możesz wymyślić tysiąc i jedną rzeczy, które mogą być przechowywane w lokalnej pamięci przeglądarki. Na przykład gry przeglądarkowe, które używają go jako zapisu, lub rejestrują moment, w którym użytkownik zatrzymał się podczas oglądania wideo, różne dane do formularzy itp.

      Jak zacząć korzystać z localStorage?

      Bardzo prosta.

      Praca z localStorage jest bardzo podobna do pracy z obiektami w JavaScript. Istnieje kilka metod pracy z nim.

      localStorage.setItem("klucz", "wartość")

      Metoda, która dodaje do localStorage nowy klucz z wartością (a jeśli taki klucz już istnieje, to nadpisuje go nową wartością). Piszemy na przykład localStorage.setItem('myKey', 'myValue');

      localStorage.getItem("klucz")

      Pobieramy określoną wartość z magazynu według klucza.

      localStorage.removeItem("Klucz")

      Usuń klucz

      localStorage.clear()

      Czyszczenie całej pamięci

      Teraz możesz otworzyć kartę z localStorage przeglądarki i samodzielnie przećwiczyć zapisywanie i pobieranie danych z tego magazynu. Jeśli już, to cały kod piszemy w pliku js.

      //Dodaj lub zmień wartość: localStorage.setItem("myKey", "myValue"); //teraz masz klucz "myKey" o wartości "myValue" przechowywany w localStorage //Wydrukuj go w konsoli: var localValue = localStorage.getItem("myKey"); console.log(WartośćLokalna); //"myValue" //usuń: localStorage.removeItem("myKey"); //wyczyść całą pamięć localStorage.clear() To samo, ale z nawiasami kwadratowymi: localStorage["Klucz"] = "Wartość" //ustaw wartość localStorage["Klucz"] //Pobierz wartość usuń localStorage["Klucz" ] // Usuwanie wartości

      Chcę również zauważyć, że localStorage działa świetnie z zagnieżdżonymi strukturami, takimi jak obiekty.

      //utwórz obiekt var obj = ( item1: 1, item2: , item3:"hello" ); var serialObj = JSON.stringify(obj); //serializuj to localStorage.setItem("myKey", serialObj); //zapisz go do magazynu za pomocą klucza "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) //przetwórz go z powrotem do obiektu

      Należy również pamiętać, że przeglądarki przydzielają 5 MB na localStorage. A jeśli go przekroczysz, otrzymasz wyjątek QUOTA_EXCEEDED_ERR. Przy okazji z jego pomocą możesz sprawdzić, czy w Twoim magazynie jest jeszcze miejsce.

      Spróbuj ( localStorage.setItem("klucz", "wartość"); ) catch (e) ( if (e == QUOTA_EXCEEDED_ERR) ( alert("Przekroczono limit"); ) )

      Zamiast konkluzji

      Chciałbym, aby z tego krótkiego artykułu programiści wyciągnęli dla siebie prosty wniosek, że ta technologia już z mocą i mainem można wykorzystać w swoich projektach. Ma dobrą standaryzację i doskonałe wsparcie, które rozwija się z czasem.