IGS

IGS
Вернуться к Курс

Базовый курс JavaScript

0% Завершено
0/25 Шагов
  1. 1) console.log(), Переменные
  2. 2) Типы данных, Операторы
  3. 3) Условные конструкции
  4. 4) Объекты, массивы
  5. 5) Циклы
  6. 6) Функции. Диалоговые окна
  7. 7) Результат функции. Стрелочная фукция
  8. 8) callback, find, filter
  9. 9) Введение в методы и свойства
  10. 10) Методы строк и чисел
  11. 11) Методы массивов
  12. 12) Работа с DOM
  13. 13) Элементы,HTMLCollection и NodeList
  14. 14) Создание, добавление, замена и удаление элементов. Управление атрибутами элементов. Свойство className
  15. 15) addEventListener()
  16. 16) window, event
  17. 17) Работа с формами
  18. 18) Таймеры. this
  19. JSON
  20. 19) Обработка ошибок
  21. 20) JSON, Promise, async и await
  22. 21) callBack()
  23. 22) fetch
  24. 7) Взаимодействие с DOM (Document Object Model)
  25. 23) LocalStorage, sessionStorage
Базовый курс JavaScript 23) LocalStorage, sessionStorage
В прогрессе
Урок 25 из 25
В прогрессе

23) LocalStorage, sessionStorage

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

До localStorage разработчики часто использовали cookies, но они были не очень удобны: мало места и постоянная передача данных туда-сюда. LocalStorage появился, чтобы сделать процесс более простым и эффективным.

Как хранятся данные в localStorage

В localStorage данные хранятся в формате пары ключ-значение, причём и ключ, и значение всегда сохраняются в виде строк. Даже если вы сохраните числовое или логическое значение, оно автоматически преобразуется в строку.

Сохраняем число или булевскую переменную:

				
					localStorage.setItem('number', 123);
localStorage.setItem('boolean', true);

При извлечении в обоих случаях будет строка:

				
					console.log(localStorage.getItem('number')); // "123"
console.log(localStorage.getItem('boolean')); // "true"

Если вам нужно сохранить более сложные структуры данных, например, объекты или массивы, используйте JSON.stringify() для их преобразования в строку перед сохранением и JSON.parse() для преобразования обратно после извлечения:

				
					const user = {
  name: "Alex",
  age: 25
};

// Сохранение объекта в localStorage
localStorage.setItem('user', JSON.stringify(user));

// Извлечение объекта из localStorage
const retrievedUser = JSON.parse(localStorage.getItem('user'));
console.log(retrievedUser.name); // "Alex"

Объекты хранилища localStorage и sessionStorage предоставляют одинаковые методы и свойства:

  • setItem(key, value) – сохранить пару ключ/значение.
  • getItem(key) – получить данные по ключу key.
  • removeItem(key) – удалить данные с ключом key.
  • clear() – удалить всё.
  • key(index) – получить ключ на заданной позиции.
  • length – количество элементов в хранилище.

 

sessionStorage

Объект sessionStorage используется гораздо реже, чем localStorage.

Свойства и методы такие же, но есть существенные ограничения:

  • sessionStorage существует только в рамках текущей вкладки браузера.
    • Другая вкладка с той же страницей будет иметь другое хранилище.
    • Но оно разделяется между ифреймами на той же вкладке (при условии, что они из одного и того же источника).
  • Данные продолжают существовать после перезагрузки страницы, но не после закрытия/открытия вкладки.

Событие storage

Когда обновляются данные в localStorage или sessionStorage, генерируется событие storage со следующими свойствами:

  • key – ключ, который обновился (null, если вызван .clear()).
  • oldValue – старое значение (null, если ключ добавлен впервые).
  • newValue – новое значение (null, если ключ был удалён).
  • url – url документа, где произошло обновление.
  • storageArea – объект localStorage или sessionStorage, где произошло обновление.