JavaScript. localStorage, sessionStorage

В локальном хранилище и в хранилище сессии сохраняются данные, доступные после перезагрузки страницы и даже после закрытия / открытия браузера. Эти данные не передаются на сервер и хранятся отдельно для каждого домена.

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

Информация в хранилищах сохраняется в виде пары ключ - значение. Как ключи, так и значения должны быть строками, другие типы будут приводиться к строкам при записи автоматически.

Методы и свойства

Оба хранилища имеют одинаковый набор методов и свойств:

• setItem(key, value) – сохранить значение value c ключом key.
• getItem(key) – получить значение ключа key.
• removeItem(key) – удалить значение с ключом key.
• clear() – очистит все значения в хранилище.
• key(index) – получить ключ на индексу.
• length – количество элементов в хранилище.

Установка и чтение значений

Для установки и чтения данных используйте set / get методы.

// Устанавливает значение с ключом "key" и значением "value"
localStorage.setItem('key', 'value');

// Вернёт ранее установленное значение с ключом "key"
// В том случае, если значение не было установлено, вернёт null
let value = localStorage.getItem('key'); // value -> 'value'
 

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

let obj = {
	a: 1,
	b: 2
};

// Сохраняем объект в виде строки json
localStorage.setItem( 'obj', JSON.stringify(obj) );

// Читаем значение объекта из строки json
let obj = JSON.parse( localStorage.getItem('obj') );
 

Установка и чтение значений хранилища так же доступна, как и при работе с обычным объектом, через точку. Но при этом не будет срабатывать событие window.onstorage, о котором будет написано ниже.

localStorage.key = 'value';

let value = localStorage.key;

localStorage.obj = JSON.stringify(obj);

let obj = JSON.parse(localStorage.obj);
 

Удаление значений

Допускается удаление одного значения из хранилища по ключу или удаление всех значений сразу.

// Удаляет значение с ключом "key"
localStorage.removeItem('key');

// Удаление с помощью оператора delete
delete localStorage.key;

// Очистить все значения в хранилище
localStorage.clear();

Обход значений в хранилище

Используя свойство length и метод key() можно обойти все имеющиеся значения в хранилище.

for (var i=0; i < localStorage.length; i++) {

	let key = localStorage.key(i);

	let value = localStorage.getItem(key); 

}
 

Кроме того, значения хранилища можно обойти циклом for (key in object), но при обходе следует исключить свойства прототипа.

for(var key in localStorage) {

	// Исключить свойства прототипа
	if (!localStorage.hasOwnProperty(key)) continue;

	let value = localStorage.getItem(key);

}

Событие storage

Событие storage происходит в тот момент, когда в хранилище изменяются данные. Это событие произойдёт на всех открытых страницах кроме той, на которой оно сработало. В свойствах события будет доступна следующая информация:

• storageArea – хранилище, в котором изменились данные.
• url – url документа, инициировавшего изменение.
• key – ключ изменённых данных.
• oldValue – старое значение.
• newValue – новое значение.

Свойства key, oldValue, newValue будут равны null в тех случаях, если этих данных в хранилище нет (например при первом добавлении или удалении значения).

window.addEventListener('storage', (e) => {
	
	console.log('e.key', e.key); 
	console.log('e.oldValue', e.oldValue);
	console.log('e.newValue', e.newValue);
	console.log('e.url', e.url);
	console.log('e.storageArea', e.storageArea);
		
}); 

localStorage.setItem('key', 'value');