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

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile