До цих пір найбільш популярним методом для локального зберігання були cookie. Cookie - це пара ключ-значення, які зберігаються локально в текстовому файлі (4KB або 20 пар ключ-значення максимум (IE) для одного домену). Крім того cookie передаються на сервер при будь-якому HTTP запиті на сервер, навіть при AJAX. Закономірно, що в стандарті повинні були з'явиться кошти для більш практичного зберігання даних в браузері.
З усієї специфікації HTML5. локальні сховища даних на стороні клієнта, ймовірно, одна з найбільш обговорюваних тем. Є як позитивні, так і негативні думки. З мінусів, найвагоміший це порушення концепції актуальності даних для всіх користувачів, тобто так, як це працює зараз: користувач заходить на сайт і бачить останню версію веб-додатки, ту яку бачать і всі інші користувачі. Однак при правильному застосуванні локальних сховищ і своєчасного оновлення даних, цих проблем можна уникнути.
Отже, сховище на стороні клієнта ділиться на 3 принципових методології:
Давайте докладніше розглянемо кожну з них:
1. Session Storage - сесійне сховище
Сесійне сховище більш зручно, ніж cookie. З різними реалізаціями макс. ліміт може бути порядку декількох Мбіт. На відміну від cookie сесійні дані не відправляються при кожному запиті.
Переваги: при запиті корисне навантаження мінімальна.
Наведемо приклад сесійної сховища:
2. Local Storage - локальне сховище
При локальному зберіганні даних, специфікація була переписана в більш безпечну сторону. Тобто тепер дані автоматично прив'язуються до домену.
Тривалість дії: при зберіганні в Local Storage дані зберігаються навіть після закриття вкладки / вікна / браузера.
Ось як це можна зробити:
3. Database Storage - зберігання в базі даних
До сих пір ми обговорювали сховища обмежені парами ключ-значення. Але коли ви маєте справу з великими обсягами даних, краще бази даних ще нічого не придумали. Браузери використовує SQLite бази, яка працює без додаткових процесів і серверів. Лише з невеликими обмеженнями, наприклад відсутність зовнішнього ключа.
Але в нагороду ви отримуєте повноцінну SQL базу даних. І робота з нею ведеться на SQL.
Ось приклад коду для доступу до локальної базі даних:
Демо прикладів ви можете побачити тут (вам буде потрібно webkit браузер) Поки специфікація HTML5 досить сира, і містить велику кількість вразливий остей. Я думаю, ситуація значно зміниться з виходом FireFox4 і IE9, релізи яких не за горами.