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'));