Local storage что это

Window.localStorage

Свойство localStorage позволяет получить доступ к Storage объекту. localStorage аналогично свойству sessionStorage (en-US) . Разница только в том, что свойство sessionStorage хранит данные в течение сеанса (до закрытия браузера), в отличие от данных, находящихся в свойстве localStorage , которые не имеют ограничений по времени хранения и могут быть удалены только с помощью JavaScript.

Следует отметить, что данные, сохранённые как в localStorage , так и в sessionStorage , являться специфичными для протокола страницы.

Ключи и значения всегда строки (так же, как и объекты, целочисленные ключи автоматически будут преобразованы в строки).

Синтаксис

= window.localStorage; 

Значение

Объект Storage , который используется для доступа к текущему локальному хранилищу.

Исключения

Запрос к хранилищу нарушает разрешение политик, либо источник для хранения не является корректной комбинацией схема/хост/порт (такое может произойти, если источником для хранения является file: или data: схемы, например). Как ещё один пример появления ошибки, пользователь через конфигурацию браузера запретил хранение данных для некоторых источников.

Пример

Следующий код показывает пример доступа к локальному объекту Storage для текущего домена и добавляет данные в него с помощью Storage.setItem() .

.setItem("myCat", "Tom"); 

Считывать данные из localStorage для определённого ключа, можно следующим образом:

let cat = localStorage.getItem("myCat"); 

Удалять данные можно так:

.removeItem("myCat"); // вернёт undefined 

Для удаления всех записей, то есть полной очистки localStorage , используйте:

.clear(); 

Примечание: Пожалуйста, обратитесь к статье Using the Web Storage API для более подробных примеров.

Спецификации

Specification
HTML Standard # dom-localstorage-dev

Поддержка браузерами

BCD tables only load in the browser

Все браузеры имеют различный уровень объёма для localStorage и sessionStorage . Здесь подробное описание объёма хранилищ для разных браузеров.

Смотрите также

• Использование Web Storage API
• Локальное хранилище с Window.localStorage (en-US)
• Window.sessionStorage

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Для чего нужен localStorage: как работать с веб-хранилищем

В нашей сегодняшней статье мы разберемся, что такое localStorage. LocalStorage — это свойство, открывающее доступ к специальному объекту Storage (хранилище). Его используют для получения информации из локального хранилища. Данные хранятся там неограниченный период и могут быть удалены только при помощи JavaScript.

Інтенсивний курс від laba: Project Manager.
Ведіть проекти до успішного завершення.

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

Информация в localStorage не стирается после обновления страницы или когда браузер был закрыт и запущен снова.

Проще говоря, localStorage – это объект в браузере, которым мы можем воспользоваться. На языке JS он представляет собой свойства глобального объекта браузера (то есть — window, окна).

У него есть аналог — sessionStorage, который отличается только тем, что в нем хранятся данные для одной вкладки (значения сотрутся после ее закрытия).

Професійний курс від skvot: Системний геймдизайн.
Розробка ігор знати як.

Синтаксис выглядит вот так:

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

Как работать с localStorage

Можно использовать такие методы и свойства:

• key(index) – извлечь ключ на определенной позиции;
• setItem(key, value) – записать ключ и значение объекта;
• removeItem(key) – стереть данные с указанным ключом;
• getItem(key) – считать информацию по заданному ключу;
• clear() – стереть всю информацию;

Захоплюючий курс від laba: HR-менеджер.
Розвивайте персонал і підтримуйте бізнес.

Например, попробуем добавить данные с помощью Storage.setItem():

Для считывания данных есть следующая опция:

let kot = localStorage.getItem(‘Пример’);

Удалить данные можно с помощью функции removeItem, которая вернет значение undefined:

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

Обратите внимание, что для браузеров поддержка localStorage начинается с их определенной версии.

Експертний курс від laba: Business English for HR.
Мова бізнесу для HR-професіоналів.

Ключи и особенности работы

