Хранилище браузера: проверить свой учебный ключ без очистки всего сайта

Назначение

Для знакомства с localStorage достаточно одного специально названного ключа. Не нужно удалять все данные приложения или просматривать значения действующих сессий.

Как это работает

LocalStorage хранит строки в области соответствующего origin. SetItem записывает значение, getItem читает, removeItem удаляет конкретный ключ. Доступ может завершиться ошибкой из-за ограничений среды, поэтому проверку выполняют на отдельной учебной странице.

Пример

const key = "learning-demo:theme";
try {
  localStorage.setItem(key, "dark");
  console.log(localStorage.getItem(key));
  localStorage.removeItem(key);
  console.assert(localStorage.getItem(key) === null);
} catch (error) {
  console.log("Хранилище недоступно:", error.name);
}

Что должно получиться

При доступном хранилище выводится dark, затем удаляется только учебный ключ. Код не вызывает clear и не затрагивает остальные записи. Запускайте его в собственном тестовом origin, а не в консоли чужого сайта.

Граница применения и частая ошибка

LocalStorage не подходит для секретов, которые необходимо скрыть от кода страницы. Наличие ключа не означает вечное хранение: пользователь или браузер может удалить данные. Нельзя считать хранилище серверной базой или проверкой прав.

Самостоятельная проверка

Откройте раздел хранилища в DevTools и вручную найдите только созданный ключ. Измените тестовое значение, перечитайте его и удалите. Сравните два разных порта локального сервера: область origin включает порт.

Связанные материалы

• Локальная страница
• Повторная проверка
• Консоль