Jak korzystać z pamięci lokalnej dla JavaScript

Tworzenie aplikacji do zrobienia jest zwykle pierwszą aplikacją, w której uczysz się budować w JavaScript, ale problem z tymi aplikacjami polega na tym, że po przeładowaniu strony nie ma już tych rzeczy do zrobienia.

Istnieje jednak proste rozwiązanie, które polega na użyciu pamięci lokalnej. Dobrą rzeczą w lokalnej pamięci jest to, że możesz zapisać te fragmenty danych na komputerze użytkownika, aby po ponownym załadowaniu strony wszystkie tagi nadal istniały, a lokalne przechowywanie jest naprawdę proste, jeśli chodzi o zapisywanie danych i tworzenie jest dostępny na stronie.

Co to jest pamięć lokalna?

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

• Lokalna pamięć masowa: przechowuje dane bez daty wygaśnięcia i to jest ta, której będziemy używać, ponieważ chcemy, aby nasze czynności 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 ponownie ją otworzy, wszystkie jej dane znikną.

Mówiąc najprościej, cała ta pamięć masowa sieciowa przechowuje lokalnie pary o nazwie klucz / wartość. W przeciwieństwie do plików cookie dane te są przechowywane nawet po zamknięciu przeglądarki lub wyłączeniu komputera.

HTML

Jeśli myślimy o liście zadań, będziemy potrzebować:

• Wejście do umieszczenia naszego zadania.
• Przycisk wprowadzania, aby dodać nasze zadanie.
• Przycisk do wyczyszczenia wszystkich zadań.
• Lista nieuporządkowanych symboli zastępczych, w której nasze rzeczy do zrobienia zostaną umieszczone na liście.
• I na koniec potrzebujemy elementu zastępczego div, aby wyświetlić alert, gdy próbujesz wprowadzić puste zadanie.

Nasz kod HTML powinien wyglądać mniej więcej tak:

  
      Clear All  
  
  

Jest to dość standardowy symbol zastępczy HTML, a dzięki naszemu javascriptowi możemy uzupełnić to treścią dynamiczną.

Ponieważ będziemy używać jQuery w tym przykładzie, powinieneś również uwzględnić go w dokumencie HTML.

JavaScript

Jeśli pomyślimy o strukturze prostej aplikacji do zrobienia, pierwszą rzeczą, którą musimy zrobić, to sprawdzenie, kiedy użytkownik kliknie przycisk Dodaj i sprawdzenie, czy dane wejściowe mają pustą wartość, jak na przykład:

$('#add').click( function() {var Description = $('#description').val();//if the to-do is emptyif($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;}

Wszystko, co zrobiliśmy, to sprawdzenie kliknięcia przycisku dodawania i uruchomienie prostego testu, aby sprawdzić, czy użytkownik wypełnił dane wprowadzeniem. Jeśli nie, blok alertu znika i pozostaje przez 1000 ms, a następnie zanika. Na koniec zwracamy wartość false, aby przeglądarka nie przeczytała reszty skryptu i nadal dodawała element listy.

Następną rzeczą, którą musimy zrobić, to wstawienie elementu listy z wartością w danych wejściowych, a my dodamy do tego, aby po dodaniu zadania użytkownik zawsze przejdzie na początek listy, a następnie zapisze ten element listy na pamięć lokalna, jak na przykład:

   // add the list item$('#todos').prepend("
" + Description + "
");// delete whatever is in the input$('#form')[0].reset();var todos = $('#todos').html();localStorage.setItem('todos', todos);return false;});

Jak widać, jest to dość standardowa jQuery, a jeśli chodzi o lokalną pamięć masową, musimy zapisać klucz i wartość. Klucz jest nazwą, którą sami określiliśmy iw tym przypadku nazwałem ją "todos", a następnie musimy określić, co faktycznie chcemy zapisać, i w tym przypadku jest to cały kod HTML umieszczony na liście nieuporządkowanych todos . Jak widać, po prostu złapaliśmy to za pomocą jQuery i w końcu zwróciliśmy wartość false, aby formularz nie został przesłany, a nasza strona nie przeładowała się ponownie.

Naszym następnym krokiem jest sprawdzenie, czy mamy coś na lokalnej pamięci już zapisanej w naszym komputerze, a jeśli to zrobimy, musimy umieścić to na stronie, więc skoro nadaliśmy naszemu kluczowi nazwę todos, musimy sprawdzić jej istnienie, jak na przykład:

// if we have something on local storage place thatif(localStorage.getItem('todos')) {$('#todos').html(localStorage.getItem('todos'));}

Użyliśmy prostego instrukcji if do sprawdzenia, a następnie dostaliśmy to, co mamy na lokalnym magazynie i umieściliśmy to jako HTML listy nieuporządkowanych zadań.

Jeśli przetestujesz naszą prostą aplikację i odświeżysz stronę, zobaczymy, że już działa i pozostało nam tylko utworzyć funkcję, gdy użytkownik zdecyduje się wyczyścić wszystkie czynności do wykonania; gdy to się stanie, wyczyścimy wszystkie lokalne pamięci, przeładujemy stronę, aby nasze zmiany zaczęły obowiązywać, a następnie zwrócą wartość false, aby zapobiec hashowi przed adresem URL:

// clear all the local storage$('#clear').click( function() {window.localStorage.clear();location.reload();return false;});

Po wykonaniu tej czynności nasza aplikacja działa w pełni. Pełny kod wygląda następująco:

$('#add').click( function() {var Description = $('#description').val();if($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;}  $ ("# todos"). prepend (" 
  "+ Opis +" 
  "); $ ('# form') [0] .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

Obsługa przechowywania w Internecie jest całkiem dobra dla specyfikacji HTML5; jest obsługiwany przez wszystkie główne przeglądarki, a nawet IE8, więc jedyną rzeczą, na którą możesz uważać, jest IE7, jeśli nadal go wspierasz.

Wniosek

Lokalna pamięć masowa w małych aplikacjach, takich jak ta, może bardzo zadowolić substytuty dla baz danych. Przechowywanie niewielkich ilości danych nie musi być skomplikowane.

Jak przechowujesz dane z JavaScript? Czy wolisz pliki cookie lub bazy danych do lokalnego magazynu? Daj nam znać w komentarzach.

Wyróżniony obraz / miniatura, obraz do przechowywania przez Shutterstock.