DevGang
Авторизоваться

Войти на сайт

Вконтакте
Facebook
GitHub
Google
10.10.2023 в 22:38
Тим Тоуди

Объяснение веб-хранилища — как использовать localStorage и sessionStorage в проектах JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как получить доступ к объектам Session Storage и Local Storage?

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

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

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

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

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

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

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

Каковы встроенные интерфейсы Web Storage?

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

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

  • setItem()
  • key()
  • getItem()
  • length
  • removeItem()
  • clear()

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

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

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

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

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

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

Предположим, вы предоставляете целое число в качестве key или value. В этом случае браузеры автоматически преобразуют их в строки.

setItem() может отображать сообщение об ошибке, если объект хранилища заполнен.

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

  1. Вызовите метод setItem() объекта sessionStorage.
  2. Укажите имя и значение данных, которые вы хотите сохранить.
// Store color: "Pink" inside the browser's session storage object:
sessionStorage.setItem("color", "Pink");

// Log the session storage object to the console:
console.log(sessionStorage);

// The invocation above will return:
{color: "Pink"}

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

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

Пример 2. Как хранить данные в объекте local storage

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

// Store color: "Pink" inside the browser's local storage object:
localStorage.setItem("color", "Pink");

// Log the local storage object to the console:
console.log(localStorage);

// The invocation above will return:
{color: "Pink"}

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

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

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

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

// Store myBio object inside the browser's session storage object:
sessionStorage.setItem("myBio", { name: "Oluwatobi" });

// Log the session storage object to the console:
console.log(sessionStorage);

// The invocation above will return:
{myBio: "[object Object]", length: 1}

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

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

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

// Store myBio object inside the browser's session storage object:
sessionStorage.setItem("myBio", JSON.stringify({ name: "Oluwatobi" }));

// Log the session storage object to the console:
console.log(sessionStorage);

// The invocation above will return:
{myBio: '{"name":"Oluwatobi"}', length: 1}

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

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

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

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

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

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

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

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

  1. Вызовите метод key() объекта sessionStorage.
  2. Укажите индекс элемента, имя которого вы хотите получить.
// Store carColor: "Pink" inside the browser's session storage object:
sessionStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the session storage object:
sessionStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the session storage object:
sessionStorage.setItem("laptopColor", "White");

// Get the name of the item at index 1:
sessionStorage.key(1);

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

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

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

  1. Вызовите метод key() localStorage.
  2. Укажите индекс элемента, имя которого вы хотите получить.
// Store carColor: "Pink" inside the browser's local storage object:
localStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the local storage object:
localStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the local storage object:
localStorage.setItem("laptopColor", "White");

// Get the name of the item at index 1:
localStorage.key(1);

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

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

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

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

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

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

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

Пример 1: Как получить данные из объекта session storage

  1. Вызовите метод getItem() класса sessionStorage.
  2. Укажите название данных, которые вы хотите получить.
// Store color: "Pink" inside the browser's session storage object:
sessionStorage.setItem("color", "Pink");

// Get color's value from the session storage:
sessionStorage.getItem("color");

// The invocation above will return:
"Pink"

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

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

  1. Вызовите метод getItem() localStorage.
  2. Укажите название данных, которые вы хотите получить.
// Store color: "Pink" inside the browser's local storage object:
localStorage.setItem("color", "Pink");

// Get color's value from the local storage:
localStorage.getItem("color");

// The invocation above will return:
"Pink"

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

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

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

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

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

Вот синтаксис length:

webStorageObject.length;

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

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

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

// Store carColor: "Pink" inside the browser's session storage object:
sessionStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the session storage object:
sessionStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the session storage object:
sessionStorage.setItem("laptopColor", "White");

// Verify the number of items in the session storage:
sessionStorage.length;

// The invocation above may return:
3

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

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

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

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

// Store carColor: "Pink" inside the browser's local storage object:
localStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the local storage object:
localStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the local storage object:
localStorage.setItem("laptopColor", "White");

// Verify the number of items in the local storage:
localStorage.length;

// The invocation above may return:
3

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

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

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

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

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

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

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

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

  1. Вызовите метод removeItem() класса sessionStorage.
  2. Укажите название данных, которые вы хотите удалить.
// Store carColor: "Pink" inside the browser's session storage object:
sessionStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the session storage object:
sessionStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the session storage object:
sessionStorage.setItem("laptopColor", "White");

// Remove the pcColor item from the session storage:
sessionStorage.removeItem("pcColor");

// Confirm whether the pcColor item still exists in the session storage:
sessionStorage.getItem("pcColor");

// The invocation above will return:
null

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

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

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

  1. Вызовите метод removeItem()localStorage.
  2. Укажите название данных, которые вы хотите удалить.
// Store carColor: "Pink" inside the browser's local storage object:
localStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the local storage object:
localStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the local storage object:
localStorage.setItem("laptopColor", "White");

// Remove the pcColor item from the local storage:
localStorage.removeItem("pcColor");

// Confirm whether the pcColor item still exists in the local storage:
localStorage.getItem("pcColor");

// The invocation above will return:
null

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

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

