Local storage что это

LocalStorage, sessionStorage

Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.

Что в них важно – данные, которые в них записаны, сохраняются после обновления страницы (в случае sessionStorage ) и даже после перезапуска браузера (при использовании localStorage ). Скоро мы это увидим.

Но ведь у нас уже есть куки. Зачем тогда эти объекты?

В отличие от куки, объекты веб-хранилища не отправляются на сервер при каждом запросе. Именно поэтому мы можем хранить гораздо больше данных. Большинство современных браузеров могут выделить как минимум 5 мегабайтов данных (или больше), и этот размер можно поменять в настройках.
Ещё одно отличие от куки – сервер не может манипулировать объектами хранилища через HTTP-заголовки. Всё делается при помощи JavaScript.
Хранилище привязано к источнику (домен/протокол/порт). Это значит, что разные протоколы или поддомены определяют разные объекты хранилища, и они не могут получить доступ к данным друг друга.

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

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

Как видим, интерфейс похож на Map ( setItem/getItem/removeItem ), но также позволяет получить доступ к элементу по индексу – key(index) .

Давайте посмотрим, как это работает.

Демо localStorage

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

Этот объект один на все вкладки и окна в рамках источника (один и тот же домен/протокол/порт).
Данные не имеют срока давности, по которому истекают и удаляются. Сохраняются после перезапуска браузера и даже ОС.

Например, если запустить этот код…

localStorage.setItem('test', 1);

…И закрыть/открыть браузер или открыть ту же страницу в другом окне, то можно получить данные следующим образом:

alert( localStorage.getItem('test') ); // 1

Нам достаточно находиться на том же источнике (домен/протокол/порт), при этом URL-путь может быть разным.

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

Доступ как к обычному объекту

Также можно получать/записывать данные, как в обычный объект:

// установить значение для ключа localStorage.test = 2; // получить значение по ключу alert( localStorage.test ); // 2 // удалить ключ delete localStorage.test;

Это возможно по историческим причинам и, как правило, работает, но обычно не рекомендуется, потому что:

let key = 'length'; localStorage[key] = 5; // Ошибка, невозможно установить length

Перебор ключей

Методы, которые мы видим, позволяют читать/писать/удалять данные. А как получить все значения или ключи?

К сожалению, объекты веб-хранилища нельзя перебрать в цикле, они не итерируемы.

Но можно пройти по ним, как по обычным массивам:

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

Другой способ – использовать цикл, как по обычному объекту for key in localStorage .

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

// bad try for(let key in localStorage) < alert(key); // покажет getItem, setItem и другие встроенные свойства >

…Поэтому нам нужно либо отфильтровать поля из прототипа проверкой hasOwnProperty :

for(let key in localStorage) < if (!localStorage.hasOwnProperty(key)) < continue; // пропустит такие ключи, как "setItem", "getItem" и так далее >alert(`$: $`); >

…Либо просто получить «собственные» ключи с помощью Object.keys, а затем при необходимости вывести их при помощи цикла:

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

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

Только строки

Обратите внимание, что ключ и значение должны быть строками.

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

localStorage.user = ; alert(localStorage.user); // [object Object]

Мы можем использовать JSON для хранения объектов:

localStorage.user = JSON.stringify(); // немного позже let user = JSON.parse( localStorage.user ); alert( user.name ); // John

Также возможно привести к строке весь объект хранилища, например для отладки:

// для JSON.stringify добавлены параметры форматирования, чтобы объект выглядел лучше alert( JSON.stringify(localStorage, null, 2) );

sessionStorage

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

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

sessionStorage существует только в рамках текущей вкладки браузера.

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

Давайте посмотрим на это в действии.

Запустите этот код…

sessionStorage.setItem('test', 1);

…И обновите страницу. Вы всё ещё можете получить данные:

alert( sessionStorage.getItem('test') ); // после обновления: 1

…Но если вы откроете ту же страницу в другой вкладке и попробуете получить данные снова, то код выше вернёт null , что значит «ничего не найдено».

Так получилось, потому что sessionStorage привязан не только к источнику, но и к вкладке браузера. Поэтому sessionStorage используется нечасто.

Событие storage

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

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

Важно: событие срабатывает на всех остальных объектах window , где доступно хранилище, кроме того окна, которое его вызвало.

Представьте, что у вас есть два окна с одним и тем же сайтом. Хранилище localStorage разделяется между ними.

Вы можете открыть эту страницу в двух окнах браузера, чтобы проверить приведённый ниже код.

Теперь, если оба окна слушают window.onstorage , то каждое из них будет реагировать на обновления, произошедшие в другом окне.

