💡 Совет

HTML5 Local Storage

20.11.2019 1 минута чтения

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

Теперь об особенностях 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'));
Экспертное мнение Алексей

В веб-разработке с 2012 года. Специализируюсь на PHP, JavaScript и архитектуре высоконагруженных проектов. Автор статей по оптимизации, API и базам данных.

Все статьи автора →
Telegram VK Twitter
Читайте также
Беларусь.Яндекс.Деньги
Беларусь.Яндекс.Деньги
Думаю, многие из читателей этого блога занимаются фрилансом, а для многих это и один из основных способов заработка. Конечно же,...