РЕКЛАМА
HTML5 Local Storage
10 сентября 2011 HTML5 9 комментариев 4286 просмотров
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'));
9 комментариев
byteZ
А какова ёмкость локального хранилища, не подскажете?
Браузеры отвечают за емкость локального хранилища. По умолчанию 5 Мб на каждый домен. В IE — 10.
Илья

А есть ли какая-то стандартная возможность хранить данные, не привязываясь к конкретному браузеру, только к компьютеру? Например, запустил человек некий сайт в Фаерфоксе, у него где-то сохранилась пара key1=value1. Потом открывает тот же сайт, но уже Хромом. И Хром извлекает данные, что у key1 значение value1, хотя изначально записаны они были из Фаерфокса.

Илья, стандартной нету. Должно быть что-то общее для всех клиентов (браузеров). Этим общим может быть сервер.

Александр

Правильно ли я понимаю, что получить данные из файлов в хранилище для дальнейшего анализа не получится? Мне как-то надо записывать значения переменных после действий пользователя. И именно на клиенте в офлайне.

@Александр, LS работает равнозначно для online/offline. Возможно, я Вас не так понял, но процесс чтения/записи одинаков. При действиях (читай, событиях) Вы можете вызвать setItem, или что-то обновить. Опять же, мне сложно что-то говорить, так как я не в контексте.

Александр

Мне необходимо без обращения к серверу в режиме выполнения циклических алгоритмов JS сохранять значения даты, времени и значения переменных во внешнем файле. И считывать другие значения из другого файла. Файлы обычные TXT. В обычной виндузовой программе это естественно работает. А вот в HTML5/JS что-то не выходит. Я предположил, что ls можно читать/редактировать.

Понял, да, в каком-то роде можно Local Storage использовать для тех же целей, а именно чтения/записи.

This is very fascinating, You are an overly professional blogger. I have joined your feed and look forward to in quest of extra of your excellent post. Additionally, I have shared your web site in my social networks