• Bezpłatna konsultacja
Logo Logo
  • Home
  • Produkt
    • FACTORY plus
    • Planowanie produkcji
    • Realizacja produkcji
    • Raporty z hali
    • Magazyn
    • Katalog produktów
    • Funkcje w przygotowaniu
    • Dlaczego FACTORY plus?
    • Obawy przed zakupem?
    • Cennik FACTORY Plus
  • Branże
    • Obróbka skrawaniem
    • Tworzywa sztuczne
    • Lakiernia proszkowa
    • Poligrafia
    • Produkcja mebli
    • Rękodzieło
    • Odzież i obuwie
    • Opakowania
  • Blog

Baza danych w przeglądarce

  • 9 marca 2017
  • Admin

W raz z pojawieniem się HTML5 dostaliśmy nowe narzędzia mogące rozwiązać odwieczne problemy z przechowywaniem danych po stronie przeglądarki (offline). Mam tu na myśli localStorage i sessionStorage. Zaletą tych API jest możliwość rozszerzania powierzchni dostępnej na dane użytkownika (domyślnie 5 MB w Chrome) w stosunku do ograniczonego rozmiaru cookies wynoszącego 4096 bajtów. Dodatkową wadą cookies jest również to że są przesyłane w nagłówku HTTP podczas każdego requestu, co w przypadku składowania większej ilości danych nie jest wskazane.

storage
LocalStorage w przeciwieństwie to sessionStorage pamięta wszystkie dane dopóki ich ręcznie nie usuniemy, np. poprzez wyczyszczenie cache przeglądarki.
Dane zgromadzone w localStorage są dostępne w przeglądrce jako window.localStorage, gdzie od razu można zauważyć, że zapisane obiekty i tablice są serializowane do stringów, co prowadzi do tego, że wykonywanie skomplikowanych operacji na pamięci wewnętrznej przeglądarki jest co najmniej upierdliwe. Specyfikacja HTML5 zapewnia nam w tym miejscu dwa API, które możemy wykorzystać do potraktowania localStorage jako transakcyjnej bazy danych. Są nimi WebSQL oraz IndexedDB, które zostało dodane na późniejszym etapie prac nad HTML5 i jest niestety wspierane tylko przez najnowsze przeglądarki. W mojej opinii najlepszym sposobem na zarządzanie localStorage przy pomocy IndexedDB lub WebSQL jest wykorzystanie jednej z kilku dostępnych w sieci bibliotek. Ja przećwiczyłem Dexie.js , którą gorąco polecam (możemy ją pobrać zarówno npm’em jak i bower’em).
Poniżej przykład dodawania i odczytywania danych:

let db = new Dexie(“TestowaBaza”); //stworzenie nowej bazy danych

db.version(1).stores({ //dodanie nowej tabeli i zdefiniowanie jej pól
    pracownicy: “imie,nazwisko,wiek”
});

db.open().catch((error) => { //otwarcie bazy danych i obsłużenie ew. błędu
    console.log(“błąd połączenia, ” + error);
});

db.pracownicy.add({ //dodanie nowego pracownika
    imie: “Marcin”,
    nazwisko: “Nowak”,
    wiek: 28
});

db.pracownicy.where(‘imie’).equals(“Marcin”).each((pracownik) => { //lista pracowników
    console.log(pracownik);
});

 

Wygląda to bardzo przejrzyście, prawda ?
Na koniec chciałbym wspomnieć jeszcze o pracy aplikacji w trybie offline (brak połączenia z backendem). HTML5 pozwala na zdefiniowanie pliku cache manifest, który definiuje źródła wymagane do pracy aplikacji oraz reguły postępowania w przypadku ich braku. Przykładowo mamy plik JS który odpowiada za zapis danych do bazy (backendowej). W sytuacji kiedy jest ona niedostępna możemy ten plik podmienić innym, który zapisze nasze dane do localStorage, dopóki nie będzie wznowione połączenie z Internetem. Do prawidłowego działania cache manifest wymagana jest odpowiednia konfiguracja serwera HTTP. W moim przypadku był to Apache, więc cała konfiguracja sprowadziła się do odkomentowania linii w httpd.conf:

addType text/cache-manifest .appcache

Przykładowy plik cache manifest wygląda tak:

CACHE MANIFEST
# Rev 3 -- wersja cache
CACHE: -- cachowane źródła
index.html
pics/logo.png
stylesheet.css
FALLBACK: -- co ma się wydarzyć jeżeli nie ma dostępu do źródła
*.html /offline.html

 

Pliczek ten musimy podpiąć do naszego index.html w ten sposób:

Podczas testowania trybu offline w chromie polecam URL: chrome://appcache-internals. Przyda się jeżeli chcemy uniknąć problemów z aktualizowaniem zawartości naszych plików JS :).

Reasumując mam nadzieję, że ten artykuł zapobiegnie tworzeniu kolejnych aplikacji które bezmyślnie “uderzają” ajaxem do backendu w celu pobrania danych zmieniających się raz na rok.

Powiązane wpisy:

Kiedy i jak wdrożyć aplikację do zarządzania produkcją?Kiedy i jak wdrożyć aplikację do zarządzania produkcją? 10 przykazań Joanna ZagórskaCo to jest lean manufacturing – wywiad z Joanną Zagórską, konsultantką rozwiązań leanowych, cz. 1 recenzja FACTORY plusRozmowa z kierownikiem produkcji Mateuszem Królem i recenzja aplikacji FACTORY plus w 10 punktach Problemy z pracownikami na produkcji? – Jak przekonać pracowników do wdrożenia innowacji? System zarządzania produkcjąSystem zarządzania produkcją – jak go wdrożyć w małej firmie? 6 wskazówek
Tags HTML5IndexedDBLocalStorageWebSQL
Poprzedni Post
Jak działa wirtualna maszyna Java
Następny Post
Guava – podstawy
Shape
Logo

Zajmujemy się projektowaniem i wytwarzaniem zaawansowanych systemów informatycznych wspierających pracę w rozmaitych dziedzinach przemysłu i badań naukowych. Nasze oprogramowanie cechuje wysoka jakość wykonania, minimalizm, ukierunkowanie na użytkownika oraz bardzo konkurencyjna cena.


    Visix

    • FACTORY plus
    • Cennik FACTORY Plus
    • Magazyn
    • Raporty z hali
    • Realizacja produkcji
    • Planowanie produkcji
    • Katalog produktów

    Branże

    • Obróbka skrawaniem
    • Tworzywa sztuczne
    • Lakiernia proszkowa
    • Poligrafia
    • Produkcja mebli
    • Rękodzieło
    • Odzież i obuwie
    • Opakowania

    Skontaktuj się

    • 62-100 Wągrowiec, ul. Reja 19
    • visix@visix.pl
    • +48 501 710 120
      +48 509 131 120

    © Copyright 2023. Visix

    • FACTORY plus