0Pricing
JavaScript Academy · Урок

Сохранение и чтение данных

Используйте setItem, getItem и removeItem.

«Сохранение и чтение данных» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Хранилище ключей и значений в браузере

Web Storage предоставляет каждому источнику простое хранилище ключей и значений в браузере. Два API — localStorage и sessionStorage — используют одинаковые методы и хранят только строки.

Запись с помощью setItem

Сохраните значение с помощью setItem(key, value). Оба аргумента должны быть строками.

localStorage.setItem("theme", "dark");
localStorage.setItem("username", "ada");

Чтение с помощью getItem

Получите значение с помощью getItem(key). Если ключ не существует, метод возвращает null, а не undefined.

const theme = localStorage.getItem("theme"); // "dark"
const missing = localStorage.getItem("nope"); // null

Доступ к свойствам

Можно также читать и записывать значения как свойства объекта, но форма с методом понятнее и предотвращает конфликты со встроенными именами. Предпочитайте методы.

localStorage.theme = "light";       // works
console.log(localStorage.theme);    // "light"

Удаление одного элемента

Удалите одну запись с помощью removeItem(key). Удаление несуществующего ключа безопасно и ничего не делает.

localStorage.removeItem("username");

Очистка всего хранилища

clear() удаляет все ключи для текущего источника. Используйте этот метод осторожно: отменить действие невозможно.

localStorage.clear();

Всё является строкой

Хранилище содержит только строки. Числа и логические значения преобразуются в текст. Читайте их обратно как строки и при необходимости преобразуйте.

localStorage.setItem("count", 5);
const n = localStorage.getItem("count"); // "5" (string)
const num = Number(n);                    // 5

Подсчёт ключей

Свойство length сообщает, сколько ключей сохранено, а key(index) возвращает имя ключа в указанной позиции. Это удобно для перебора.

console.log(localStorage.length);
const firstKey = localStorage.key(0);

Перебор содержимого хранилища

Переберите все сохранённые ключи с помощью length и key(). По мере перебора читайте каждое значение.

for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  console.log(k, localStorage.getItem(k));
}

Проверка существования

Поскольку для отсутствующего ключа возвращается null, наличие можно проверить простым сравнением.

if (localStorage.getItem("token") !== null) {
  console.log("user has a token");
}

Только один источник

Хранилище относится к источнику (схема + узел + порт). Один сайт не может читать хранилище другого сайта, а http и https считаются разными источниками.

Быстрая проверка

Чтение и запись Web Storage.

Повторение

Web Storage — это хранилище строковых ключей и значений, отдельное для каждого источника. Используйте setItem, getItem (возвращает null при отсутствии), removeItem и clear. Перебирайте элементы с помощью length и key(i). Всё хранится в виде строк, поэтому преобразуйте типы самостоятельно; хранилище изолировано для каждого источника.

Часто задаваемые вопросы

Урок «Сохранение и чтение данных» бесплатный?

Да — полный текст урока «Сохранение и чтение данных» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Сохранение и чтение данных»?

Используйте setItem, getItem и removeItem. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Сохранение и чтение данных»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Сохранение и чтение данных
  2. localStorage и sessionStorage
  3. Сохранение объектов с помощью JSON
  4. События хранилища и ограничения
← Назад к JavaScript Academy