Web Storage Explained - Как использовать localStorage и sessionStorage в проектах JavaScript - Фул Фронт Дев

Содержание

Что такое объект хранения сеансов?
Что такое объект локального хранилища?
Как получить доступ к объектам сеанса и локального хранилища
Что такое встроенные интерфейсы веб-хранилища?
Время практиковаться с веб-хранилищем 🤸‍♂️🏋️‍♀️
Как вы решили упражнение ”Веб-хранилище”?
Как продолжить практику с веб-хранилищем 🧗‍♀️🚀
Веб-хранилище против файлов cookie: В чем разница?
Завершение

Web Storage - это то, что браузеры JavaScript API предоставляют для локального и безопасного хранения данных в браузере пользователя.

Сессия и локальное хранилище - два основных типа веб-хранилищ. Они похожи на обычные объекты свойств, но сохраняются (не исчезают) при перезагрузке веб-страницы.

Цель этой статьи - показать вам, как именно работают эти два объекта хранения в JavaScript. Мы также используем упражнение со списком дел, чтобы попрактиковаться в использовании веб-хранилищ в проекте веб-приложения.

Без лишних слов, давайте обсудим хранение сессий.

Что такое объект хранения сеансов?

Объект хранения сеансов (window.sessionStorage) хранит данные, которые сохраняются только в течение одной сессии открытой вкладки.

Другими словами, все, что хранится в объекте window.sessionStorage, не исчезнет при перезагрузке веб-страницы. Вместо этого компьютер удалит сохраненные данные только тогда, когда пользователь закроет вкладку или окно браузера.

Обратите внимание на следующее:

Данные, хранящиеся в хранилище сеансов, являются первичными для origin и первичными для экземпляра. Другими словами, объект http://freecodecamp.com sessionStorage отличается от объекта https://freecodecamp.com sessionStorage, потому что эти два источника используют разные схемы (http и https).
Per-instance означает per-window или per-tab. Другими словами, срок жизни объекта `sessionStorage истекает, как только пользователь закрывает экземпляр (окно или вкладку).
Браузеры создают уникальную сессию страницы для каждой новой вкладки или окна. Поэтому пользователи могут запускать несколько экземпляров приложения, не вмешиваясь в работу хранилища сеансов каждого экземпляра. (Примечание: Cookies не очень хорошо поддерживают запуск нескольких экземпляров одного и того же приложения. Такая попытка может привести к ошибкам типа двойная запись брони.)
Хранилище сеансов является свойством глобального объекта Window. Поэтому sessionStorage.setItem() эквивалентно window.sessionStorage.setItem().

Что такое объект локального хранилища?

Объект локального хранилища (window.localStorage) хранит данные, которые сохраняются, даже когда пользователь закрывает вкладку (или окно) браузера.

Другими словами, все, что хранится в объекте window.localStorage, не исчезнет при перезагрузке или повторном открытии веб-страницы или при закрытии пользователем браузера. У этих данных нет срока годности. Браузеры никогда не очищают их автоматически.

Компьютер удалит содержимое объекта window.localStorage только в следующих случаях:

Когда содержимое очищается с помощью JavaScript
Когда очищается кэш браузера

** Обратите внимание на следующее:**

Лимит хранения объекта window.localStorage больше, чем window.sessionStorage.
Данные, хранящиеся в локальном хранилище, являются per-origin. Другими словами, объект localStorage в http://freecodecamp.com отличается от объекта localStorage в https://freecodecamp.com, потому что эти два источника используют разные схемы (http и https).
Существуют несоответствия в том, как браузеры обрабатывают локальное хранение документов, не обслуживаемых с веб-сервера (например, страниц со схемой URL file:). Поэтому объект localStorage может вести себя по-разному в разных браузерах при использовании не-HTTP URL, например file:///document/on/users/local/system.html.
Локальное хранилище является свойством глобального объекта Window. Поэтому localStorage.setItem() эквивалентно window.localStorage.setItem().

Как получить доступ к объектам сеанса и локального хранилища

Вы можете получить доступ к двум веб-хранилищам, используя:

Используя ту же технику, что и для [доступа к обычным объектам JavaScript] (https://codesweetly.com/javascript-properties-object#how-to-access-an-objects-value).
Используя встроенные интерфейсы веб-хранилища

Например, рассмотрим приведенный ниже фрагмент:

sessionStorage.bestColor = 'Green';
sessionStorage['bestColor'] = 'Green';
sessionStorage.setItem('bestColor', 'Green');

Три приведенных выше оператора делают одно и то же - устанавливают значение bestColor. Но третья строка является более предпочтительной, поскольку использует метод веб-хранилища setItem().

Совет: лучше использовать встроенные интерфейсы веб-хранилища, чтобы избежать подводных камней при использовании объектов в качестве хранилищ ключей/значений.

Подробнее о встроенных интерфейсах веб-хранилища мы поговорим ниже.

Что такое встроенные интерфейсы веб-хранилища?

Встроенные интерфейсы веб-хранилища - это рекомендуемые инструменты для чтения и манипулирования объектами sessionStorage и localStorage` браузера.

