
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.
Tutorial web storage
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!