// срабатывает при обновлениях, сделанных в том же хранилище из других документов window.onstorage = event => < // можно также использовать window.addEventListener('storage', event =>< if (event.key != 'now') return; alert(event.key + ':' + event.newValue + " at " + event.url); >; localStorage.setItem('now', Date.now());

Обратите внимание, что событие также содержит: event.url – url-адрес документа, в котором данные обновились.

Также event.storageArea содержит объект хранилища – событие одно и то же для sessionStorage и localStorage , поэтому event.storageArea ссылается на то хранилище, которое было изменено. Мы можем захотеть что-то записать в ответ на изменения.

Это позволяет разным окнам одного источника обмениваться сообщениями.

Современные браузеры также поддерживают Broadcast channel API специальный API для связи между окнами одного источника, он более полнофункциональный, но менее поддерживаемый. Существуют библиотеки (полифилы), которые эмулируют это API на основе localStorage и делают его доступным везде.

Итого

Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.

key и value должны быть строками.
Лимит 5 Мб+, зависит от браузера.
Данные не имеют «времени истечения».
Данные привязаны к источнику (домен/протокол/порт).

localStorage	sessionStorage
Совместно используется между всеми вкладками и окнами с одинаковым источником	Разделяется в рамках вкладки браузера, среди ифреймов из того же источника
«Переживает» перезапуск браузера	«Переживает» перезагрузку страницы (но не закрытие вкладки)

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

Срабатывает при вызове setItem , removeItem , clear .
Содержит все данные об произошедшем обновлении ( key/oldValue/newValue ), url документа и объект хранилища storageArea .
Срабатывает на всех объектах window , которые имеют доступ к хранилищу, кроме того, где оно было сгенерировано (внутри вкладки для sessionStorage , глобально для localStorage ).

Задачи

Автосохранение поля формы

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

Когда пользователь закроет страницу и потом откроет её заново он должен увидеть последнее введённое значение.

Что такое localStorage и как им пользоваться

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 можно сохранять только строки, с помощью JSON вы можете эффективно работать с более сложными типами данных.

В каких случаях пригодится localStorage

Сохранение пользовательских настроек

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

// Проверяем, установлена ли тема 'dark' в localStorage if (localStorage.getItem('theme') === 'dark') < // Если установлена темная тема, применяем ее к body документа document.body.classList.add('dark-mode'); >

Сокращение запросов к серверу

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

// Пытаемся получить данные из localStorage по ключу 'someData' const cachedData = localStorage.getItem('someData'); // Проверяем, существуют ли данные в кэше if (cachedData) < // Если данные существуют, преобразуем их из строки в объект или массив и обрабатываем processData(JSON.parse(cachedData)); >else < // Если данных в кэше нет, делаем запрос к серверу за данными fetchDataFromServer().then(data =>< // После получения данных сохраним их в localStorage для дальнейшего использования localStorage.setItem('someData', JSON.stringify(data)); // Обрабатываем полученные с сервера данные processData(data); >); >

Работа без интернета

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

// Пытаемся получить список задач из localStorage. Если его нет, используем пустой массив. const tasks = JSON.parse(localStorage.getItem('tasks')) || []; // Функция для добавления задачи function addTask(task) < // Добавляем новую задачу в массив tasks.push(task); // Сохраняем обновленный список задач в localStorage localStorage.setItem('tasks', JSON.stringify(tasks)); // Обновляем отображение списка задач на странице (предполагается, что функция renderTasks определена где-то еще) renderTasks(); >

Как очистить localStorage

Чтобы очистить localStorage с помощью JavaScript, вы можете использовать метод clear() . Этот метод удаляет все пары ключ-значение из localStorage для текущего домена. После выполнения этого кода весь localStorage будет полностью очищен:

localStorage.clear();

Если вы хотите удалить конкретное значение из localStorage , используйте метод removeItem() , указав ключ, который хотите удалить:

localStorage.removeItem('keyName');

Так, значение, связанное с keyName , будет удалено, а остальные данные в localStorage останутся нетронутыми.

Не храните важные данные в localStorage

Есть несколько ситуаций, при которых данные могут быть потеряны или удалены:

Очистка браузера. Если пользователь решит вручную очистить историю браузера и данные сайтов, localStorage тоже очистится.
Ограничение по размеру. Каждый браузер имеет свои ограничения на размер данных, который может быть сохранен в localStorage (обычно около 5–10 мегабайт). Если попытаться сохранить больше данных, чем позволяет лимит, предыдущие данные не будут удалены, но новые не сохранятся.
Инкогнито-режим. Если пользователь открывает сайт в режиме инкогнито или приватного просмотра, localStorage может быть доступен для текущей сессии, но данные будут потеряны после закрытия этой сессии.
Политика Same-Origin . localStorage привязан к конкретному домену, протоколу и порту. Это означает, что если вы сохраните что-то на http://example.com , вы не сможете получить доступ к этим данным с https://example.com или http://sub.example.com .
Осознанное удаление разработчиком. Код на сайте может намеренно удалять или перезаписывать данные в localStorage . Например, в списке задач, как мы рассмотрели выше.
Ограничение места на устройстве. Если на устройстве пользователя закончится свободное место, некоторые браузеры могут автоматически очистить localStorage .

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

