Local Storage и Session Storage в JavaScript

Web Storage API это набор методов, при помощи которых в браузере можно хранить данные в виде пар ключ=значение на подобии cookies.

В основе API лежат два механизма: sessionStorage и localStorage, единственная разница между ними в том что, sessionStorage хранит данные до закрытия браузера. Данные хранящийся в localStorage не имеют срока давности, но могут быть удалены пользователем при очистки истории браузера. Но при этом, данные, записанные в режиме «инкогнито» удаляются при закрытии последней «приватной» вкладки.

Объем хранилища зависит от настроек браузера и обычно равен 5-10 Мб.

Далее приведены примеры использования Web Storage API на примере localStorage:

Перед тем как использовать Local Storage, необходимо убедится, поддерживается ли он браузером.

if (typeof localStorage === 'undefined') {
	alert("localStorage не работает!");
}
JS

Поддержка Web Storage в браузерах:

Особенность установки значений в Local Storage состоит в том, что данные будут доступны только в рамках источника, где они были установлены (один и тот же домен / протокол / порт).

Запись выполняется методом localStorage.setItem(название_ключа, значение):

localStorage.setItem('user', 'admin');
JS

Для чтения значений из хранилища используется метод localStorage.getItem(название_ключа), который возвращает значение этого элемента.

var name = localStorage.getItem('user');
alert(name); // admin
JS

Перебор всех ключей

for (var i = 0; i < localStorage.length; i++) {
	var key = localStorage.key(i);
	console.log(key + ': ' + localStorage.getItem(key));
}
JS

Результат:

user: admin

Собрать объект из Local Storage:

var obj = {};
for (var i = 0; i < localStorage.length; i++) {
	var key = localStorage.key(i);
	obj[key] = localStorage.getItem(key);
}

console.dir(obj);
JS

Результат:

{"user": "admin"}

Удаление данных выполняется методом removeItem(название_ключа):

localStorage.removeItem('user');
JS

Так же имеется возможность очистить всё хранилище:

localStorage.clear();
JS

В отличии от cookies, Local Storage не доступен на сервере, но данные из хранилища можно отправить на сервер с помощью AJAX-запроса.

В данном примере данные отправляются на ajax.php, результат работы скрипта выводится в <div id="result"></div>.

<button id="button" onclick="sendLocalStorage(); return false;">Отправить localStorage в PHP</button>

<div id="result"></div>

<script src="/jquery.min.js"></script>
<script>
/* Запишем данные в Local Storage */
localStorage.setItem('name', 'Иван');
localStorage.setItem('surname', 'Иванов');
localStorage.setItem('date', '20.01.1987');

function sendLocalStorage(){
	/* Поместим все данные в объект */
	var obj = {};
	for (var i = 0; i < localStorage.length; i++) {
		var key = localStorage.key(i);
		obj[key] = localStorage.getItem(key);
	}

	/* Отправка через JQuery AJAX */
	$.ajax({
		url: '/ajax.php',
		method: 'post',
		dataType: 'html',
		data: {data: obj},
		success: function(data){
			$('#result').html(data);
		}
	});
}
</script>
HTML

Обработчик ajax.php:

<?php
if (empty($_POST['data'])) {
	echo 'Данных нет';
} else {
	echo '<pre>' . print_r($_POST['data'], true) . '</pre>';
}

exit();
PHP

Просмотр, редактирование и удаление данных в хранилище доступно в консоле браузеров:

Google Chrome

В DevTools (Windows: F12, MacOS: + + i), вкладка «Application», раздел «Storage» – «Local Storage».

Mozilla Firefox

В веб-консоли (Windows: F12, MacOS: + + k), вкладка «Хранилище», раздел «Локальное хранилище».

В примере выполняется сохранение выбранного селекта в Local Storage на нескольких страницах:
<h4>Страница №1</h4>
 
<div class="form-group">
	<label for="example">Выберите любой пункт:</label>
	<select class="form-control" id="example">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
	</select>
</div>
 
<script src="/jquery.min.js"></script>
<script>
$(document).ready(function(){
	var selected = localStorage.getItem('select');
	if (selected) {
		$('#example').val(selected);
	}

	$('#example').change(function(){
		localStorage.setItem('select', $(this).val());
	});
});
</script>
HTML
29.01.2021
5814

Комментарии

, чтобы добавить комментарий.

Другие публикации

Примеры отправки AJAX JQuery
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
129339
+19
Массив $_SERVER
Описание значений глобального массива $_SERVER с примерами.
22361
0
Примеры использования cURL в PHP
cURL PHP – это библиотека предназначенная для получения и передачи данных через такие протоколы, как HTTP, FTP, HTTPS....
115598
+16
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
21991
+25
Загрузка файлов через jQuery AJAX
В преведущей статье был приведен пример отправки файлов через AJAX с помощью плагина «jQuery Form Plugin». Но файлы...
21549
+3
Работа с Textarea jQuery
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
38552
+4