Это руководство предназначено как введение для тех, кто плохо знаком с localStorage.
согласно MDN API,
Свойство localStorage позволяет получить доступ к локальному объекту« Хранилище . localStorage похож на sessionStorage. Единственное отличие состоит в том, что, хотя данные, хранящиеся в localStorage, не имеют срока годности, данные, хранящиеся в sessionStorage, очищаются при завершении сеанса просмотра, то есть при закрытии браузера ».
localStorage имеет три основных метода, а именно:
›Storage.getItem () - при передаче имени ключа вернет значение этого ключа.
›Storage.setItem () - при передаче имени и значения ключа добавит этот ключ в хранилище или обновит значение этого ключа, если оно уже существует.
›Storage.removeItem () - при передаче имени ключа удаляет этот ключ из хранилища.
Я постараюсь продемонстрировать, как эти три метода используются простым способом.
для проверки getItem ():
вы должны открыть свой html-файл в браузере, ввести значение в поле ввода и нажать кнопку «Сохранить». мы можем проверить, была ли функция успешной, открыв инструмент разработчика ›ресурсы› Локальное хранилище ›Локальные файлы
мы увидим пару «ключ-значение» в нашем локальном хранилище, где ключом будет «текст», поскольку мы назвали его текстом в нашем методе setItem, а значением будет любой текст, который мы вставили в поле ввода.
Теперь давайте попробуем получить доступ к значению localStorage обратно на нашу страницу, для этого мы можем добавить функцию загрузки и передать localStorage.getItem () ключ наших данных, хранящихся в методе setItem.
Я добавлю обработчик события onload в тело и покажу значение, которое мы получаем из localStorage, в текстовом вводе. теперь, если мы обновим страницу, значение из localStorage будет отображаться в поле ввода.
Последний метод, который нам нужно протестировать, - это removeItem (). Давайте добавим функцию удаления, которая удаляет значение из localStorage, если мы передадим ему имя ключа, чтобы вызвать функцию, нам нужно будет добавить кнопку удаления.
Если вы откроете свой инструмент разработчика и проверите localStorage, вставленная нами пара значений ключ и значение больше не будет существовать.
Вот и все… Я постараюсь за короткое время создать мини-приложение, использующее localStorage, и поделиться им с вами, ребята.
