Клиент: Хранение информации в LocalStorage
LocalStorage — это объект, встроенный в веб-браузеры, который позволяет веб-сайтам хранить информацию на компьютере пользователя. В отличие от cookies, данные в localStorage не отправляются обратно на сервер при каждом запросе. Они сохраняются на клиенте и могут быть доступны для чтения или записи только с того же домена, который их создал.
LocalStorage — это одна из двух основных технологий веб-хранилища, встроенных в современные браузеры, второй является SessionStorage. Оба они предоставляют методы и свойства для сохранения, извлечения и удаления данных в браузере пользователя.
Базовые примеры использования localStorage:
// Записываем значение в localStorage localStorage.setItem( 'name', 'Developer' ); // Читаем значение из localStorage var name = localStorage.getItem( 'name' ); console.log( name ); // Выведет: "Developer" // Удаляем значение из localStorage localStorage.removeItem( 'name' ); // Чистим все localStorage localStorage.clear();
Метод key() в объекте localStorage используется для возврата имени ключа по указанному индексу. Это полезно, когда вам нужно пройтись по всем ключам в localStorage.
// Добавляем некоторые значения в localStorage
localStorage.setItem('key1', 'value1');
localStorage.setItem('key2', 'value2');
localStorage.setItem('key3', 'value3');
// Получаем ключ по его индексу
var firstKey = localStorage.key(0);
console.log( firstKey );
// Выведет: "key1"
var secondKey = localStorage.key(1);
console.log( secondKey );
// Выведет: "key2"
Свойство length localStorage позволяет получить количество ключей, хранящихся в localStorage на текущий момент. Это может быть полезно, например, когда вам нужно пройтись по всем ключам в localStorage.
// Добавляем некоторые значения в localStorage
localStorage.setItem('key1', 'value1');
localStorage.setItem('key2', 'value2');
localStorage.setItem('key3', 'value3');
// Получаем количество ключей в localStorage
var numberOfKeys = localStorage.length;
console.log( numberOfKeys );
// Выведет: 3
Проверка существования значения по ключу можно выполнить с помощью getItem(key), который вернет null, если ключ не существует. Пример:
if( localStorage.getItem( 'myKey' ) === null )
{
console.log( 'Значение с ключом "myKey" не существует' );
}
else
{
console.log( 'Значение с ключом "myKey" существует' );
}
Проверка существования по значению немного сложнее, так как вы должны пройти по всем ключам в localStorage и проверить их значения. Пример:
var exists = false;
for( var i = 0; i < localStorage.length; i++ )
{
var key = localStorage.key(i);
if( localStorage.getItem(key) === 'myValue' )
{
exists = true;
break;
}
}
console.log( exists ? 'Значение "myValue" существует' : 'Значение "myValue" не существует' );
LocalStorage обычно используется для:
-
Сохранения состояния пользователя:
Например, если пользователь заполнил форму, но не отправил ее, данные формы могут быть сохранены в localStorage, чтобы при возвращении пользователя на сайт форма была уже заполнена. -
Хранения данных сеанса:
Это может включать в себя информацию о том, вошел ли пользователь в систему, какие товары он добавил в корзину покупок и другую информацию, связанную с текущим сеансом. -
Кеширования данных*:
Например, веб-сайт может сохранить результаты последнего запроса пользователя к серверу в localStorage, чтобы при следующем визите пользователя не пришлось повторно отправлять запрос.
LocalStorage в сравнении с cookies:
-
Пространство:
LocalStorage обеспечивает гораздо больше пространства для хранения (до 5MB) по сравнению с cookies (около 4KB). -
Производительность:
Поскольку данные localStorage не передаются с каждым HTTP-запросом, они не увеличивают нагрузку на сеть. -
Безопасность:
Cookies могут быть доступны как на сервере, так и на клиенте, и могут быть использованы для отслеживания поведения пользователей. LocalStorage доступен только на клиенте. -
Срок хранения:
Cookies имеют срок истечения и могут быть удалены сервером. LocalStorage сохраняется до тех пор, пока пользователь явно не удалит данные.
Плюсы и минусы LocalStorage:
Плюсы:
Прост в использовании.
Обеспечивает больше пространства для хранения, чем cookies.
Не увеличивает нагрузку на сеть, поскольку данные не передаются с каждым HTTP-запросом.
Минусы:
Данные localStorage синхронизируются между всеми окнами и вкладками одного и того же браузера, что может привести к проблемам с безопасностью и конфиденциальностью.
Данные сохраняются в формате строк, поэтому при сохранении или извлечении объектов и массивов их необходимо преобразовывать в строки и обратно.
Нет встроенных сроков истечения, как в случае с cookies.
Если пользователь полностью очищает историю браузера, данные localStorage также будут удалены.
* Важно о безопасности данных в localStorage
LocalStorage представляет собой удобный способ хранения данных прямо в браузере пользователя, но его использование для кеширования требует тщательного рассмотрения вопросов безопасности и конфиденциальности.
Важно помнить, что все данные, хранящиеся в localStorage, не шифруются и доступны в открытом виде для любого, кто имеет доступ к браузеру пользователя. Это может включать в себя вредоносные скрипты, которые могут быть инжектированы в веб-страницу через межсайтовый скриптинг (XSS). Если вы храните важные или чувствительные данные пользователя, такие как пароли или информацию о кредитной карте, в localStorage, эти данные могут быть украдены.
Исключение может составлять ситуация, когда данные, хранимые в localStorage, шифруются и дешифруются на стороне сервера, но это требует дополнительной сложности и не полностью устраняет риск.
В общем, localStorage хорошо подходит для хранения неконфиденциальных данных и состояния пользовательского интерфейса, которые не требуется передавать на сервер с каждым запросом. Для кеширования более чувствительных данных рекомендуется использовать более безопасные методы, такие как IndexedDB, Web Cryptography API или secure HTTP cookies с флагом HttpOnly для предотвращения доступа на стороне клиента.
Комментарии