С бързите темпове, с които се развива уеб индустрията, ставаме свидетели на какви ли не подобрения и технологии. От изнасяне на рендването на графичните елементи от страна на браузъра (border-radius, box-shadow .. etc) до публикуване на години видео време за един ден в YouTube. Един основен компонент нужен, за да се постигне по-пълноценно изживяване за потребителя е възможността той да използва даден ресурс, когато е извън мрежата (offline). Подобно начиние до скоро беше изключително трудно, ако не и невъзможно.
На “бойното поле” се появява нов играч – Web Storage. Web Storage или HTML5 Storage е механизъм, чрез който браузърите могат да запазват локално key/value двойки от текст. Да, наистина прилича на cookies, но има няколко драстични разлики. Ще стигнем до тях съвсем скоро. Web Storage се състои от две части – sessionStorage и localStorage. Разликата между двете е, че sessionStorage съществува докато браузъра е отворен и след затварянето му се унищова, а localStorage съществува дори и след затварянето и отварянето му отново – дори и след рестарт на операционната система, дори и след формат … на всеки друг дял без системния 🙂
Съвместиммоста между браузърите и популярността му са значителни и изненадващи дори. Поддръжка има в IE8+, Firefox 2.0+, Chrome 4.0+, Safari 4.0+, Opera 10.50+, Android 2.0+ и iOS 2.0+. Ако искате да имате 100% покритие на потребителите си, използвайте този полифил https://gist.github.com/350433.
Както казах много прилича на cookies – и двете са вградени в браузъра, и двете са key/value базирани. Какви са предимствата на Web Storage?
- Много удобно API.
- Значително по-голям размер на данни, които могат да се съхранят при клиента – 5MB (за сръвнение cookies са ограничени до 4K). 5MB е характерната големина за всички поддържащи го браузъри и не може да се увеличава.
- Cookies се включват във всяка HTTP заявка и поради тази причина забавят зареждането на страницата ви. Тъй като Web Storage е клиент базирано, данните стоят при клиента и само при изискване се използват.
- Cookies се изпращат не криптирани и поради тази причина са уязвими.
- Cookies са известни и ето затова има лесни начини, дори за начинаещи потребители, те да бъдат изтрити – не може да се разчита на тях.
За какво би могъл да се използва Web Storage?
Сещам се за няколко приложения – запазване на състоянието, където последно е бил потребителя на сайта (игри, електронни магазини) и за AJAX кеширане. Типичен пример за AJAX кеширане е, ако имате widget с времето или валутните курсове, който се разгъва за повече подробности. При самото зареждане на страницата трябва да покажете само няколко основни стойности, а при интерекция от страна на потребителя да направите заявка към сървъра за подробна информация. Данните няма нужда да се зареждат първоначално, а само при изричното желание на клиента – ето защо дори и потребителят да презареди страницата и пак да ги поиска, веднъж добавени в sessionStorage или localStorage (в зависимост от нужното ниво на кеширане) може да бъдат използвани от там. Ще демонстрирам работата с localStorage точно с този пример.
[code lang=”js”]
document.getElementById(‘show_more’).onclick = function() {
if(localStorage && localStorage.weatherCache) {
display_weather_details(localStorage.getItem(‘weatherCache’));
} else {
$.get(‘/wheater.php’, function(data) {
if(localStorage) {
localStorage.setItem(‘weatherCache’, data);
}
display_weather_details(data);
});
}
}
function display_weather_details(data) {
// Направете нещо с данните
}
[/code]
Простичко е, нали? Веднъж коректно изпълнена тази имплементация би ви спестила излишни заявки към сървъра, което при по-натоварени сайтове върши чудеса. Не е нужно да дефинирате localStorage или sessionStorage (да припомня – примера ще работи и със sessionStorage, но при затваряне на браузъра ключът weatherCache вече няма да съществува). Ако вашият браузър е сред изброените по-горе, то тази променлива се добавя по подразбиране и е достъпна на глобално ниво. Ето още няколко допълнителни възможности на API-то:
[code lang=”js”]
localStorage[‘weatherCache’] = ‘В София ще вали сняг’; // Още един начин за дефиниране на ключ (като масив)
localStorage.weatherCache = ‘В Пловдив ще валят кюфтета’; // или като член на обект
localStorage.removeItem(‘weatherCache’); // Премахва ключа
localStorage.clear(); // Изтрива всичко.
[/code]
Разбира се, положението не е толкова розово, колкото се опитвам да го изкарам. Web Storage е уязвим на DNS spoofing. Тъй като Web Storage е домейн базиран, някой зложелател може да се представи за определен домейн и да добие достъп до целият localStorage обект. Също така няма възможност данните да изчезнат с времето – или при затварянето на браузъра (sessionStorage) или завинаги (localStorage). Не може да се изпарят след 1 седмица или 1 месец.
Ни в клин, ни в ръкав
И докато сървърните приложения се опитват да прехвърлят тежките заявки към key/value базирани бази данни като CouchDB и MongoDB, то клиентската страна упорито се опитва да развива SQL и да преоткрива топлата вода. IndexedDB и Web SQL Database са следващият препъни камък за уеб разработчиците. Поредната чудесня идея, която се опорочава от различните производители на браузъри … Но какво пък – колкото повече браузъри – толкова повече проблеми и респективно повече работа, нали?
