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.
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!
Opublikowano w 
Tags: 
