HTML5 Local Storage

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

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

Поддержка браузеров, на самом деле, довольно хорошая:

  • IE 8+
  • Firefox 3.5+
  • Safari 4+
  • Chrome 4+
  • Opera 10.5+
  • iPhone 2+
  • Android 2+

LocalStorage API очень прост в использовании. Работа происходит через обращение к объекту window.localStorage.

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

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

localStorage.setItem('foo', 'bar');

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

var foo = localStorage.getItem('foo');
console.log(foo); //bar

Можно использовать квадратные скобки для сохранения и извлечения данных.

localStorage['foo'] = 'bar';
var foo = localStorage['foo'];
console.log(foo); //bar

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

localStorage.removeItem('foo'); //удалит элемент по ключу
localStorage.clear(); //удалит все элементы

При записи данных в заполненное хранилище вы получите ошибку QUOTA_EXCEEDED_ERR.

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

Стоит отметить, что сохранять можно только строковые данные. Для нестроковых данных перед записью следует воспользоваться сериализацией.

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