Tutorial web storage

javascript-html5-tutorial.pl

Tutorial web storage – aplikacje przechowujące dane lokalnie

1 października, 2014

Dominik-W

Dziś zaprezentujemy tutorial o tworzeniu prostej aplikacji web, która przechowuje dane w localStorage. Będzie on mogła zapisywać i przechowywać ustawienia dotyczące swojego wyglądu.

Przejdźmy zatem do dzieła.

1. Zacznijmy od dodania biblioteki jQuery oraz prostych stylów CSS dla elementów UI:

...

<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>

<style>
#main {
  border: solid 1px #00e;  
  margin: 0 auto; 
  padding: 5px; 
  text-align: center; 
  width: 33%;  
}
</style>
...

2. Stwórzmy prosty formularz w sekcji body:

<body>
  <section id="main">
    <form onsubmit="javascript:storeSettings()">
      <label>Select font size: </label><br />
      <input id="your_font" type="number" max="50" min="5" 
        value="14">
      <br />

      <label>Select border size: </label><br />
      <input id="your_border" type="number" max="10" min="1" 
        value="1">
      <br />

      <label>Select color for background: </label><br />
      <input id="your_color" type="color" value="#ffffff">
      <br />

      <p>
        <input type="submit" value="Save settings">
        <input onclick="removeSettings()" type="reset" 
          value="Remove settings">
      </p>
    </form>
  </section>
</body>

Teraz możemy przejść do programowania funkcji obsługi w JavaScript.

3. Napiszmy funkcję pobierającą dane z UI i zapisującą je w localStorage:

function storeSettings() {
  if ('localStorage' in window && 
    window['localStorage'] !== null) {
    try {
      var your_color = $('#your_color').val();
      var your_font = $('#your_font').val();
      var your_border = $('#your_border').val();

      localStorage.setItem('bgcolor', your_color);
      localStorage.setItem('fontsize', your_font);
      localStorage.setItem('border', your_border);
    } catch (e) {
      alert('An error occured');
    }
  } else {
    alert('Sorry, your browser must have localStorage support');
  }
}

Funkcja wpierw sprawdza czy localStorage jest dostępny w przeglądarce.

4. Dodajmy funkcję pomocniczą, która ustawia wartości domyślne:

function setDefaults() {
  document.body.style.backgroundColor = '#ffffff';
  document.body.style.fontSize = '14px';
  $('#main').css('border', 'solid 1px #00e');
  
  $('#your_color').val('#ffffff');
  $('#your_font').val('14');
  $('#your_border').val('1');
}

Jako że wartości domyślne ustawiać będziemy w więcej niż jednym miejscu w kodzie, warto mieć tę czynność zapisaną w osobnej funkcji.

5. Oprogramujmy przycisk „Remove settings”:

function removeSettings() {
  localStorage.removeItem('bgcolor');
  localStorage.removeItem('fontsize');
  localStorage.removeItem('border');

  setDefaults();
}

Funkcja ta usuwa nasze dane zapisane w localStorage.

6. Zakończmy całość funkcją, która pobiera ustawienia z localStorage (lub ustawia domyślnie, gdy ich brak) i ustawia je dla elementów UI naszej małej aplikacji:


function useSettings() {
  if (localStorage.length != 0) {
    document.body.style.backgroundColor = 
      localStorage.getItem('bgcolor');

    var font_size = localStorage.getItem('fontsize');
    document.body.style.fontSize = font_size + 'px';

    var border_size = localStorage.getItem('border');
    $('#main').css('border', 'solid ' + border_size + 'px #00e');

    $('#your_color').val(localStorage.getItem('bgcolor'));
    $('#your_font').val(font_size);
    $('#your_border').val(border_size);

  } else {
    setDefaults();
  }
}

$(document).ready(function() {
  useSettings()
});

Funkcja ustawia style a także wartości dla elementów input. Na końcu wywołaliśmy ją automatycznie – tutaj w zdarzeniu ready dokumentu.

I to wszystko. Demo online dostępne tutaj:

http://directcode.eu/samples/web-storage-demo-ui-app-full.html

a cały przykład także na GitHub:

https://github.com/dominik-w/js_html5_com/blob/master/web-storage-demo-ui-app-full.html

Podsumowanie

Przykład został przetestowany w solidnych przeglądarkach (FF, Chrome), działa bardzo dobrze. Jest to dość interesujące podejście do personalizowanej aplikacji Web, a wszystko dzięki localStorage.

Miłej zabawy!