Local Web Storage – цікава та ефективна фіча HTML5, покликана замінити cookies


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Напевно Ви помітили: HTML5 став дуже популярним. Створюються чудові ігри з використанням полотен (canvas), медіа-контент, що орієнтується на різні пристрої. Веб-розробка пройшла чималий шлях від iFrames 1990-х. У цій статті поділимося з Вами порадами щодо роботи з однією дуже корисною фічею HTML5: локальне сховище (Local Web Storage) – можливо, справжній скарб веб-розробки.

Раніше (а в більшості випадків і дотепер) сайти зберігали інформацію про вибрані користувачем параметри, використовуючи cookies. Орієнтуючись на цю інформацію, сайт виглядав по-різному для різних користувачів, тобто був кастомізованим. Наприклад, при першому відвідуванні сайту Ви могли вибрати мову сайту, а коли б Ви зайшли на цю ж сторінку знову, то Вам не довелося б робити цей вибір знову. Аналогічно працюють вибір теми, колірної схеми, чекбокси “Запам’ятати мене” і т. д. Функціональність cookies була неймовірно важливою, але часто неефективною.

Чи погані cookies?

Можна перерахувати декілька недоліків використання cookies: наприклад, обмежений розмір (4 KB) і труднощі, пов’язані з питанням збереження недоторканності особистої інформації при роботі з незашифрованими cookies. Однак я впевнений, що основна проблема при використанні cookies – це накладні витрати.

Так, якщо  Ви навіть сильно обмежуєте об’єм інформації, що зберігається на комп’ютері користувача, то, спостерігаючи за збільшенням кількості користувачів Вашого сервісу, Ви також помітите, що передаєте величезну кількість інформації за протоколом HTTP (що, мабуть, може негативно позначитися на розмірі Вашого гаманця). Cookies зберігаються на пристрої, і, хоча в масштабах одного користувача об’єм передаваних даних зовсім невеликий, при роботі з великою кількістю користувачів об’єм завантажуваних серверами даних неприємно здивує Вас.

Що ж може стати рішенням? HTML5 і реалізоване в ньому локальне сховище.

HTML5 надає можливість сторінці взаємодіяти з локальними даними користувача прямо з браузера, а не за допомогою обміну цими даними із сервером. У звязку з тим, що немає потреби передавати інформацію з жорсткого диска на сервер, можливо збільшувати об’єм налаштувань користувача, що зберігаються, до 5mb!

Приклади

Давайте розглянемо, як же просто взаємодіяти з локальним сховищем за допомогою JavaScript:

%MINIFYHTML910b3f387a7b15d19657cdbea8cc9af92%

Ось так! Ми додали нову змінну, що зберегла налаштування користувача в локальному сховищі. І коли користувач знову зайде на сайт, просто отримаємо значення цієї змінної:

%MINIFYHTML910b3f387a7b15d19657cdbea8cc9af93%

Ви, напевно, здивовані тим, як же просто це реалізується. Саме простота в написанні коду стає одним з головних аргументів на користь використання HTML5 Local Storage. Занесення нового значення і отримання його зайняло всього декілька рядків коду. Якщо ж Ви хочете дати значенню цієї змінної деякий термін придатності, після закінчення якого це значення необхідно буде очистити, то саме видалення виглядатиме так:

%MINIFYHTML910b3f387a7b15d19657cdbea8cc9af94%

Зупинися ми на цьому, у Вашому арсеналі були б лише основні уміння роботи з локальним сховищем, але давайте трохи розберемося, що ще можна зробити у рамках роботи з цим інструментом. Як Ви могли помітити, локальне сховище використовується в основному для зберігання рядків. А ось якщо Вам знадобиться зберігати об’єкт, то у Вас виникнуть проблеми. Так триватиме доти, поки Ви не зрозумієте, що розробник може знайти вихід з будь-якої ситуації!

Як відомо, будь-який об’єкт можна перетворити на рядок за допомогою певних методів. Саме це ми і використовуємо:

%MINIFYHTML910b3f387a7b15d19657cdbea8cc9af95%

Що ж, спробуйте попрацювати з локальним сховищем, і Ви позбавитеся величезних накладних витрат!

Джерело: блог SoftLayer

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *