HTML5 Local Storage

Local storage (локальное хранилище) — база данных на стороне клиента, содержащая пары ключ-значение. Надеюсь, что в ближайшем будущем эта технология станет стандартом в веб-разработке.
Плюсы локального хранилища:

• Большой объем хранилища (ограничивается настройками браузера и вашим HDD)
• Данные хранятся на стороне клиента (высокая производительность)
• Не ограничено временем жизни

На данный момент далеко не все браузеры поддерживают эту технологию:

• IE 8.0+
• Firefox 3.5+
• Safari 4.0+
• Chrome 4.0+
• Opera 10.5+
• iPhone 2.0+
• Android 2.0+

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

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

Сохранение данных:

<code>localStorage.setItem('foo', 'bar');</code>

Извлечение данных:

<code>var foo = localStorage.getItem('foo');
alert(foo); //bar</code>

Можно использовать объектную нотацию для сохранения и извлечения данных:

<code>localStorage['foo'] = 'bar';
var foo = localStorage['foo'];
alert(foo); //bar</code>

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

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

Может возникнуть проблема, если мы превысили ограничение размера локального хранилища. Обработаем это при помощи try/catch:

<code>try {
    localStorage.setItem('foo', 'bar');
} catch (e) {
    if (e == QUOTA_EXCEEDED_ERR) {
        alert('Локальное хранилище переполнено');
    }
}</code>

Стоит отметить, что сохранять можно только строковые данные. Иногда требуется сохранять объекты. Ничего не остается как воспользоваться сериализацией:

<code>var foo = {1: [1, 2, 3]};
localStorage.setItem('foo', JSON.stringify(foo));
var fooFromLS = JSON.parse(localStorage.getItem('foo'));</code>

Небольшой пример как можно использовать локальное хранилище. На сайте есть страница с табами, которые можно перетаскивать. Удобно если после изменения сохранится расстановка для текущего пользователя. «По-серверному» это можно осуществить сохранением позиций для каждого юзера в БД. Естественно, это очень накладно по производительности. А локальное хранилище будет делать это быстро и без участия сервера.