Локальное хранилище

localStorage — это локальное хранилище, которое используется для хранения данных в специально отведенном месте в браузере. localStorage имеет простой API для извлечения и запись данных в локальное хранилище. Он может хранить до 10 Мб данных для одного домена. В отличие от файлов cookie, Web Storage не делает каждый раз запрос HTTP.

Оглавление:
  1. Недостатки cookies
  2. Объекты Web Storage
  3. Пример
  4. Хранение событий
  5. Поддержка браузерами localStorage
  6. Заключение

С появлением Web Storage недостатки cookies для хранения данных в браузере были решены.

Недостатки cookies

  • Ограничение размера хранилища файлов cookie в веб-браузерах, около 4Кб.
  • Cookies отправляются с каждым запросом HTTP, тем самым замедляя производительность веб-приложений.
к меню ↑

Объекты Web Storage

Local storage: хранит данные без срока годности. Эти данные будут доступны даже если вкладки браузера открыты или закрыты.

Session storage: хранит данные за один сеанс. Материалы данных будут очищены, как только пользователь закроет браузер.

Local storage сохраняет данные в виде пары ключ/значение setItem('key', 'value').

данные локального хранилища не будут доступны в других браузерах, потому что дынные хранятся только в активном браузере.

к меню ↑

Пример

Простая веб-форма позволит нам изменить цвета фона страницы и размер шрифта в заголовке.

<form onsubmit="javascript:setSettings()">
<label>Выбрать цвет для фона: </label>
   <input id="favcolor" type="color" value="#ffffff" />
<label>Выбрать размер шрифта: </label>
   <input id="fontwt" type="number" max="14" min="10" value="13" />
   <input type="submit" value="Save" />
   <input onclick="clearSettings()" type="reset" value="Стереть" />
</form>

Функция setSettings вызывает из формы событие onsubmit, которое сохранит выбранные значения в локальное хранилище.

Проверить, поддерживает браузер Web Storage или нет.

function setSettings() {
	if ('localStorage' in window && window['localStorage'] !== null) {
	// объект Local Storage для хранения данных
	} else {
		alert('Данные не сохранятся, ваш браузер не поддерживает Local storage');
	}
}

Для браузеров которые не поддерживают LocalStorage, можно подключить библиотеку JavaScript Modernizr.

<script type="text/javascript" src="modernizr.min.js"></script>
if (Modernizr.localstorage) {
// объект Local Storage для хранения данных
} else {
 alert('Данные не сохранятся, ваш браузер не поддерживает Local storage');
}

Лучше всегда добавлять блоки try/catch для хранения кода при сохранении данных. QUOTA_EXCEEDED_ERR исключение, если лимит хранилища превышает 5Мб.

function setSettings() {
if ('localStorage' in window && window['localStorage'] !== null) {
	try {
		var favcolor = document.getElementById('favcolor').value;
		var fontwt = document.getElementById('fontwt').value;
		localStorage.setItem('bgcolor', favcolor);
		localStorage.fontweight = fontwt;
	} catch (e) {
		if (e == QUOTA_EXCEEDED_ERR) {
			alert('Переполнение хранилища!');
		}
	}
	} else {
		alert('Данные не сохранятся, ваш браузер не поддерживает Localstorage');
	}
}

Если изменить фон и размер шрифта. Ключ getItem('Key') покажет сохранённые данные, и некоторое время фон, размер шрифта не изменится.

function applySetting() {
	if (localStorage.length != 0) {
	document.body.style.backgroundColor = localStorage.getItem('bgcolor');
	document.body.style.fontSize = localStorage.fontweight + 'px';
	document.getElementById('favcolor').value = localStorage.bgcolor;
	document.getElementById('fontwt').value = localStorage.fontweight;
	} else {
	document.body.style.backgroundColor = '#FFFFFF';
	document.body.style.fontSize = '14px'
	document.getElementById('favcolor').value = '#FFFFFF';
	document.getElementById('fontwt').value = '14';
	}
}

Функция length возвращает общее количество значений в хранилище.

Приведенные выше функции могут быть вызваны событием onload для тега body следующим образом:

body onload="applySetting()"

Функция clear() или removeItem('key') очистит локальное хранилище. В примере ниже, функция вызывается событием click, кнопка очистить.

function clearSettings() {
		localStorage.removeItem("bgcolor");
		localStorage.removeItem("fontweight");
		document.body.style.backgroundColor = '#FFFFFF';
		document.body.style.fontSize = '14px'
		document.getElementById('favcolor').value = '#FFFFFF';
		document.getElementById('fontwt').value = '14';
}

localStorage

к меню ↑

Хранение событий

При удалении данных запускается событие window. Мы можем добавить вызов событий и обработку изменений, если это необходимо.

window.addEventListener('storage', storageEventHandler, false);
function storageEventHandler(event) {
		applySetting();
}

Атрибуты событий:

  • key свойство, которое изменилось
  • newValue новое заданное значение
  • oldValue ранее сохраненное значение
  • url полный адрес события, где оно произошло
  • storageArea объекты localStorage или sessionStorage

Помните, что событие останется без изменений, если не будет никаких изменений в данных. Такие же методы API применяются для хранения сессии, кроме того методы должны быть выполнены объектом SessionStorage.

Проверить есть данные в локальном хранилище, можно с помощью средств разработчика. Например, в Мазиле нажмите правой кнопкой мыши на веб-странице и выберите Исследовать элемент Настройки инструментов.

Настройки браузера показывать локальное хранилище
Включить в браузере показывать локальное хранилище

Если в хранилище есть данные, Вы увидите данные хранящиеся в виде пары ключ/значение.

Локальное хранилище в виде пары ключ/значение
Данные хранящиеся в виде пары ключ/значение
к меню ↑

Поддержка браузерами localStorage

к меню ↑

Заключение

Теперь вы можете использовать Web Storage для хранения настроек пользователя, информацию сеанса т.д. Вы также можете попробовать создать приложение, которое сможет работать в автономном режиме, а данные изменившиеся во время автономной работы, могут быть отправлены в виде пакета обновлений когда пользователь подключится к сети.