Локальное хранилище - это свойство, которое позволяет сайтам и приложениям JavaScript сохранять пары "ключ-значение" в веб-браузере без срока действия. Это означает, что данные, хранящиеся в браузере, будут сохраняться даже после закрытия окна браузера.
Вот и все, что нужно знать об этом ... Если вы не программист, особенно разработчик javascript, в таком случае оставайтесь с вами, пока я расскажу вам о его происхождении и о том, как это работает.
Источник
Локальное хранилище - это тип веб-хранилища, которое иногда называют хранилищем DOM (хранилище объектной модели документа), которое предоставляет веб-приложениям методы для хранения данные на стороне клиента, веб-хранилище поддерживает постоянное хранилище данных, подобное файлам cookie, но со значительно увеличенной емкостью и без информации, хранящейся в заголовке HTTP-запроса. у него есть два основных типа: Локальное хранилище и хранилище сеанса, которые различаются по объему и сроку действия. Данные, помещаемые в локальное хранилище, относятся к источнику - комбинации протокола, имени хоста и номера порта, как определено в политике одного источника. В то время как хранилище сеансов является как для каждого источника, так и для каждого экземпляра (для каждого окна или вкладки) и ограничено временем жизни экземпляра.
Как это работает
Теперь поговорим только о локальном хранилище. Это интерфейс объекта окна в JavaScript, который представляет окно, содержащее документ DOM и доступный через свойство Window.localStorage
.
Window.localStorage
- это свойство только для чтения, которое возвращает ссылку на объект локального хранилища, используемый для хранения данных, которые доступны только источнику, который его создал.
Так где же локальное хранилище?
Что ж, в Google Chrome данные веб-хранилища сохраняются в файле SQLite во вложенной папке в профиле пользователя. Подпапка находится в \AppData\Local\Google\Chrome\User Data\Default\Local Storage
на компьютерах с Windows и ~/Library/Application Support/Google/Chrome/Default/Local Storage
на macOS.
Firefox сохраняет объекты хранилища в файле SQLite с именем webappsstore.sqlite
, который также находится в папке профиля пользователя.
Можно выбрать один из пяти способов использования локального хранилища.
setItem () - этот метод используется для добавления ключей и значений в локальное хранилище.
getItem () - этот метод используется для получения элементов из локального хранилища. место хранения.
removeItem () - этот метод используется для удаления элемента из ключа покупки локального хранилища.
clear () - Этот метод используется для очистить локальное хранилище.
key () - этот метод используется для получения ключа локального хранилища путем передачи числа.
setItem ():
Он принимает два параметра: ключ и значение. К ключу можно обратиться позже, чтобы получить прикрепленное к нему значение. На практике.
Ввод:
window.localStorage.setItem("name", "Yasir Gaji");
Вывод:
"{"name":"Yasir Gaji","location":"Lagos, Nigeria"}"
name
- это ключ, аYasir Gaji
- значение.
getItem ():
Этот метод принимает только один параметр, который является ключом, и возвращает значение в виде строки. На практике.
Чтобы получить данные, Ввод:
window.localStorage.getItem("user");
Вы должны получить этот Вывод:
"{"name":"Yasir Gaji","location":"Lagos, Nigeria"}"
removeItem ():
Когда передается имя ключа, removeItem()
метод удаляет этот ключ из хранилища, если он существует. Если с данным ключом не связан ни один элемент, этот метод ничего не сделает. На практике.
window.localStorage.getItem("name");
Это приведет к удалению thename
item, если он существует.
clear ():
При вызове очищает все хранилище всех записей для этого домена. Никаких параметров не получает. На практике.
window.localStorage.clear();
key ():
Этот метод удобен в ситуациях, когда вам нужно перебирать ключи в цикле, и позволяет передать число или индекс в localStorage
, чтобы получить имя ключа. На практике.
var KeyName = window.localStorage.key(index);
Каковы ограничения локального хранилища?
- Не храните конфиденциальную информацию о пользователях в
localStorage.
localStorage
ограничен 5 МБ во всех основных браузерах.- Он не заменяет серверную базу данных, поскольку информация хранится только в браузере.
localStorage
довольно небезопасен, поскольку не имеет формы защиты данных и может быть доступен с помощью любого кода на вашей веб-странице.localStorage
является синхронным, что означает, что каждая вызываемая операция будет выполняться только одна за другой.
Примечание:
- Поскольку локальное хранилище представляет собой интерфейс оконного объекта, его также можно записать как;
localStorage.getItem("name");
и отлично работать.
localStorage.setItem("name", "Yasir Gaji");
localStorage.clear();
- Локальное хранилище может хранить только строки, для хранения массивов или объектов вам придется преобразовать их в строки. Для этого мы используем метод
JSON.stringify()
перед переходом кsetItem()
.
const user = { name: "Yasir Gaji", location: "Lagos, Nigeria", } window.localStorage.setItem('user', JSON.stringify(user));
что означает, что для повторного использования этого значения вам придется преобразовать его обратно в объект. Для этого мы используем метод JSON.parse()
, который преобразует строку JSON в объект JavaScript.
JSON.parse(window.localStorage.getItem("user"));
Вывод
Я считаю, что мне удалось рассказать вам о локальном хранилище с моим небольшим пониманием.
Задайте вопросы, и, если это было полезно, поделитесь ими.