Что такое метод web-хранилища Clear()?

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

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

Clear() не принимает аргументов. Вот синтаксис:

webStorageObject.clear();

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

Пример 1. Как удалить все элементы из объекта session storage

Вызовите метод clear() класса sessionStorage.

// Store carColor: "Pink" inside the browser's session storage object:
sessionStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the session storage object:
sessionStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the session storage object:
sessionStorage.setItem("laptopColor", "White");

// Clear all items from the session storage:
sessionStorage.clear();

// Confirm whether the session storage still contains any item:
console.log(sessionStorage);

// The invocation above will return:
{length: 0}

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

Пример 2. Как удалить все элементы из объекта local storage

Вызовите метод clear() localStorage.

// Store carColor: "Pink" inside the browser's local storage object:
localStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the local storage object:
localStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the local storage object:
localStorage.setItem("laptopColor", "White");

// Clear all items from the local storage:
localStorage.clear();

// Confirm whether the local storage still contains any item:
console.log(localStorage);

// The invocation above will return:
{length: 0}

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

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

Время попрактиковаться с веб-хранилищем

Рассмотрим следующее приложение «Список дел»:

Проблема

Проблема с приложением «Список дел» заключается в следующем:

  • Задачи исчезают всякий раз, когда пользователи обновляют веб-страницу.

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

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

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

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

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

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

Попробуйте упражнение по веб-хранилищу

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

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

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

Как вы решили задачу по веб-хранилищу?

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

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

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

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

Вот код:

sessionAddTaskBtn.addEventListener('click', () => {
  // Get existing session storage's content, if any. Otherwise, return an empty array:
  const currentTodoArray =
    JSON.parse(sessionStorage.getItem('codesweetlyStore')) || [];

  // Merge currentTodoArray with the user's new input:
  const newTodoArray = [
    ...currentTodoArray,
    { checked: false, text: sessionInputEle.value },
  ];

  // Add newTodoArray to the session storage object:
  sessionStorage.setItem('codesweetlyStore', JSON.stringify(newTodoArray));

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

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

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

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

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

Вот код:

localAddTaskBtn.addEventListener('click', () => {
  // Get existing local storage's content, if any. Otherwise, return an empty array:
  const currentTodoArray =
    JSON.parse(localStorage.getItem('codesweetlyStore')) || [];

  // Merge currentTodoArray with the user's new input:
  const newTodoArray = [
    ...currentTodoArray,
    { checked: false, text: localInputEle.value },
  ];

  // Add newTodoArray to the local storage object:
  sessionStorage.setItem('codesweetlyStore', JSON.stringify(newTodoArray));

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

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

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

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

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

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

Вот код:

window.addEventListener('load', () => {
  // Get existing session storage's content, if any. Otherwise, return an empty array:
  const sessionTodoArray =
    JSON.parse(sessionStorage.getItem('codesweetlyStore')) || [];

  // Use the retrieved sessionTodoArray to create <li> elements:
  const todoLiElements = createTodoLiElements(sessionTodoArray);

  // Populate the tasks display space with the todoLiElements:
  sessionTodosContainer.replaceChildren(...todoLiElements);
});

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

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

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

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

Вот код:

window.addEventListener('load', () => {
  // Get existing local storage's content, if any. Otherwise, return an empty array:
  const localTodoArray =
    JSON.parse(localStorage.getItem('codesweetlyStore')) || [];

  // Use the retrieved localTodoArray to create <li> elements:
  const todoLiElements = createTodoLiElements(localTodoArray);

  // Populate the tasks display space with the todoLiElements:
  localTodosContainer.replaceChildren(...todoLiElements);
});

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

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

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

console.log(sessionStorage.length);

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

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

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

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

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

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

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

sessionStorage.clear();

Как продолжить практику использования веб-хранилища

Приложение to-do по-прежнему имеет большой потенциал. Например, вы можете:

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

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

Например, вот моя попытка сделать два сбоя функциональными:

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

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

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

Лимит хранения

Файлы cookie: максимальный размер хранилища составляет 4 килобайта.

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

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

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

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

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

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

Файлы cookie: страдают от слабой целостности и слабой конфиденциальности.

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

Свойство

Файлы cookie: файлы cookie являются свойством объекта Document.

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

Срок действия

Файл cookie: вы можете указать дату истечения срока действия файла cookie.

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

Получение индивидуальных данных

Файлы cookie: невозможно получить отдельные данные. Всегда приходится вспоминать все данные, чтобы прочитать хоть одну.

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

Синтаксис&nbsp;Cookies vs&nbsp;Web storage

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

Cookies:

document.cookie = "key=value";

Web storage:

webStorageObject.setItem(key, value);

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

Cookies:

document.cookie;

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

webStorageObject.getItem(key);

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

Cookies:

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

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

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

webStorageObject.removeItem(key);

Подведение итогов

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

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

Источник:

#JavaScript
170
0
0
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Возможно вам понравится

В этом месте могла бы быть ваша реклама

Разместить рекламу
Генератор ЧПУ Библиотека переводов
Служба поддержки
support@dev-gang.ru