Шесть (6) встроенных интерфейсов - это:

setItem()
ключ()
getItem()
длина
removeItem()
clear()

Давайте обсудим каждый из них.

Что такое метод `setItem()` веб-хранилища?

Метод setItem() сохраняет свои аргументы ключ и значение в указанном объекте веб-хранилища.

Синтаксис метода `setItem()`.

Метод setItem() принимает два обязательных [аргумента] (https://codesweetly.com/javascript-arguments). Вот синтаксис:

webStorageObject.setItem(key, value);

webStorageObject представляет объект хранения (localStorage или essionStorage), которым вы хотите манипулировать.
key - это первый аргумент, принимаемый setItem(). Это обязательный строковый аргумент, представляющий имя свойства веб-хранилища, которое вы хотите создать или обновить.
value - второй аргумент, принимаемый setItem(). Это обязательный строковый аргумент, указывающий значение ключа, который вы создаете или обновляете.

Примечание:

Аргументы ключ и значение всегда являются строками.
Предположим, что в качестве ключа или значения вы указываете целое число. В этом случае браузеры автоматически преобразуют их в строки.
Функция setItem() может выдать сообщение об ошибке, если объект хранения переполнен.

Пример 1: Как хранить данные в объекте хранения сессии

Вызовите метод setItem() объекта `sessionStorage.
Укажите имя и значение данных, которые вы хотите сохранить.

// Храним цвет: "Розовый" в объекте хранения сессии браузера:
sessionStorage.setItem('color', 'Pink');

// Выведите объект хранилища сеансов в консоль:
console.log(sessionStorage);

// Вызов, приведенный выше, вернет:
{
	цвет: 'Розовый';
}

Попробуй отредактировать

Примечание: Хранилище сеансов вашего браузера может содержать дополнительные данные, если оно уже использует объект хранения для хранения информации.

Пример 2: Как хранить данные в локальном объекте хранения

Вызовите метод setItem() объекта localStorage.
Укажите имя и значение данных, которые вы хотите сохранить.

// Храним цвет: "Розовый" в локальном хранилище браузера:
localStorage.setItem('color', 'Pink');

// Выведите объект локального хранилища в консоль:
console.log(localStorage);

// Вызов, приведенный выше, вернет:
{
	цвет: 'Розовый';
}

Попробуй отредактировать

Примечание:

Локальное хранилище браузера может содержать дополнительные данные, если оно уже использует объект хранения для хранения информации.
Лучше всего сериализовать объекты перед их сохранением в локальном или сеансовом хранилище. В противном случае компьютер будет хранить объект как "[объект Object]".

Пример 3: Браузеры используют `"[объект Object]"` для несериализованных объектов в веб-хранилище

// Храним объект myBio в объекте хранилища сессии браузера:
sessionStorage.setItem("myBio", { name: "Oluwatobi" });

// Выведите объект хранилища сессий в консоль:
console.log(sessionStorage);

// Вызов, приведенный выше, вернет:
{myBio: "[объект Object]", length: 1}

Попробуйте отредактировать его

Видно, что компьютер сохранил объект как "[object Object]", потому что мы не сериализовали его.

Пример 4: Как хранить сериализованные объекты в веб-хранилище

// Храним объект myBio в объекте хранилища сессии браузера:
sessionStorage.setItem("myBio", JSON.stringify({ name: "Oluwatobi" }));

// Выведите объект хранилища сессии в консоль:
console.log(sessionStorage);

// Вышеприведенное обращение вернет:
{myBio: '{"name": "Oluwatobi"}', length: 1}

Попробуйте отредактировать его

Мы использовали JSON.stringify() для преобразования объекта в JSON перед сохранением его в веб-хранилище.

Совет: Узнайте как конвертировать JSON в объекты JavaScript.

Что такое метод `key()` веб-хранилища?

Метод key() извлекает имя (ключ) указанного элемента веб-хранилища.

Синтаксис метода `key()`.

Метод key() принимает один обязательный аргумент. Вот синтаксис:

webStorageObject.key(index);

webStorageObject представляет объект хранения (localStorage или sessionStorage), ключ которого вы хотите получить.
index является обязательным аргументом. Он представляет собой целое число, указывающее индекс элемента, ключ которого вы хотите получить.

Пример 1: Как получить имя элемента в объекте хранилища сессий

Вызовите метод key() объекта `sessionStorage.
Укажите индекс элемента, название которого вы хотите получить.

// Сохраняем цвет автомобиля: "Розовый" в объекте хранения сессии браузера:
sessionStorage.setItem('carColor', 'Pink');

// Сохраняем pcColor: "Yellow" в объекте хранения сессии:
sessionStorage.setItem('pcColor', 'Yellow');

// Сохраните laptopColor: "White" в объекте хранения сессии:
sessionStorage.setItem('laptopColor', 'White');

// Получите имя элемента с индексом 1:
sessionStorage.key(1);

Попробуй отредактировать

Важно: user-agent определяет порядок элементов в хранилище сеансов. Другими словами, вывод key() может отличаться в зависимости от того, как пользователь-агент упорядочивает элементы веб-хранилища. Поэтому не стоит полагаться на то, что key() вернет постоянное значение.

Пример 2: Как получить имя элемента в локальном объекте хранилища

Вызовите метод localStorage key().
Укажите индекс элемента, имя которого вы хотите получить.

// Храним carColor: "Pink" в локальном хранилище браузера:
localStorage.setItem('carColor', 'Pink');

// Сохраняем pcColor: "Yellow" в локальном объекте хранения:
localStorage.setItem('pcColor', 'Yellow');

// Сохраните laptopColor: "White" в локальном объекте хранения:
localStorage.setItem('laptopColor', 'White');

// Получите имя элемента с индексом 1:
localStorage.key(1);

Попробуйте отредактировать его

Важно: Пользователь-агент определяет порядок элементов в локальном хранилище. Другими словами, вывод key() может отличаться в зависимости от того, как пользователь-агент упорядочивает элементы веб-хранилища. Поэтому не стоит полагаться на то, что key() вернет постоянное значение.

Что представляет собой метод `getItem()` веб-хранилища?

Метод getItem() извлекает значение указанного элемента веб-хранилища.

Синтаксис метода `getItem()`.

Метод getItem() принимает один обязательный аргумент. Вот синтаксис:

webStorageObject.getItem(key);

webStorageObject представляет объект хранения (localStorage или sessionStorage), элемент которого вы хотите получить.
ключ является обязательным аргументом. Он представляет собой строку, указывающую имя свойства веб-хранилища, значение которого вы хотите получить.

Пример 1: Как получить данные из объекта хранилища сеансов

Вызовите метод getItem() объекта `sessionStorage.
Укажите имя данных, которые вы хотите получить.

// Сохраняем цвет: "Розовый" в объекте хранилища сессии браузера:
sessionStorage.setItem('color', 'Pink');

// Получаем значение цвета из хранилища сессии:
sessionStorage.getItem('color');

// Вызов, приведенный выше, вернет:
('Pink');

Попробуйте отредактировать его

Пример 2: Как получить данные из локального объекта хранилища

Вызовите метод localStorage getItem().
Укажите имя данных, которые вы хотите получить.

// Сохраняем цвет: "Розовый" в локальном хранилище браузера:
localStorage.setItem('color', 'Pink');

// Получите значение цвета из локального хранилища:
localStorage.getItem('color');

// Вызов, приведенный выше, вернет:
('Pink');

Попробуйте отредактировать его

Примечание: Метод getItem() вернет null, если его аргумент не существует в указанном веб-хранилище.

Что такое свойство веб-хранилища `length`?

Свойство length возвращает количество свойств в указанном веб-хранилище.

Синтаксис свойства `length`.

Ниже приведен синтаксис свойства length:

webStorageObject.length;

webStorageObject представляет объект хранения (localStorage или sessionStorage), длину которого вы хотите проверить.

Пример 1: Как проверить количество элементов в объекте хранения сессии

Вызовите свойство length объекта `sessionStorage.

// Сохраняем цвет автомобиля: "Розовый" в объекте хранения сессии браузера:
sessionStorage.setItem('carColor', 'Pink');

// Сохраняем pcColor: "Yellow" в объекте хранения сессии:
sessionStorage.setItem('pcColor', 'Yellow');

// Сохраните laptopColor: "White" в объекте хранения сессии:
sessionStorage.setItem('laptopColor', 'White');

// Проверяем количество элементов в хранилище сессии:
sessionStorage.length;

// Вызов выше может вернуть:
3;

Попробуйте отредактировать его

Примечание: Вызов sessionStorage.length может вернуть значение больше, чем 3`, если хранилище сессий вашего браузера уже содержит некоторую информацию.

Пример 2: Как проверить количество элементов в объекте локального хранилища

Вызовите свойство localStorage length.

// Сохраняем carColor: "Pink" в локальном хранилище браузера:
localStorage.setItem('carColor', 'Pink');

// Сохраняем pcColor: "Yellow" в локальном объекте хранения:
localStorage.setItem('pcColor', 'Yellow');

// Сохраните laptopColor: "White" в локальном объекте хранения:
localStorage.setItem('laptopColor', 'White');

// Проверяем количество элементов в локальном хранилище:
localStorage.length;

// Вызовe может вернуться:
3;

Попробуй отредактировать

Примечание: Вызов localStorage.length может вернуть значение больше, чем 3, если локальное хранилище вашего браузера уже содержит некоторую сохраненную информацию.

Что такое метод `removeItem()` веб-хранилища?

Метод removeItem() удаляет свойство из указанного веб-хранилища.

Синтаксис метода `removeItem()`.

Метод removeItem() принимает один обязательный аргумент. Вот синтаксис:

webStorageObject.removeItem(key);

webStorageObject представляет объект хранения (localStorage или sessionStorage), элемент которого вы хотите удалить.
ключ является обязательным аргументом. Он представляет собой строку, указывающую имя свойства веб-хранилища, которое вы хотите удалить.

Пример 1: Как удалить данные из объекта хранения сеансов

Вызовите метод removeItem() объекта `sessionStorage.
Укажите имя данных, которые вы хотите удалить.

// Сохраните значение carColor: "Pink" в объекте хранения сессии браузера:
sessionStorage.setItem('carColor', 'Pink');

// Сохраняем pcColor: "Yellow" в объекте хранения сессии:
sessionStorage.setItem('pcColor', 'Yellow');

// Сохраните laptopColor: "White" в объекте хранения сессии:
sessionStorage.setItem('laptopColor', 'White');

// Удалите элемент pcColor из хранилища сессии:
sessionStorage.removeItem('pcColor');

// Убедитесь, что элемент pcColor все еще существует в хранилище сеанса:
sessionStorage.getItem('pcColor');

// Вызов выше вернет:
null;

Попробуйте отредактировать его

Примечание: Метод removeItem() ничего не сделает, если его аргумент не существует в хранилище сессии.

Пример 2: Как удалить данные из объекта локального хранилища

Вызовите метод localStorage removeItem().
Укажите имя данных, которые вы хотите удалить.

// Храним carColor: "Pink" в локальном хранилище браузера:
localStorage.setItem('carColor', 'Pink');

// Сохраняем pcColor: "Yellow" в локальном объекте хранения:
localStorage.setItem('pcColor', 'Yellow');

// Сохраните laptopColor: "White" в локальном объекте хранения:
localStorage.setItem('laptopColor', 'White');

// Удалите элемент pcColor из локального хранилища:
localStorage.removeItem('pcColor');

// Убедитесь, что элемент pcColor все еще существует в локальном хранилище:
localStorage.getItem('pcColor');

// Вызов выше вернет:
null;

Попробуйте отредактировать его

Примечание: Метод removeItem() ничего не сделает, если его аргумент не существует в локальном хранилище.

Что такое метод веб-хранилища `clear()`?

Метод clear() очищает (удаляет) все элементы в указанном веб-хранилище.

Синтаксис метода `clear()`.

Метод clear() не принимает никаких аргументов. Вот синтаксис:

webStorageObject.clear();

webStorageObject представляет объект хранения (localStorage или sessionStorage), элементы которого вы хотите очистить.

Пример 1: Как очистить все элементы из объекта хранения сессии

Вызовите метод clear() объекта `sessionStorage.

// Сохраните значение carColor: "Pink" в объекте хранения сессии браузера:
sessionStorage.setItem('carColor', 'Pink');

// Сохраняем pcColor: "Yellow" в объекте хранения сессии:
sessionStorage.setItem('pcColor', 'Yellow');

// Сохраните laptopColor: "White" в объекте хранения сессии:
sessionStorage.setItem('laptopColor', 'White');

// Очистите все элементы из хранилища сессии:
sessionStorage.clear();

// Убедитесь, что в хранилище сеансов все еще содержится какой-либо элемент:
console.log(sessionStorage);

// Вызов, приведенный выше, вернет:
{
	length: 0;
}

Попробуй отредактировать

Пример 2: Как очистить все элементы из объекта локального хранилища

Вызовите метод clear() объекта localStorage.

// Сохраняем carColor: "Pink" в локальном хранилище браузера:
localStorage.setItem('carColor', 'Pink');

// Сохраняем pcColor: "Yellow" в локальном объекте хранения:
localStorage.setItem('pcColor', 'Yellow');

// Сохраните laptopColor: "White" в локальном объекте хранения:
localStorage.setItem('laptopColor', 'White');

// Очистите все элементы из локального хранилища:
localStorage.clear();

// Убедитесь, что локальное хранилище все еще содержит какой-либо элемент:
console.log(localStorage);

// Вызов, приведенный выше, вернет:
{
	length: 0;
}

Попробуй отредактировать

Теперь, когда мы знаем, что такое веб-хранилище и как к нему обращаться, мы можем попрактиковаться в его использовании в проекте JavaScript.

Время практиковаться с веб-хранилищем 🤸‍♂️🏋️‍♀️

Рассмотрим следующее приложение To-Do List:

Проблема

Проблема с приложением To-Do List app заключается в следующем:

Задания исчезают при обновлении веб-страницы.

Ваше упражнение

Используйте соответствующие API-интерфейсы Web Storage для выполнения следующих задач:

Предотвратите исчезновение элементов дел на панели сеансов при перезагрузке браузера.
Предотвратить исчезновение элементов дел раздела Local при перезагрузке или закрытии вкладки (или окна) браузера.
Автоматическое отображение ранее добавленных задач раздела ”Сессия” при перезагрузке страницы.
Автоматическое отображение ранее добавленных задач раздела Local при перезагрузке страницы (или повторном открытии браузера).

Бонусное упражнение

Используйте консоль браузера, чтобы:

Проверить количество элементов в объекте хранения сеанса браузера.
Отобразить имя нулевого индексного элемента локального хранилища.
Удалите все элементы в хранилище сеансов браузера.

Упражнение по работе с веб-хранилищем

Примечание: Вы получите гораздо больше пользы от этого урока, если попробуете выполнить упражнение самостоятельно.

Если вы застряли, не отчаивайтесь. Вместо этого просмотрите урок и попробуйте выполнить упражнение еще раз.

После того как вы попробуете сделать все возможное (вы только обманете себя, если не сделаете этого!), мы сможем обсудить, как я подошел к выполнению упражнения ниже.

Как вы решили упражнение ”Веб-хранилище”?

Ниже приведены возможные способы выполнения упражнения.

Как предотвратить исчезновение элементов панели ”Хранилище сеансов” при перезагрузке страницы

Всякий раз, когда пользователи нажимают кнопку ”Добавить задачу”,

Получите содержимое существующего хранилища сессий, если таковое имеется. В противном случае возвращается пустой массив.
Объединить существующие пункты дел с новыми данными пользователя.
Добавьте новый список дел в объект хранилища сеанса браузера.

Вот код:

sessionAddTaskBtn.addEventListener('click', () => {
	// Получаем содержимое существующего хранилища сессий, если оно есть. В противном случае возвращается пустой массив:
	const currentTodoArray = JSON.parse(sessionStorage.getItem('codesweetlyStore')) || [];

	// Объединяем currentTodoArray с новым вводом пользователя:
	const newTodoArray = [...currentTodoArray, { checked: false, text: sessionInputEle.value }];

	// Добавляем newTodoArray в объект хранилища сессии:
	sessionStorage.setItem('codesweetlyStore', JSON.stringify(newTodoArray));

	const todoLiElements = createTodoLiElements(newTodoArray);
	sessionTodosContainer.replaceChildren(...todoLiElements);
	sessionInputEle.value = '';
});

Попробуйте отредактировать его

Примечание: Три точки (...) перед переменной currentTodoArray представляют собой оператор spread operator. Мы использовали его в объекте newTodoArray для копирования элементов currentTodoArray в newTodoArray.

Как предотвратить исчезновение элементов панели локального хранилища при перезагрузке или повторном открытии страницы

Получите содержимое существующего локального хранилища, если оно есть. В противном случае возвращается пустой массив.
Объединить существующие пункты дел с новыми данными пользователя.
Добавьте новый список дел в локальное хранилище браузера.

Вот код:

localAddTaskBtn.addEventListener('click', () => {
	// Получаем содержимое существующего локального хранилища, если оно есть. В противном случае возвращается пустой массив:
	const currentTodoArray = JSON.parse(localStorage.getItem('codesweetlyStore')) || [];

	// Объединяем currentTodoArray с новым вводом пользователя:
	const newTodoArray = [...currentTodoArray, { checked: false, text: localInputEle.value }];

	// Добавляем newTodoArray в локальный объект хранилища:
	sessionStorage.setItem('codesweetlyStore', JSON.stringify(newTodoArray));

	const todoLiElements = createTodoLiElements(newTodoArray);
	localTodosContainer.replaceChildren(...todoLiElements);
	localInputEle.value = '';
});

Попробуйте отредактировать его

Примечание: Оператор localTodosContainer.replaceChildren(...todoLiElements) указывает браузеру заменить текущие дочерние элементы localTodosContainer на список <li> в массиве todoLiElements.

Как автоматически отображать ранее добавленные задачи раздела ”Сессия” при перезагрузке страницы

Каждый раз, когда пользователь перезагружает страницу,

Получите содержимое существующего хранилища сессий, если таковое имеется. В противном случае возвращается пустой массив.
Используйте полученное содержимое для создания элементов <li>.
Заполните пространство отображения задач элементами <li>.

Вот код:

window.addEventListener('load', () => {
	// Получаем содержимое существующего хранилища сессий, если оно есть. В противном случае возвращается пустой массив:
	const sessionTodoArray = JSON.parse(sessionStorage.getItem('codesweetlyStore')) || [];

	// Используем полученный массив sessionTodoArray для создания элементов <li>:
	const todoLiElements = createTodoLiElements(sessionTodoArray);

	// Заполняем пространство отображения задач элементами todoLiElements:
	sessionTodosContainer.replaceChildren(...todoLiElements);
});

Попробуйте отредактировать его

Как автоматически отобразить Locвсе ранее добавленные задания раздела при перезагрузке или повторном открытии страницы

Каждый раз, когда пользователи перезагружают или открывают страницу,

Получить содержимое существующего локального хранилища, если оно есть. В противном случае возвращается пустой массив.
Используйте полученное содержимое для создания элементов <li>.
Заполните пространство отображения задач элементами <li>.

Вот код:

window.addEventListener('load', () => {
	// Получаем содержимое существующего локального хранилища, если оно есть. В противном случае возвращается пустой массив:
	const localTodoArray = JSON.parse(localStorage.getItem('codesweetlyStore')) || [];

	// Используем полученный массив localTodoArray для создания элементов <li>:
	const todoLiElements = createTodoLiElements(localTodoArray);

	// Заполняем пространство отображения задач элементами todoLiElements:
	localTodosContainer.replaceChildren(...todoLiElements);
});

Попробуйте отредактировать его

Как проверить общее количество элементов в хранилище сессии браузера

Используйте свойство length сессионного хранилища следующим образом:

console.log(sessionStorage.length);

Попробуйте отредактировать его

Как отобразить имя нулевого индексного элемента локального хранилища

Используйте метод key() локального хранилища следующим образом:

console.log(localStorage.key(0));

Попробуйте отредактировать его

Как очистить хранилище сеансов браузера

Используйте метод clear() хранилища сеансов следующим образом:

sessionStorage.clear();

Как продолжить практику с веб-хранилищем 🧗‍♀️🚀

Приложение ”Дела” все еще имеет большой потенциал. Например, вы можете:

Преобразовать его в приложение на React TypeScript.
Сделать его доступным для клавиатуры.
Позволить пользователям удалять или редактировать отдельные задачи.
Позволить пользователям отмечать конкретные задачи звездочками (пометить как важные).
Позволить пользователям указывать сроки выполнения.

Итак, не стесняйтесь продолжать развивать то, что мы создали в этом уроке, чтобы лучше понять объекты веб-хранилища.

Вот, например, моя попытка [сделать две панели функциональными] (https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/to-do-app/js-ax8tvk):

Прежде чем мы завершим наше обсуждение, вы должны знать некоторые различия между веб-хранилищем и cookies. Поэтому давайте поговорим об этом ниже.

Веб-хранилище и файлы cookie - это два основных способа локального хранения данных в браузере пользователя. Но работают они по-разному. Ниже приведены основные различия между ними.

Предел хранения

Куки: Имеют максимальный [лимит хранения] 4 килобайта (https://docs.devexpress.com/AspNet/11912/common-concepts/cookies-support#browser-limitations).

Веб-хранилище: Может хранить гораздо больше, чем 4 килобайта данных. Например, Safari 8 может хранить до 5 МБ, а Firefox 34 - до 10 МБ.

Передача данных на сервер

Куки: Передают данные на сервер каждый раз, когда браузеры отправляют HTTP-запросы на веб-сервер.

Веб-хранилище: Никогда не передает данные на сервер.

Примечание: Передача данных на сервер является пустой тратой пропускной способности пользователей, если такая информация нужна только клиенту (браузеру), а не серверу.

Слабая целостность и конфиденциальность

Куки: Страдают от проблем слабой целостности и слабой конфиденциальности.

Веб-хранилище: Не страдает от проблем слабой целостности и конфиденциальности, поскольку хранит данные по происхождению.

Свойства

Куки: Куки - это свойство объекта Документ.

Веб-хранилище: Веб-хранилище является свойством объекта Окно.

Истечение срока действия

Куки: Вы можете указать дату истечения срока действия куки.

Веб-хранилище: Браузеры определяют дату истечения срока действия веб-хранилища.

Извлечение индивидуальных данных

Куки: Не существует способа извлечения отдельных данных. Чтобы прочитать какую-то отдельную информацию, всегда приходится вызывать все данные.

Веб-хранилище: Вы можете выбрать конкретные данные, которые хотите получить.

Синтаксис для хранения данных

Кии:

document.cookie = 'key=value';

Веб-хранилище:

webStorageObject.setItem(key, value);

Синтаксис для чтения данных

Куки:

document.cookie;

Веб-хранилище:

webStorageObject.getItem(key);

Синтаксис для удаления данных

Куки:

document.cookie = 'key=; expires=Thu, 01 May 1930 00:00:00 UTC';

Приведенный выше фрагмент удаляет cookie, присваивая свойству key пустое значение и устанавливая прошедшую дату истечения срока действия.

Веб-хранилище:

webStorageObject.removeItem(key);

Завершение

В этой статье мы рассмотрели, как использовать веб-хранилище и его встроенные интерфейсы. Мы также использовали проект списка дел, чтобы попрактиковаться в использовании local и объекты хранения сеансов для локального и безопасного хранения данных в браузерах пользователей.

Спасибо за чтение!

Web Storage Explained - Как использовать localStorage и sessionStorage в проектах JavaScript

Поделиться:

Что такое объект хранения сеансов?

Что такое объект локального хранилища?

Как получить доступ к объектам сеанса и локального хранилища

Что такое встроенные интерфейсы веб-хранилища?

Что такое метод setItem() веб-хранилища?

Синтаксис метода setItem().

Пример 1: Как хранить данные в объекте хранения сессии

Пример 2: Как хранить данные в локальном объекте хранения

Пример 3: Браузеры используют "[объект Object]" для несериализованных объектов в веб-хранилище

Пример 4: Как хранить сериализованные объекты в веб-хранилище

Что такое метод key() веб-хранилища?

Синтаксис метода key().

Пример 1: Как получить имя элемента в объекте хранилища сессий

Пример 2: Как получить имя элемента в локальном объекте хранилища

Что представляет собой метод getItem() веб-хранилища?

Синтаксис метода getItem().

Пример 1: Как получить данные из объекта хранилища сеансов

Пример 2: Как получить данные из локального объекта хранилища

Что такое свойство веб-хранилища length?

Синтаксис свойства length.

Пример 1: Как проверить количество элементов в объекте хранения сессии

Пример 2: Как проверить количество элементов в объекте локального хранилища

Что такое метод removeItem() веб-хранилища?

Синтаксис метода removeItem().

Пример 1: Как удалить данные из объекта хранения сеансов

Пример 2: Как удалить данные из объекта локального хранилища

Что такое метод веб-хранилища clear()?

Синтаксис метода clear().

Пример 1: Как очистить все элементы из объекта хранения сессии

Пример 2: Как очистить все элементы из объекта локального хранилища

Время практиковаться с веб-хранилищем 🤸‍♂️🏋️‍♀️

Проблема

Ваше упражнение

Бонусное упражнение

Как вы решили упражнение ”Веб-хранилище”?

Как предотвратить исчезновение элементов панели ”Хранилище сеансов” при перезагрузке страницы

Как предотвратить исчезновение элементов панели локального хранилища при перезагрузке или повторном открытии страницы

Как автоматически отображать ранее добавленные задачи раздела ”Сессия” при перезагрузке страницы

Как автоматически отобразить Locвсе ранее добавленные задания раздела при перезагрузке или повторном открытии страницы

Как проверить общее количество элементов в хранилище сессии браузера

Как отобразить имя нулевого индексного элемента локального хранилища

Как очистить хранилище сеансов браузера

Как продолжить практику с веб-хранилищем 🧗‍♀️🚀

Веб-хранилище против файлов cookie: В чем разница?

Предел хранения

Передача данных на сервер

Слабая целостность и конфиденциальность

Свойства

Истечение срока действия

Извлечение индивидуальных данных

Синтаксис для хранения данных

Синтаксис для чтения данных

Синтаксис для удаления данных

Завершение

Поделиться:

Что такое метод `setItem()` веб-хранилища?

Синтаксис метода `setItem()`.

Пример 3: Браузеры используют `"[объект Object]"` для несериализованных объектов в веб-хранилище

Что такое метод `key()` веб-хранилища?

Синтаксис метода `key()`.

Что представляет собой метод `getItem()` веб-хранилища?

Синтаксис метода `getItem()`.

Что такое свойство веб-хранилища `length`?

Синтаксис свойства `length`.

Что такое метод `removeItem()` веб-хранилища?

Синтаксис метода `removeItem()`.

Что такое метод веб-хранилища `clear()`?

Синтаксис метода `clear()`.