Что такое localstorage и как хранить пользовательские данные.

Лично для меня почему-то был открытием тот факт, что существует что-то, помимо cookies. Localstorage, как и следует из названия, - это локальное хранилище для каждого отдельного пользователя. Реализовано все максимально просто.

Имеется 4 основных метода:

// немного сократим код объявлением константы 
const storage = window.localstorage

// сохраняем значение
storage.setItem("name", "Денис")

// получаем значение
let name = storage.getItem("name")  //  "Денис"

// удаляем значение
storage.removeItem("name")

// полностью очищаем всё хранилище
storage.clear()

При помощи localstorage можно решить ряд задач, таких как, например, сохранение параметров авторизации (сохраняем хэш в localstorage и пользователю больше не придется авторизоваться снова), реализация корзины, автозаполнение форм при перезагрузке и даже хранение каких-либо данных для браузерной игры, например. Можно придумать тысячи задач, которые позволит решить этот объект.

Что по нюансам? Их два:
1. Максимальный размер всего хранилища - 5 МБ, так что не спите туда всем, чем попало.
2. Значение для ключа - это всегда строка.

Насчёт последнего есть небольшая лазейка. На самом деле, сохранить можно все, что можно преобразовать в строку и обратно, будь то списки, объекты и другие типы данных. Просто воспользуйтесь JSON.stringify & JSON.parse.

Кстати, примерно тот же функционал имеет объект window.sessionStorage. думаю, что даже из названия ясно в чем разница 🙂

Надеюсь эта информация кому-то поможет. Спасибо за прочтение ❤️ 

#web