Введение
Случайное закрытие веб-страницы во время заполнения формы может привести к раздражению. Вы потеряете все заполненные данные и будете вынуждены начинать заново. В этой статье вы узнаете, как использовать localStorage в JavaScript для хранения данных после окончания сеанса просмотра. Мы покажем вам, как использовать этот механизм и свойство Window.localStorage, а также рассмотрим основы веб-хранилища в JavaScript.
Что такое LocalStorage в JavaScript?
localStorage — это функция, позволяющая сайтам и приложениям JavaScript хранить пары «ключ-значение» в веб-браузере без ограничения срока действия. Это означает, что сохранённые данные сохраняются даже после закрытия браузера пользователем или перезагрузки компьютера.
localStorage — это свойство объекта окна, делающее его глобальным объектом, способным взаимодействовать с окном браузера и управлять им. Его также можно использовать в сочетании с другими свойствами и методами окна.
Что такое Window.localStorage?
Механизм localStorage доступен через свойство Window.localStorage. Window.localStorage — это часть интерфейса Window в JavaScript, представляющая окно, содержащее DOM-документ.
Интерфейс Window предоставляет широкий набор функций, конструкторов, объектов и пространств имён. Window.localStorage — это свойство, доступное только для чтения, которое возвращает ссылку на локальный объект хранилища, используемый для хранения данных, доступных только ресурсу, создавшему этот объект.
Когда использовать localStorage
Проще говоря, localStorage используется для хранения и извлечения данных. Хотя localStorage позволяет хранить небольшие объёмы данных, он не подходит для больших наборов данных. Доступ к localStorage имеет любой пользователь устройства, поэтому не следует использовать его для хранения конфиденциальной информации. Вы можете использовать его для хранения пользовательских настроек, таких как язык или тема. Также его можно использовать для кэширования данных при частом использовании. localStorage может хранить данные форм, которые не будут потеряны при закрытии браузера пользователем.
Если у вас есть приложение, требующее входа в систему, localStorage можно использовать для сохранения данных сеанса. Вы сможете войти в систему даже после закрытия и повторного открытия браузера. Мы продемонстрируем это далее в этом руководстве на примере простого приложения.
Где хранится localStorage?
В Google Chrome данные веб-хранилища хранятся в SQLite-файле в подпапке профиля пользователя. Эта подпапка расположена в папке \AppData\Local\Google\Chrome\User Data\Default\Local Storage на компьютерах с Windows и в папке ~/Library/Application Support/Google/Chrome/Default/Local Storage на компьютерах с macOS. Firefox хранит объекты хранилища в SQLite-файле webappsstore.sqlite, который также находится в папке профиля пользователя.
Введение в API веб-хранилища
localStorage — один из двух механизмов API веб-хранилища (второй — sessionStorage). API веб-хранилища — это набор механизмов, позволяющих браузерам хранить пары «ключ-значение». Он гораздо более интуитивно понятен, чем использование файлов cookie.
Пары «ключ-значение» представляют собой объекты хранения, которые аналогичны обычным объектам, за исключением того, что они остаются неизменными при загрузке страницы и всегда являются строками. Вы можете получить доступ к этим значениям, как если бы они были объектами, или с помощью метода getItem() (подробнее об этом позже).
sessionStorage против localStorage
И sessionStorage, и localStorage имеют отдельную область хранения для каждого ресурса, доступного в течение сеанса. Основное различие между ними заключается в том, что sessionStorage поддерживает только одну область хранения. При этом браузер открыт (в том числе при перезагрузке или обновлении страницы), а localStorage продолжает хранить данные после закрытия браузера.
localStorage хранит данные, срок хранения которых не ограничен, в то время как sessionStorage хранит данные только для одного сеанса. Важно отметить, что данные localStorage, загруженные в режиме инкогнито, очищаются после закрытия последней приватной вкладки. Метод setItem SessionStorage полезен, когда требуется временное хранение данных, и его следует использовать в ситуациях, когда сохранение данных не требуется после окончания текущего сеанса.
SessionStorage обычно имеет меньшие ограничения по объёму хранилища, чем localStorage, часто ограниченные несколькими мегабайтами на ресурс. Это делает его подходящим для хранения временных данных во время сеанса пользователя, не потребляя слишком много ресурсов браузера.
LocalStorage, с другой стороны, обеспечивает больший объём хранилища, часто от 5 до 10 МБ на источник. Он подходит для хранения больших объёмов данных, которые необходимо сохранять в течение нескольких сеансов.
Преимущества и недостатки LocalStorage
localStorage в JavaScript — важный инструмент для хранения данных на стороне клиента. Однако у него есть ряд преимуществ и недостатков, которые следует учитывать.
Преимущества
Первое преимущество LocalStorage мы уже упоминали несколько раз: сохранённые данные не имеют срока действия. Вы по-прежнему можете получить к ним доступ офлайн, а localStorage хранит данные, которые можно использовать без подключения к интернету.
Хранение данных в localStorage безопаснее, чем в cookie-файлах, и обеспечивает больший контроль над данными. Кроме того, localStorage обладает большей ёмкостью по сравнению с cookie-файлами. В то время как cookie-файлы могут хранить только четыре килобайта данных, LocalStorage может хранить до пяти мегабайт.
Недостатки
localStorage работает синхронно, то есть все операции выполняются только одна за другой. Это не вызывает проблем при работе с небольшими наборами данных, но по мере роста объёма данных это может стать серьёзной проблемой.
Хотя LocalStorage более безопасен, чем файлы cookie, его всё равно не следует использовать для хранения конфиденциальных данных. Любой, у кого есть доступ к устройству пользователя, может получить доступ к данным, хранящимся в localStorage. Кроме того, localStorage может хранить только строки, поэтому для хранения других типов данных необходимо преобразовать их в строки. И наконец, хранение слишком большого объёма данных в localStorage может замедлить работу приложения.
Как работает LocalStorage?
Вы уже много раз слышали об этом: localStorage хранит данные. А если вы храните данные, это означает, что вам может понадобиться их извлечь позже. В этом разделе мы подробно рассмотрим, как работает localStorage. Вот краткое описание его работы:
- setItem(): добавляет ключ и значение в localStorage
- getItem(): извлекает/получает элементы из localStorage
- removeItem(): удаляет элемент из localStorage
- clear(): очищает все данные из localStorage
- key(): сохраняет число для извлечения локального ключа
Сохранение данных с помощью setItem()
Метод setItem() позволяет сохранять значения в localStorage. Он принимает два параметра: ключ и значение. К ключу можно обратиться позже для получения соответствующего значения. Вот как это должно выглядеть:
localStorage.setItem('name', 'Obaseki Nosa');
В коде выше видно, что name — это ключ, а Obaseki Nosa — значение. Как мы уже упоминали, localStorage может хранить только строки. Чтобы сохранить массивы или объекты в localStorage, необходимо преобразовать их в строки.
Для этого мы используем метод JSON.stringify перед передачей его в setItem(), например:
const userArray = ["Obaseki",25]
localStorage.setItem('user', JSON.stringify(userArray));Извлечение информации с помощью getItem()
Метод getItem() позволяет получить доступ к данным, хранящимся в объекте localStorage браузера. Этот метод принимает только один параметр — ключ — и возвращает значение в виде строки:
localStorage.getItem('name');
Возвращает строку со значением “Obaseki Nosa”. Если указанный ключ отсутствует в localStorage, возвращается значение null. В случае массива мы используем метод JSON.parse(), который преобразует JSON-строку в JavaScript-объект:
JSON.parse(localStorage.getItem('user'));
Используя массив, который мы создали выше, вот как извлечь его из localStorage:
const userData = JSON.parse(localStorage.getItem('user'));
console.log(userData);Этот метод возвращает массив [“Obaseki”, 25]. Вы можете просмотреть веб-страницу и найти его в консоли, например:
Это изображение из Firefox, поэтому в других браузерах оно будет выглядеть немного иначе. Давайте сравним его с другим массивом, который не хранится в localStorage:
const userArray2 = ["Oscar", 27];
console.log(userArray2);Теперь у нас в консоли есть два массива, как показано ниже:
Обычно, если закомментировать их в редакторе кода, они должны исчезнуть из консоли. Но всё, что хранится в localStorage, останется. Вот пример:
Удаление данных с помощью removeItem()
Чтобы удалить элемент из localStorage, используйте метод removeItem(). При передаче имени ключа метод removeItem() удаляет существующий ключ из памяти. Если с заданным ключом не связан ни один элемент, этот метод ничего не делает. Вот код:
.localStorage.removeItem('name');
Как удалить все в localStorage: clear()
Чтобы удалить все данные из localStorage, используйте метод clear(). При вызове этот метод очищает всё хранилище от всех записей для данного домена. Он не принимает никаких параметров. Используйте следующий код:
localStorage.clear();
Как получить имя ключа: key()
Метод key() удобен, когда нужно перебрать ключи, но при этом сохранить возможность передать число или список в localStorage для получения имени ключа. Вот как это выглядит:
localStorage.key(index);Параметр индекс представляет собой отсчитываемый от нуля индекс ключа, имя которого вы хотите получить.
localStorage против cookie-файлов
Для хранения данных на стороне клиента используются как LocalStorage, так и файлы cookie. Как мы уже упоминали, файлы cookie могут хранить не более четырёх килобайт данных, что значительно меньше пяти мегабайт, доступных LocalStorage.
Файлы cookie автоматически отправляются на сервер с каждым HTTP-запросом, но localStorage остаётся локальным на устройстве пользователя. Это может повысить производительность веб-сайта и не увеличивает сетевой трафик, поскольку не обменивается данными с сервером.
Как мы видели, данные, хранящиеся в localStorage, не имеют срока действия. Они остаются там неограниченное время, пока вы не удалите их вручную. С другой стороны, файлы cookie могут быть удалены по истечении определённого периода времени или сразу после закрытия браузера. Файлы cookie обычно хранят такие данные, как настройки пользователя и данные для входа/аутентификации. Эти данные доступны во всех вкладках и окнах браузера. Однако localStorage хранит только данные, доступные по определённому протоколу или домену.
Поддержка локального хранилища браузера
localStorage, как тип веб-хранилища, является спецификацией HTML5. Она поддерживается основными браузерами, включая Internet Explorer v8. Вы можете использовать следующий фрагмент кода, чтобы проверить, поддерживает ли браузер localStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage
} else {
// No web storage Support.
}Расширенные методы управления данными в localStorage
Теперь мы рассмотрим некоторые продвинутые методы управления данными в локальном хранилище. Мы разберёмся, как эффективно удалять ключи, применять передовые практики хранения и организации объектов, а также использовать парсинг и стрингизацию JSON для сложных данных.
Эффективное извлечение ключа
Эффективное удаление ключей из объектов, хранящихся в localStorage, крайне важно для оптимизации пространства хранилища, особенно если вы разрабатываете приложение, в котором данные часто обновляются или удаляются. Удаление ненужных ключей помогает предотвратить заполнение LocalStorage бесполезными данными.
Чтобы эффективно удалить ключ из объекта в localStorage, можно извлечь объект по ключу, удалить необходимое свойство, а затем вернуть обновлённый объект в localStorage. Это сводит к минимуму ненужные манипуляции с данными и накладные расходы на хранение:
// Example of efficient key removal
let storedData = JSON.parse(localStorage.getItem('key'));
delete storedData.propertyToRemove;
localStorage.setItem('key', JSON.stringify(storedData));Сохраняйте и организуйте объекты
Парсинг и стрингификация JSON — мощные методы управления сложными структурами данных при хранении и извлечении данных в localStorage. Они позволяют легко преобразовывать объекты JavaScript в строки JSON, обеспечивая эффективное управление данными и их обработку.
При хранении сложных структур данных, таких как объекты или массивы, в localStorage, перед их размещением в localStorage необходимо преобразовать их в строку с помощью метода JSON.stringify(). Это преобразует объект JavaScript в строку JSON, которую затем можно сохранить как пару «ключ-значение»:
// Storing an object in LocalStorage
let dataObject = { key: 'value' };
localStorage.setItem('objectKey', JSON.stringify(dataObject));
// Retrieving and parsing the object from LocalStorage
let retrievedObject = JSON.parse(localStorage.getItem('objectKey'));При работе с вложенными объектами или массивами убедитесь, что все вложенные объекты также преобразованы в строку и проанализированы для сохранения целостности структуры данных:
// Storing and retrieving nested objects in LocalStorage
let nestedObject = { key1: 'value1', key2: { nestedKey: 'nestedValue' } };
localStorage.setItem('nestedObject', JSON.stringify(nestedObject));
let retrievedNestedObject = JSON.parse(localStorage.getItem('nestedObject'));Результат
В этой статье мы рассмотрели возможности LocalStorage в JavaScript как простого и эффективного способа хранения и извлечения данных без использования файлов cookie. Мы объяснили, как и когда использовать localStorage, а также как хранить, извлекать и удалять элементы в localStorage. Мы продемонстрировали работу LocalStorage на рабочем примере и сравнили её с файлами cookie.
В этой публикации вы узнали, как и когда использовать localStorage. Мы объяснили, как хранить, извлекать и удалять элементы в localStorage. Мы также создали работающее приложение, чтобы увидеть, как LocalStorage работает на практике. Наконец, мы сравнили его с файлами cookie.
Итак, вы попали по адресу, ведь у вас есть отличный инструмент, который прост в использовании и поддерживает множество браузеров.
