Механизм localStorage предоставляет тип объекта веб-хранилища, который позволяет хранить и извлекать данные в браузере. Вы можете хранить и получать доступ к данным без истечения срока действия; данные будут доступны даже после того, как посетитель закроет ваш сайт.

Обычно вы получаете доступ к localStorage с помощью JavaScript. С помощью небольшого количества кода вы можете создать пример проекта, например, счетчик очков. Это покажет, как вы можете хранить и получать доступ к постоянным данным, используя только код на стороне клиента.

Что такое localStorage в JavaScript?

Объект localStorage является частью API веб-хранилища, поддерживаемого большинством веб-браузеров. Вы можете хранить данные в виде пар ключ-значение, используя localStorage. Уникальные ключи и значения должны быть в формате строки DOM UTF-16.

Если вы хотите хранить объекты или массивы, вам придется преобразовать их в строки с помощью JSON.stringify() метод. Вы можете хранить до 5 МБ данных в localStorage. Кроме того, все окна с одним и тем же источником могут совместно использовать данные localStorage этого сайта.

instagram viewer

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

локальное хранилище по сравнению с сеансХранилище

локальное хранилище и хранилище сессий объекты являются частью API веб-хранилища, в котором пары ключ-значение хранятся локально. Все современные браузеры поддерживают их оба. С localStorage срок хранения данных не истекает даже после того, как пользователь закроет свой браузер. Это отличается от sessionStorage, который очищает данные после завершения сеанса страницы. Сеанс страницы заканчивается, когда вы закрываете вкладку или окно.

Код, используемый в этом проекте, доступен в Репозиторий GitHub и вы можете использовать его бесплатно по лицензии MIT. Если вы хотите взглянуть на живую версию проекта счетчика очков, вы можете проверить живую демо.

Как работает локальное хранилище?

Вы можете получить доступ к функциям localStorage через Window.localStorage имущество. Это свойство предоставляет несколько методов, таких как setItem(), getItem() и removeItem(). Вы можете использовать их для хранения, чтения и удаления пар ключ/значение.

Как хранить данные в localStorage

Вы можете хранить данные в localStorage с помощью установитьЭлемент() метод. Этот метод принимает два аргумента: ключ и соответствующее значение.

window.localStorage.setItem('Питон', 'Гвидо ван Россум');

Здесь, Питон это ключ и Гвидо ван Россум это значение. Если вы хотите сохранить массив или объект, вам придется преобразовать его в строку. Вы можете преобразовать массив или объект в строку, используя JSON.stringify() метод.

окно.localStorage.setItem('Python', 'Гвидо ван Россум');
константа студент = {
 имя: "Юврадж",
 Метки: 85,
 предмет: "Машинное обучение"
}
константа баллы = [76, 77, 34, 67, 88];
окно.localStorage.setItem('результат', JSON.stringify (ученик));
окно.localStorage.setItem('отметки', JSON.stringify (баллы));

Как читать данные из локального хранилища

Вы можете прочитать данные из localStorage с помощью получитьэлемент() метод. Этот метод принимает ключ в качестве параметра и возвращает значение в виде строки.

позволять данные1 = окно.localStorage.getItem('Python');
позволять данные2 = окно.localStorage.getItem('результат');
приставка.log (данные1);
приставка.log(данные2);

Это дает следующий результат:

Гвидо ван Россум
{"имя":"Юврадж","Метки":85,"предмет":"Машинное обучение"}

Если вы хотите преобразовать результат из строки в объект, вы должны использовать JSON.parse() метод.

позволять данные2 = JSON.parse(окно.localStorage.getItem('результат'));
приставка.log(данные2);

Как удалить сеансы localStorage

Вы можете удалить сеансы localStorage с помощью команды Убрать предмет() метод. Вам нужно передать ключ в качестве параметра этому методу, чтобы удалить пару ключ-значение. Если ключ существует, метод удалит пару ключ-значение, а если ключ не существует, метод ничего не сделает.

window.localStorage.removeItem('Питон');
window.localStorage.removeItem('С++');

Как очистить все элементы в локальном хранилище

Вы можете очистить все элементы в локальном хранилище с помощью Чисто() метод. Вам не нужно передавать какой-либо параметр этому методу.

окно.localStorage.Чисто();

Как найти длину localStorage

Вы можете найти длину localStorage, используя localStorage.length имущество.

позволять len = localStorage.length;
приставка.log (длина);

Как получить ключ в заданной позиции

Вы можете получить ключ на заданную позицию, используя ключ() метод. Этот метод принимает индекс в качестве параметра.

