В самом начале моей карьеры разработчика программного обеспечения одним из первых вопросов, с которым я столкнулся, был вопрос о том, как хранить данные на компьютере клиента для дальнейшего использования. Эти данные будут доступны только в браузере, в котором вы работаете в данный момент, и к ним можно будет легко получить доступ при перезагрузке страницы. На этом этапе обучения я еще не имел доступа к программированию бэкенда и не знал, как этого добиться. Именно здесь на помощь приходит локальное хранилище.
Что такое локальное хранилище?
Локальное хранилище — это база данных ключ/значение, доступная в браузере пользователя. Эта база данных может храниться неограниченное количество времени или до тех пор, пока она не будет удалена вручную. В настоящее время локальное хранилище принимает только строки, поэтому если вы храните массив или объект, вам придется сначала использовать JSON.stringify(), чтобы преобразовать его в строку.
Когда не стоит использовать локальное хранилище?
Хотя локальное хранилище имеет множество применений, важно не сохранять конфиденциальную информацию. К ней относятся пароли, API-ключи, маркеры аутентификации и т.д. Вредоносные третьи лица могут легко получить доступ к этой информации и использовать ее в своих корыстных целях.
Когда использовать локальное хранилище?
Как упоминалось ранее, локальное хранилище обеспечивает постоянство вашего сайта. Оно используется для хранения информации, которая должна оставаться на сайте даже при его обновлении. Обычно это делается для сохранения пользовательских предпочтений, например, тем пользовательского интерфейса. Локальное хранилище также может использоваться для сохранения статистики игр. Недавний пример — популярная игра Wordle. Каждый день, когда вы играете в игру, она сохраняет такие данные, как количество угадок, текущая полоса побед и процент побед. Если вы попытаетесь открыть игру в другом браузере или на другом компьютере, вы обнаружите, что вся ваша статистика исчезла.
Другой пример
Давайте рассмотрим пример с Dev.to. Посетители сайта, имеющие профиль, могут изменять настройки внешнего вида, такие как тема сайта и шрифт. Если мы откроем инструменты разработчика браузера, то сможем посмотреть, что в настоящее время сохранено в инструментах разработчика.
Выше мы видим, что в настоящее время браузер имеет несколько ключей, сохраненных в Local Storage. Внутри ключа config_body_class есть значение dark-theme и sans-serif. Если в настройках изменить тему и шрифт, это изменение будет отражено в ключе config_body_class и сохранится при перезагрузке страницы.
Методы локального хранилища
localStorage.key(index)
Этот метод можно использовать для получения значения по определенному индексу. При передаче номера индекса будут возвращены все значения по этому индексу.
let key = localStorage.key(0)
//This will get the value of the first item in localStorage
localStorage.setItem(key, value)
Это позволяет сохранить пару ключ/значение в браузере.
localStorage.setItem("key", "value")
//This will add a key called "key"
//with a value of "value" to localStorage
Чтобы добавить что-то, кроме строки, вы можете использовать следующий синтаксис
const movies = [
"Star Wars",
"Lord of the Rings",
"Harry Potter"]
localStorage.setItem("key", JSON.stringify((movies)))
localStorage.getItem(key)
Эта функция считывает данные из локального хранилища для указанного ключа. Если ключ не существует, будет возвращен null.
localStorage.getItem("key")
//To retrieve a specific key from
//local storage, you can pass in the key
//as a variable into getItem
Чтобы получить ключ со значением, отличным от строки, необходимо сначала разобрать его с помощью следующего синтаксиса.
JSON.parse(localStorage.getItem("key"))
localStorage.removeItem(key)
Этот метод удалит указанный ключ из localStorage. Если указанный ключ не существует, метод вернет неопределенное значение.
localStorage.clear()
Этот метод не принимает никаких параметров и просто удалит все ключи из localStorage. Эти ключи нужно будет добавить снова, чтобы получить к ним доступ.
Заключение
Локальное хранилище — это база данных пар ключ/значение, доступная внутри браузера. Очень важно не хранить в LocalStorage конфиденциальные данные. При хранении объектов в LocalStorage необходимо помнить о преобразовании их в строку с помощью JSON.stringify(). Вы можете получить этот объект с помощью JSON.parse(). Возможности LocalStorage безграничны.
Какие способы использования LocalStorage вы могли бы использовать в будущем проекте?