IT Разработка —
html5, javascript, localstarage, web

HTML5 Local Storage

Могу предположить, что уже многие слышали у новых возможностях html5. Одной из такой является localStorage. Говоря простыми словами — это клиент-сайд база данных, которая позволяет сохранять данных в форме «ключ — значение». Это достаточно удобно для сохранения временных данных пользователей.

На данный момент эта возможность поддерживается большинством современных браузеров: Safari 4+, Mobile Safari (iPhone/iPad), Firefox 3.5+, Internet Explorer 8+, Chrome 4+, Opera 10.6+. Далее я хотел бы рассказать как использовать это небольшое удобство для ваших проектов.

Где это может понадобиться? Скорее всего для сохранения каких-то небольших данных, которые лучше не гонять через cookie. Мне это понадобилось когда мы писали приложения для телефонов на Bada, где для быстроты разработки мы встроили webview и открыли в нем локальный html фаил (хорошо, что встроенный браузер был основан на webkit) и писали весь проект на html+javascript. И вот когда дело дошло до авторизации, тут localStorage как раз и пригодился.

Первое, что необходимо сделать, если вы хотите использовать localStorage — это проверить, поддерживает ли браузер пользователя эту возможность. Для этого можно использовать следующий код:

function isLocalStorageAvailable() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}

Стоить заметить, что много данных не получится сохранить таким образом. Размер локального хранилища регулируется самим браузером и равен примерно 5-10Мб.

В отличие от cookie, данные могут быть сохранены на продолжительный срок. Каждый домен и субдомен имеет свой объект window.localStorage. Если у вас открыто 2 окна одного и того же домена, то изменение содержимого localStorage сразу будет доступно на другом окне или вкладке.

Кроме объекта window.localStorage существует элемент window.sessionStorage – представляет собой хранилище пользовательского набора данных которое существует и актуально только для одной вкладки браузера до тех пор, пока она не будет закрыта.

Теперь перейдем непосредственно к сохранению, получению и удалению данных.

Для сохранения данных используется следующий код:

localStorage.setItem('key', 'value');

Получения данных из localStorage:

var item = localStorage.getItem('key');
alert(item); //value

Удаление данных:

localStorage.removeItem('key'); //удалит элемент объекта
localStorage.clear(); //удалит все элементы

Что бы узнать не привысили ли мы лимит допустимого размера можно воспользоваться слудующей проверкой

try {
    localStorage.setItem('key', 'value');
} catch (e) {
    if (e == QUOTA_EXCEEDED_ERR) {
        alert('Локальное хранилище переполнено');
    }
}

Кстати, в firebug можно просто написать localStorage и он выведет какие элементы в нем хранятся. А в библиотке MSDN можно увидеть ещё дополниетельное свойство remainingSpace — получение оставшегося объема памяти (в байтах) для объекта хранения.

Таким образом в localStorage можно сохранять не только строковые переменные, но и целые объекты, например,

var noteObj = new Object();
var newDate = new Date();
noteObj.text = 'test';
noteObj.date = new Date().getTime();
localStorage.setItem("note", JSON.stringify(noteObj));

Что бы обратно получить JSON объект можно воспользоваться методом JSON.parse().

Вот так легко и просто можно использовать хранилище браузера для ваших целей. Это намного удобнее, чем постоянно гонять cookie пользователя. Таким образом можно реализовать интерфейс полностью основанный на ajax и javascript, а главное, работающий без перезагрузки страницы. Впрочем, в нашем приложении так и получилось.

Материалы используемые для подготовки статьи: