Какие?

localStorage является частью HTML5 Web Storage API. Это позволяет вам, разработчику, хранить информацию в браузере и дает вам возможность легко извлекать и использовать сохраненные данные. Данные хранятся в виде "key"

Информация, хранящаяся в localStorage, находится на стороне клиента, и, в отличие от файлов cookie, она не отправляется обратно на сервер и не имеет срока действия.

Легко читать о локальном хранилище и не совсем понимать, когда и зачем его использовать и что отличает его от других решений веб-хранилища, поэтому давайте сравним локальное хранилище с файлами cookie и хранилищем сеансов.

Локальное хранилище, файлы cookie и хранилище сеансов

Из этой диаграммы мы можем легко увидеть различия между этими тремя вариантами веб-хранилища. Первое отличие заключается в количестве дискового пространства, выделенного для каждого из них. Файлы cookie и SessionStorage ограничены 4 КБ и 5 МБ соответственно, в то время как локальное хранилище варьируется от 5 до 10 МБ и даже до 2 МБ в случае Android Browser v4.3.

  1. Гугл Хром: 10 МБ
  2. Android: 2 МБ
  3. Фаерфокс: 10 МБ
  4. Сафари: 5 МБ

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

Когда и как использовать локальное хранилище?

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

  1. localStorage.setItem("key", "value") : добавить запись key : value в локальное хранилище.
  2. localStorage.getItem("key"): получить value из key, передав ключ в метод в качестве аргумента
  3. localStorage.removeItem("key") : удалить запись из локального хранилища, передав ключ в качестве аргумента
  4. localStorage.clear() : очищает все записи в локальном хранилище.
  5. localStorage.key(n) : учитывая число, вернет n-й ключ

Локальное хранилище может хранить только строки как тип данных, и попытка сохранить любой другой тип данных приведет к автоматическому преобразованию этого объекта в строку. Однако, преобразовывая наши данные в JSON с помощью таких методов, как JSON.strigify() для сохранения записи и JSON.parse() при получении записи, мы можем легко хранить и получать доступ к объектам JavaScript через локальное хранилище.

На стороне клиента в каждом браузере и операционной системе есть место, отведенное для выделения локального хранилища. Например, Chrome хранит LocalStorage в следующем каталоге:

~/Library/Application Support/Google/Chrome/<Profile>/Local Storage/

В то время как Firefox хранит в следующем:

~/Library/Application Support/Firefox/Profiles/<profile folder>/webappsstore.sqlite

Обычная реализация локального хранилища отслеживает, какой пользователь вошел в наше приложение на определенном устройстве. Для этого в какой-то момент процесса входа в систему, после аутентификации и проверки, мы хотим добавить новый элемент в наше локальное хранилище.

let user = {
      id: 1,
      first_name: "Cory"
}
>> Successful Login
window.localStorage.setItem("current_user", JSON.strigify(user))

Сделав это, мы преобразовали наш пользовательский объект в строку, которую можно сохранить в локальном хранилище. Итак, теперь, чтобы получить эту информацию в вашем приложении, вы должны сделать следующее:

JSON.parse(window.localStorage.getItem("current_user"))
>> user = {id: 1, first_name: "cory"}

Локальное хранилище просто и эффективно в использовании, но его также легко использовать не по назначению.

Разумное использование LocalStorage

Хотя LocalStorage может быть невероятно полезным, он по-прежнему уязвим при использовании для хранения конфиденциальной информации. Локальное хранилище подвержено риску атак с использованием межсайтовых сценариев, и в результате информация, хранящаяся в нем, может попасть в чужие руки. LocalStorage, хотя и очень быстро извлекает и сохраняет информацию, также является синхронным, что означает, что любые вызовы к нему будут выполняться после завершения предыдущего вызова и могут вызвать непредвиденные проблемы, если вы попытаетесь использовать его в асинхронных функциях. Локальное хранилище также никогда не следует ошибочно принимать за альтернативу серверной базе данных, поскольку оно ограничено по объему хранилища и может быть доступно любому, у кого есть доступ к вашим локальным файлам.

Шифрование локального хранилища

Лучший способ обеспечить безопасность при использовании локального хранилища — это шифрование. Шифрование — это процесс преобразования информации или данных в код, особенно для предотвращения несанкционированного доступа. Самый популярный метод шифрования локального хранилища — с помощью пакета secure-web-storage. Следующий код является примером использования этой библиотеки.

var CryptoJS = require("crypto-js");
var SECRET_KEY = 'my secret key';
var secureStorage = new SecureStorage(localStorage, {
hash: function hash(key) {
key = CryptoJS.SHA256(key, SECRET_KEY);
return key.toString();
},
encrypt: function encrypt(data) {
data = CryptoJS.AES.encrypt(data, SECRET_KEY);
data = data.toString();
return data;
},
decrypt: function decrypt(data) {
data = CryptoJS.AES.decrypt(data, SECRET_KEY);
data = data.toString(CryptoJS.enc.Utf8);
return data;
}
});
var data = {
secret: 'data'
};
// there is no need to stringify/parse you objects before and after storing.
secureStorage.setItem('data', data);
// stores in localStorage like:
// key => value
// "ad36d572..." => "w1svi6n..."
var decryptedData = secureStorage.getItem('data');
// returns { secret: 'data' }
secureStorage.removeItem('data');
// removes the entry 'data'
secureStorage.key(id)
// returns the hashed version of the key you passed into setItem with the given id.
secureStorage.clear();
// clears all data in the underlining sessionStorage/localStorage.
secureStorage.length;
// the number of entries in the underlining sessionStorage/localStorage.

Посмотреть локальное хранилище в действии

Популярные способы использования LocalStorage можно найти на любом крупном сайте, щелкнув правой кнопкой мыши веб-страницу и выбрав «проверить», а затем щелкнув «Приложение» в верхнем меню и перейдя к «Локальное хранилище». Если вы сделаете это на таком сайте, как YouTube или Reddit, вы увидите, что они хранят такую ​​информацию, как пользовательские настройки, в локальном хранилище. Вы можете обнаружить, что они хранят такие вещи, как ваши настройки для темного и светлого режима или ваши настройки громкости видео, например, на YouTube. Они хранят информацию, которая по своей природе не является конфиденциальной, и клиент должен получить к ней очень быстрый доступ.