логотип PurpleSchool
логотип PurpleSchool

localStorage в JavaScript

Автор

Дмитрий Фандорин

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

Пример:

// Запись значения в localStorage
localStorage.setItem('username', 'John');

// Чтение значения из localStorage
const username = localStorage.getItem('username');

// Удаление значения из localStorage
localStorage.removeItem('username');

// Очистка всего хранилища
localStorage.clear();

Форма записи

Запись

Для записи значения в localStorage используйте метод setItem(key, value), где key - это ключ, а value - это значение, которое нужно сохранить.

Пример:

localStorage.setItem('username', 'John');

Чтение

Для чтения значения из localStorage используйте метод getItem(key), где key - это ключ, по которому нужно найти значение.

Пример:

const username = localStorage.getItem('username');

Удаление

Для удаления значения из localStorage используйте метод removeItem(key), где key - это ключ, который нужно удалить.

Пример:

localStorage.removeItem('username');

Очистка хранилища

Для очистки всего хранилища localStorage используйте метод clear().

Пример:

localStorage.clear();

Количество полей в хранилище

Для получения количества полей в хранилище localStorage используйте свойство length.

Пример:

const fieldsCount = localStorage.length;

Получение ключа по индексу

Для получения ключа по индексу используйте метод key(index), где index - это индекс ключа, который нужно получить.

Пример:

const firstKey = localStorage.key(0);

События

localStorage генерирует события, когда данные изменяются или когда хранилище очищается. Вы можете использовать addEventListener() для регистрации обработчиков событий.

Пример:

window.addEventListener('storage', (event) => {
  console.log(`Key ${event.key} was modified from ${event.oldValue} to ${event.newValue}`);
});

Заключение

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

Стрелочка влевоwindow.matchMedia в JavaScriptGeolocation API в JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает метод match() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод find() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний