Локальное хранилище - это свойство, которое позволяет сайтам и приложениям 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");

Это приведет к удалению thenameitem, если он существует.

clear ():
При вызове очищает все хранилище всех записей для этого домена. Никаких параметров не получает. На практике.

window.localStorage.clear();

key ():
Этот метод удобен в ситуациях, когда вам нужно перебирать ключи в цикле, и позволяет передать число или индекс в localStorage, чтобы получить имя ключа. На практике.

var KeyName = window.localStorage.key(index);

Каковы ограничения локального хранилища?

  • Не храните конфиденциальную информацию о пользователях в localStorage.
  • localStorage ограничен 5 МБ во всех основных браузерах.
  • Он не заменяет серверную базу данных, поскольку информация хранится только в браузере.
  • localStorage довольно небезопасен, поскольку не имеет формы защиты данных и может быть доступен с помощью любого кода на вашей веб-странице.
  • localStorage является синхронным, что означает, что каждая вызываемая операция будет выполняться только одна за другой.

Примечание:

  1. Поскольку локальное хранилище представляет собой интерфейс оконного объекта, его также можно записать как;
    localStorage.getItem("name");
    localStorage.setItem("name", "Yasir Gaji");
    localStorage.clear();
    и отлично работать.
  2. Локальное хранилище может хранить только строки, для хранения массивов или объектов вам придется преобразовать их в строки. Для этого мы используем метод 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"));

Вывод

Я считаю, что мне удалось рассказать вам о локальном хранилище с моим небольшим пониманием.
Задайте вопросы, и, если это было полезно, поделитесь ими.