позволять д = локальное хранилище. ключ (1);
приставка.лог(д);

Метод key() в основном используется для перебора всех элементов в localStorage.

Как перебрать все элементы в localStorage

Вы можете перебрать все элементы в localStorage, используя цикл for.

за (позволять я = 0; я < localStorage.length; я++){
позволять ключ = localStorage.key(i);
позволять значение = localStorage.getItem (ключ);
приставка.log(ключ, значение);
}

Метод key() принимает индекс в качестве аргумента и возвращает соответствующий ключ. Метод getItem() принимает ключ в качестве аргумента и возвращает соответствующее значение. Наконец, console.log() метод печатает пару ключ-значение.

Простой проект JavaScript на основе localStorage

Поняв ее основные методы, вы сможете разработать простой проект JavaScript на основе локального хранилища. В этом проекте вы создадите приложение счетчика очков, которое будет увеличивать и уменьшать количество очков в соответствии с нажатием кнопки. Кроме того, вы реализуете функциональность для очистки всех элементов в localStorage.

Создать index.html а также script.js файл в новую папку и откройте файлы в вашем любимом редакторе кода. Используйте следующий HTML-код, чтобы создать интерфейс для приложения счетчика очков:

<!ДОКТИП HTML>
<HTML>
<тело>
<h1>локальное хранилище в JavaScript</h1>
<кнопка при клике="увеличитьСчетчик()" тип="кнопка">Увеличить счет</button>
<кнопка при клике="уменьшитьСчетчик()" тип="кнопка">Уменьшить балл</button>
<кнопка при клике="очиститьСчетчик()" тип="кнопка">Очистить локальное хранилище</button>
<п>Счет:</п>
<р идентификатор ="счет"></п>
<п>Нажми на "Увеличить счет" кнопка для увеличения количества очков</п>
<п>Нажми на "Уменьшить балл" кнопка, чтобы уменьшить количество очков</п>
<п>Нажми на "Очистить локальное хранилище" кнопка для очистки localStorage</п>
<п>
 Вы можете закрыть вкладку браузера (или окно), а также пытаться опять таки.
 Вы увидите, что данные все еще сохраняются а такжеявляетсянет теряется даже после закрытия
 браузер.
</п>
<источник сценария ="script.js"></script>
</body>
</html>

На этой странице есть три кнопки: Увеличить счет, Уменьшить балл, а также Очистить локальное хранилище. Эти кнопки вызывают увеличитьСчетчик(), уменьшитьСчетчик(), а также очиститьСчетчик() функции соответственно. Используйте следующий код, чтобы добавить функциональные возможности в приложение счетчика очков с помощью JavaScript.

функцияувеличитьсчетчик() {
вар количество = Число(окно.localStorage.getItem("количество"));
 количество += 1;
 window.localStorage.setItem("считать", считать);
 документ.getElementById("счет").innerHTML = количество;
}

увеличитьСчетчик() Функция получает количество с помощью метода getItem(). Он преобразует результат в число, так как getItem() возвращает строку и сохраняет ее в переменной count.

При первом нажатии на Увеличить счет Кнопка будет перед любым вызовом setItem(). Ваш браузер не найдет считать ключ в localStorage, поэтому он вернет нулевое значение. Поскольку функция Number() возвращает 0 для нулевого ввода, ей не требуется какой-либо специальной обработки. Код может безопасно увеличить значение счетчика перед его сохранением и обновлением документа для отображения нового значения.

функцияуменьшитьСчетчик() {
вар количество = Число(окно.localStorage.getItem("количество"));
 количество -= 1;
 window.localStorage.setItem("считать", считать);
 документ.getElementById("счет").innerHTML = количество;
}

уменьшитьСчетчик() функция извлекает и проверяет данные так же, как увеличитьСчетчик() делает. Это уменьшает считать переменная на 1, которая по умолчанию равна 0.

функцияочиститьСчетчик() {
окно.localStorage.Чисто();
 документ.getElementById("счет").innerHTML = "";
}

Наконец, очиститьСчетчик() функция удаляет все данные из localStorage с помощью Чисто() метод.

Делайте больше с localStorage

Объект localStorage имеет несколько методов, включая setItem(), getItem(), removeItem() и clear(). Хотя localStorage прост в использовании, хранить конфиденциальную информацию небезопасно. Но это хороший выбор для разработки проектов, не требующих большого объема памяти и не использующих конфиденциальную информацию.

Хотите создать еще один проект JavaScript на основе localStorage? Вот базовое приложение для списка дел, которое вы можете разработать с помощью HTML, CSS и JavaScript.