Так что localStorage — это ещё один маленький помощник для фронтендера. Но, как и все инструменты, его стоит использовать с умом и не забывать об ограничениях. Не пытайтесь положить туда слишком много или что-то слишком важное — ведь это не серверная база данных. Но чтобы сделать жизнь пользователя чуть удобнее — самое то!

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

LocalStorage на пальцах

Один из наших читателей прислал статью с рассказом о HTML5 LocalStorage в браузерах. Передаём ему слово.

Я постарался написать самое простое и понятное руководство по использованию технологии localStorage. Статья получилась совсем небольшой, в силу того, что и сама технология и средства работы с ней не несут ничего сложного. Для старта вам достаточно чуть-чуть знать JavaScript. Итак, уделите этой статье 10 минут и вы смело сможете добавить себе в резюме строчку «умею работать с localStorage».

Что такое localStorage?

Так выглядит JavaScript объект:

var myCar =

А так выглядит JSON. Почти так же как обычный js-объект, только все свойства должны быть заключены в кавычки.

< "firstName": "Иван", "lastName": "Иванов", "address": < "streetAddress": "Московское ш., 101, кв.101", "city": "Ленинград", "postalCode": 101101 >, "phoneNumbers": [ "812 123-1234", "916 123-4567" ] >

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

Если говорить языком JavaScript, то localStorage это свойство глобального объекта браузера (window). К нему можно обращаться как window.localStorage или просто localStorage.

Еще стоит сказать, что у браузера существует клон localStorage, который называется sessionStorage. Их разница только в том, что последний хранит данные только для одной вкладки (сессии) и просто очистит свое пространство как только мы закроем вкладку

Давайте посмотрим на него вживую. Например, в Google Chrome вам надо открыть DevTools (F12), перейти на вкладку «Resourses» и на левой панели вы увидите localStorage для данного домена и все значения, что оно содержит.

Кстати, вы должны знать как localStorage работает с доменами. Для каждого домена ваш браузер создает свой объект localStorage, и редактировать или просматривать его можно только на этом домене. Например, с домена mydomain-1.com нельзя получить доступ к localStorage вашего mydomain-2.com .

Зачем мне нужен localStorage?

LocalStorage нужен только для одного — хранить определенные данные между сессиями пользователя. Можно придумать тысячу и одну вещь, которую можно хранить в локальном хранилище браузера. Например, браузерные игры, которые используют его как сохраненку, или записать момент, на котором пользователь остановился при просмотре видео, различные данные для форм и т.д.

Как мне начать работать с localStorage?

Работа с localStorage очень напоминает работу с объектами в JavaScript. Существует несколько методов для работы с ним.

Метод который добавляет в localStorage новый ключ со значением (а если такой ключ уже существует, то перезаписывает новым значением). Пишем, например, localStorage.setItem(‘myKey’, ‘myValue’);

Берем определенное значение из хранилища по ключу:

Удаляем ключ:

Очищаем все хранилище:

Сейчас вы можете открыть вкладку с localStorage вашего браузера и самостоятельно потренироваться записывать и извлекать данные из этого хранилища. Если что — весь код пишем в js-файл.

//Добавляем или изменяем значение: localStorage.setItem('myKey', 'myValue'); //теперь у вас в localStorage хранится ключ "myKey" cо значением "myValue" //Выводим его в консоль: var localValue = localStorage.getItem('myKey'); console.log(localValue); //"myValue" //удаляем: localStorage.removeItem("myKey"); //очищаем все хранилище localStorage.clear() То же самое, только с квадратными скобками: localStorage["Ключ"] = "Значение" //установка значения localStorage["Ключ"] // Получение значения delete localStorage["Ключ"] // Удаление значения

Также хочется отметить, что localStorage отлично работает и с вложенными структурами, например, объектами.

//создадим объект var obj = < item1: 1, item2: [123, "two", 3.0], item3:"hello" >; var serialObj = JSON.stringify(obj); //сериализуем его localStorage.setItem("myKey", serialObj); //запишем его в хранилище по ключу "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) //спарсим его обратно объект

Вы также должны знать, что браузеры выделяют 5мб под localStorage. И если вы его превысите — получите исключение QUOTA_EXCEEDED_ERR. Кстати, c его помощью можно проверять есть ли в вашем хранилище еще место.

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

Вместо заключения

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

Что такое 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 на практике.