В том, что такое localStorage, мы разобрались. Теперь нужно понять, для чего он нужен и как с ним можно работать. Это свойство хранит данные между сессиями пользователей. Можно придумать огромное количество вещей для хранения в браузере: например, сохранение позиции при просмотре видео, ФИО, адрес электронного ящика, которые не хочется набирать в новых полях постоянно.

Работа с localStorage в основном представляет собой классический набор действий с объектом JavaScript.

Особенности localStorage:

объект для всех вкладок и окон в пределах одного источника является единым;

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

Объект доступен всем окнам, а значит, если мы запишем значение в одном окне, то они станут доступны и из другого — это очень удобно.

Данные в localStorage можно записывать и получать так же, как в обычных объектах JS. Но это не рекомендуется, потому что в некоторых случаях могут не пройти чтение и запись как свойства объекта. Также при модификации данных может не сработать событие storage.

Методы работы с localStorage позволяют считывать, записывать и удалять данные. Но как получить все значения и ключи, хранящиеся в свойстве? Так как они не итерируемые, то перебрать их в цикле невозможно. Но мы можем пройти по ним, как по стандартному массиву данных:

for(let i=0; i: $`); >

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

for(let key in localStorage)

Такой фрагмент кода покажет ряд встроенных свойств, среди которых getItem, setItem. Чтобы избежать этого, можно воспользоваться фильтрацией данных. Она пропустит эти ключи:

for(let key in localStorage) < if (!localStorage.hasOwnProperty(key)) < continue; >alert(`$: $`); >

Еще один вариант получения ключей — Object.keys. Затем уже можно будет отобразить их значения в цикле:

let keys = Object.keys(localStorage); for(let key of keys) < alert(`$: $`); >

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

LocalStorage или Cookies?

Давайте разберемся, для чего нам localStorage, когда у нас уже есть Cookies:

1. В отличие от Cookies, объекты localStorage не отправляют данные при каждом запросе — это позволяет хранить гораздо большие объемы информации. Обычно для браузеров минимальный объем таких данных — 2 МБ (но его можно изменить его в настройках приложения).
2. Сервер не сможет манипулировать объектами хранилища, используя HTTP-заголовки. Все действия с объектами осуществляются с помощью кода, написанного на JavaScript.
3. При работе в JavaScript гораздо удобнее пользоваться localStorage. Плюс, значения Cookies имеют временный характер, а значит, по истечению определенного периода или по завершению сеанса они будут удалены.
4. Важным отличием является и политика конфиденциальности данных. Для пользователей Евросоюза сайты должны выводить уведомление, что они используют Cookies. На локальные хранилища этот закон не распространяется, а значит, и разрешение не требуется.

Примеры работы с localStorage

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

Код для JS-файла будет выглядеть вот так:

//Добавляем или меняем значение ключа и параметра: localStorage.setItem('Ключ', 'Значение'); //Отображаем его в консоли: var localValue = localStorage.getItem('Ключ'); console.log(localValue); // Получаем на экране "Значение" //удаляем по заданному ключу: localStorage.removeItem('Ключ'); //очищаем все хранилище localStorage.clear()

LocalStorage может хорошо работать с вложенными структурами, при желании в него можно записать целый объект.

Не стоит забывать, что браузеры выделяют до 5 Мб для хранения свойства. Если лимит будет превышен, то получим исключение QUOTA_EXCEEDED_ERR. Оно поможет проверить вместимость хранилища. Для этого воспользуемся таким фрагментом кода:

try < localStorage.setItem('Ключ', 'Значение'); >catch (e) < if (e == QUOTA_EXCEEDED_ERR) < alert('Превышен лимит'); >>

Смело используйте localStorage в самых разных проектах. У этой технологии хорошая стандартизация и поддержка, а еще важно, что со временем она развивается и улучшается.

Что такое Локальное Хранилище (Local Storage Objects). Как его очистить и отключить.

Что такое Local Storage Objects (локальное хранилище)?

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

В качестве него могут выступать DOM Storage (в Firefox / Internet Explorer), Database Storage via SQLite (в Safari), Local Shared Objects (Flash Cookies) и др.

Данные из локального хранилища находятся на вашем компьютере и передаются только по запросу сервера.

В чем опасность Local Storage?

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

Как сохранить приватность?

• Отключить Local Storage в настройках браузера или регулярно его очищать. (можно использовать такие плагины как «HTML5 Storage Manager All in One» для Google Chrome)
• В случае с Flash Cookies необходимо отключить локальное хранилище в настройках Flash или полностью отключить/удалить Adobe Flash.

Как отключить Local Storage в Internet Explorer 11 :

1. Откройте меню настроек и выберите “Internet Options”.
2. Во вкладке Advanced снимите галочку с “Enable DOM Storage”.

Как очистить Local Storage в Internet Explorer 11 :

1. Откройте меню настроек и выберите “Safety” — “Delete browsing history…” (или нажмите Ctrl+Shift+Del).
2. Отметьте галочкой “cookies and website data” и нажмите “Delete”.

Как отключить Local Storage в Firefox :

1. Введите в адресной строке: about:config и нажмите “I’ll be careful, i promise!”
2. Найдите в появившемся окне, используя поиск: dom.storage.enabled
3. Дважды кликните на строку, чтобы значение сменилось с «True» на «False».

Как очистить Local Storage в Firefox :

1. Нажмите Ctrl+Shift+Del, отметьте галочкой опции “Cookies”, “Offline Website Data”.
2. В поле “Time Range” выберите “Everything”.
3. Нажмите “Clear Now”.

Как отключить Local Storage в Opera :

В “Опере” можно отлючить Local Storage только вместе с cookies. Делается это в “Settings”, во вкладке “Privacy and Security”. В разделе Cookies выберите “Block sites from setting any data”.

Как очистить Local Storage в Opera :

1. Откройте меню “Opera” и выберите “More Tools” -> “Clear browsing data” (или нажмите Ctrl+Shift+Del).
2. Измените Obliterate the following items from: “the past hour” на “beginning of time”. Отметьте галочкой “Cookies and other site data” и нажмите “Clear browsing data”.

Что такое local storage?

Давайте познакомимся с таким понятием как Local Storage. Что это такое и зачем это нужно.

Local Storage — это один из способов, как можно хранить небольшие данные в формате «ключ-значение», которые будут храниться в браузере пользователя.

В каждом браузере есть свои аналоги Local Storage. Т.е. это внутренняя небольшая база данных, которая хранит какие-то данные внутри браузера. Разработчики, которые пишут веб-скрипты, могут хранить в этой базе данных какие-то данные, которые нужны для работы приложения.

Формат «ключ-значение» выглядит вот таким образом.

username = John Doe

Имя поля и его значение.

В отличие от технологии cookies, которая тоже дает возможность хранить информацию в браузере в формате «ключ — значение». Здесь мы можем хранить уже больший объем данных. Если в cookies мы ограничены 4 кбайтами, то в localstorage можно размещать до 10Мб данных. Для формата ключ-значение в эти 10 Мб можно разместить достаточно много данных.

Local Storage используется для разработки различных расширений для браузера и хранении служебной информации для работы веб-приложений.

Информация Local Storage храниться только на стороне клиента (т.е. в браузере пользователя). Если клиент откроет эту информацию в другом браузере, ее там не будет. Она привязывается к конкретному браузеру.

В Google Chrome есть технологии облачного хранения данных и во всех браузерах Chrome эта информация может синхронизироваться. Но, по умолчанию, это работает только для одного браузера.

Данные из Local Storage, в отличии от Cookies, не передаются в запросе к серверу. Сервер никак эти данные не обрабатывает. Т.е. это просто локальное хранилище данных.

Данные в Local Storage будут храниться до тех пор, пока их не удалят, в отличие от Cookies, которые имеют срок жизни.

Вот такая вводная информация и в следующих видео, мы поучимся работать с этим Local Storage на практике.