Загрузка...

HTML Web Storage

Ранее canvas был пустым битмапом, который красил JavaScript. Этот урок уходит от рисования и знакомит с Web Storage: запоминание небольших строк ключ/значение в браузере через localStorage и sessionStorage. HTML по-прежнему загружает скрипт; скрипт вызывает API хранилища. Практика — сохранить/прочитать и срок жизни — не cookies, IndexedDB и не серверная БД.

Зачем web storage в курсе HTML

Новички хотят, чтобы тема или имя переживали обновление. Web Storage — первый обычный инструмент. После canvas разделение иное: HTML владеет оболочкой; JS — запоминанием строк для этого origin. Хватает setItem, getItem и local vs session.

Прямой ответ

1) localStorage.setItem сохраняет строку. 2) getItem читает её. 3) localStorage до очистки. 4) sessionStorage для вкладки/сессии. 5) Никакой HTML-тег не заменяет API. 6) Только лёгкие предпочтения; объектам нужен JSON, потому что значения — строки.

📊 localStorage vs sessionStorage

Topic localStorage sessionStorage
Typical lifetime Until cleared by user/site/code Until the tab/session ends
Survives browser restart Usually yes (same origin) No
Shared across tabs (same origin) Yes (same storage) No (per tab/session)
API shape setItem / getItem / removeItem Same method names
Beginner fit Theme, language preference One-tab wizard draft, temp flags
This course depth Intro save/read only Intro save/read only

Крошечное демо localStorage

Клик сохраняет приветствие и показывает в абзаце. После обновления getItem всё ещё находит значение для origin — идея «local».

localStorage setItem and getItem

html 
<button id="save" type="button">Remember hi</button>
<p id="out"></p>
<script>
const out = document.getElementById("out");
const saved = localStorage.getItem("greet");
if (saved) {
out.textContent = "Saved: " + saved;
}
document.getElementById("save").onclick = function () {
localStorage.setItem("greet", "hi");
out.textContent = "Saved: " + localStorage.getItem("greet");
};
</script>

Читаем вызовы localStorage

  • localStorage — объект браузера для скриптов страницы
  • setItem кладёт строку под ключ
  • getItem читает её (или null)
  • Показ в p доказывает сохранность без рисования (в отличие от canvas)
  • Ключи и значения — строки
  • Очистка: removeItem или DevTools

sessionStorage для данных только вкладки

Те же имена методов, меньший срок жизни. Удобно для черновика одной вкладки, исчезающего при закрытии.

sessionStorage note

html 
<label for="note">Tab-only note</label>
<input id="note" type="text" />
<button id="keep" type="button">Keep in this tab</button>
<p id="shown"></p>
<script>
const input = document.getElementById("note");
const shown = document.getElementById("shown");
const prior = sessionStorage.getItem("note");
if (prior) {
input.value = prior;
shown.textContent = "Restored in this tab: " + prior;
}
document.getElementById("keep").onclick = function () {
sessionStorage.setItem("note", input.value);
shown.textContent = "Kept: " + sessionStorage.getItem("note");
};
</script>

Читаем идею sessionStorage

  • Тот же паттерн setItem/getItem
  • Восстанавливается при обновлении в той же вкладке
  • Другая вкладка обычно не видит те же данные
  • Всё ещё строки; не для паролей
  • Выбирайте local vs session по сроку жизни
  • Дальше: geolocation

Что хранить

  • Тема/язык: localStorage
  • Флаг мастера только этой вкладки: sessionStorage
  • Секреты: ни то ни другое
  • Большие файлы: за пределами этого интро
  • Серверные аккаунты: бэкенд
  • Рисование пикселей: был canvas

Практика — запомнить предпочтение

  1. Вставьте демо localStorage и сохраните.
  2. Обновите; проверьте восстановление.
  3. Проверьте sessionStorage в той же вкладке.
  4. Закройте вкладку и откройте снова.
  5. Сохраните число — вернётся строкой.
  6. Предложение: canvas красит пиксели; Web Storage сохраняет строки.
  7. Впереди: geolocation.

Лёгкие ошибки

  • Ждать тег storage
  • Хранить пароли
  • Забывать, что это строки (JSON для объектов)
  • Путать с canvas или cookies
  • Считать sessionStorage вечным
  • Предполагать общий доступ с другими устройствами
  • Считать интро полным курсом БД

Итог

  • Web Storage — JS API: localStorage и sessionStorage
  • setItem/getItem сохраняют строки для вашего origin
  • local до очистки; session для вкладки/сессии
  • Для лёгких настроек — не для секретов
  • Canvas был пикселями; этот урок — запомненные строки
  • Далее: HTML geolocation

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
5
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 63 из 68
Html Урок