HTML5 локальное хранилище данных на стороне клиента. Локальное хранилище Локальное хранение

Привет всем! В этой статье мы разберем, что такое localStorage и как его использовать .

Введение

LocalStorage - локальное хранилище. Т.е. это специально отведенное место в браузере(что-то вроде небольшой базы данных), где мы можем записывать, читать и удалять какие-то данные. На самом деле, локальное хранилище очень похоже на COOKIE , но есть отличия. Вот давайте о них и поговорим. Cookie очень ограничены. В одной cookie может быть всего 4096 символов, а их количество на один домен примерно 30-50 в зависимости от браузера. В локальном хранилище мы можем хранить 5-10мб или даже больше на длительное время.

Где их использовать

Самое большое отличие cookie от localStorage - это то, что первый работает с сервером, а второй нет, хотя это тоже можно сделать, но об этом немного позже. Используйте локальное хранилище там, где вам не нужна тесная работа с сервером, а нужно хранить какие-то временные данные. К примеру, представим, что вы создаете какое-то web-приложение, куда человек может зайти, ввести несколько задач, которые он хочет сделать за день и удалить те, которые уже выполнил. Зачем нам тут сервер? Правильно, не за чем. Вот тут и стоит использовать localStorage . Человек заходит, вводит задачи, они записываются в специальное место его браузера и там хранятся. Когда человек зайдет снова через какое-то время, они будут оттуда выбраны и показаны. К примеру, кликнув по задаче, она будет удаляться с локального хранилища и, следовательно, показываться ему уже не будет. Перейдем к тому, как его использовать.

Как использовать localStorage

Хранятся данные также, как и в cookie - ключ:значение . Чтобы добавить новое значение, напишите так:

LocalStorage.setItem("ключ", "значение");

Мы используем объект localStorage и его метод setItem , куда передаем ключ и значение.

Чтобы получить данные, пишем следующее:

Var value = localStorage.getItem("ключ");

В результате, в переменную value попадет значение, которое хранится под ключом, который мы передаем в метод getItem .

Удаляем данные

LocalStorage("ключ"); // удалит данные под переданным ключом
localStorage.clear(); // полностью очистит локальное хранилище

Чтобы проверить, не переполнено ли локальное хранилище, вы можете использовать константу QUOTA_EXCEEDED_ERR

Try {
localStorage.setItem("ключ", "значение");
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert("Превышен лимит");
}
}

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

В начале статьи я говорил, что локальное хранилище создано для того, чтобы хранить локальные данные и не общаться с сервером, но, однако, такая возможность у нас все же есть. Думаю, некоторые уже могли догадаться, как это сделать. Итак, если вам нужно отправить какие-то данные на сервер, то сделайте следующее: получите данные из локального хранилища, преобразуйте их в JSON строку и отправьте с помощью технологии Ajax . Так же можно их и принимать от сервера.

Итог

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

Куки, которые мы разбирали в предыдущем уроке, очень ограничены: в одной куке может быть всего 4096 символов, а количество кук на один домен может быть примерно 30-50 в зависимости от браузера. Поэтому, увы, но много информации там хранить не получится. Так уж сложилось исторически.

Чтобы обойти это ограничение в браузерах появилась альтернатива кукам - она называется локальное хранилище. В локальном хранилище мы можем хранить 5-10 мегабайт информации или даже больше на длительное время.

Работа с локальным хранилищем

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

//Сохранение значения: localStorage.setItem("Ключ", "Значение"); //Получение значения: var value = localStorage.getItem("Ключ"); //Удаление значения: localStorage.removeItem("Ключ"); //Очистка всего хранилища: localStorage.clear();

С localStorage можно также работать как с обычным массивом:

//Сохранение значения: localStorage["Ключ"] = "Значение"; //Получение значения: var value = localStorage["Ключ"]; //Удаление значения: delete localStorage["Ключ"];

Кроме объекта localStorage есть также объект sessionStorage . Работа с ним осуществляется так же, единственное отличие в том, что все данные из него автоматически уничтожаются после закрытия браузера или вкладки с сайтом. Ну, а localStorage хранит данные длительное время, пока эти данные не будут удалены скриптом, или пользователь браузера очистит локальное хранилище с помощью настроек.

Примеры

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

LocalStorage.setItem("name", "Иван");

Через некоторое время получим это имя обратно:

Alert(localStorage.getItem("name"));

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

Сохранение объектов

Локальное хранилище не способно хранить объекты и массивы JavaScript, хотя это зачастую бывает удобно. Но способ есть - нужно сериализовать эти данные в формат JSON - получится строка, которую уже можно будет сохранить в localStorage. Затем, когда нам понадобится достать этот объект обратно - преобразуем строку из JSON обратно в объект - и спокойно им пользуемся.

Давайте рассмотрим этот процесс на примере. Сериализуем объект и сохраним в локальное хранилище:

//Дан объект: var obj = {name: "Иван", arr: }; //Сериализуем его в "{"name": "Иван", "arr": }": var json = JSON.stringify(obj); //Запишем в localStorage с ключом obj: localStorage.setItem("obj", json);

Через некоторое время получим объект обратно:

//Получим данные обратно из localStorage в виде JSON: var json = localStorage.getItem("obj"); //Преобразуем их обратно в объект JavaScript: var obj = JSON.parse(json); console.log(obj);

Дополнительные возможности

Определение количества записей в хранилище: alert(localStorage.length).

Определение названия ключа по его номеру: alert(localStorage.key(номер)).

При выполнении операций с хранилищем, срабатывает событие onstorage . Если к этому событию привязать функцию - то в ней будет доступен объект Event со следующими свойствами:

function func(event) { var key = event.key; //ключ изменяемых данных var oldValue = event.oldValue; //старое значение var newValue = event.newValue; //новое значение var storageArea = event.storageArea; //storageArea }

Доп. материал

Хранение массива в локальном хранилище: https://youtu.be/sYUILPMnrIo

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку .

Когда все решите - переходите к изучению новой темы.

• Урок №
  плейлист на ютуб
  Практическое применение ES6

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

Из таких web приложений, как Google Wave, Gmail и т.п. мы видим, что кеширование данных на стороне клиента это хорошая идея для большинства веб-приложений. Подумайте сами, для мобильного интернета очень важен объем . Однотипные запросы в 70% случаях (я не делал никаких расчетов, просто выражать доводы в процентах гораздо солиднее) возвращают одни и те же данные. Кроме того кешировать можно не только данные, но и само приложение.

До сих пор наиболее популярным методом для локального хранения были cookie. Cookie - это пара ключ-значение, которые хранятся локально в текстовом файле (4KB или 20 пар ключ-значение максимум(IE) для одного домена). Кроме того cookie передаются на сервер при любом HTTP запросе на сервер, даже при AJAX. Закономерно, что в стандарте должны были появится средства для более практичного хранения данных в браузере.

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

Итак, хранилище на стороне клиента делится на 3 принципиальных методологии:

1. Session storage.
2. Local storage или Global Storage

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

1. Session Storage - сессионное хранилище

Сессионное хранилище более удобно, чем cookie. С различными реализациями макс. лимит может быть порядка нескольких Мбит. В отличии от cookie сессионные данные не отправляются при каждом запросе.
Преимущества: при запросе полезная нагрузка минимальна.
Приведем пример сессионного хранилища:

SessionStorage.setItem("userName", "taranfx"); // определяем сессионную переменную alert("Вас зовут: " + sessionStorage.getItem("userName"));// проверка доступа alert("Привет " + sessionStorage.userName); // другой метод доступа к сессионной переменной sessionStorage.removeItem("userName"); // в конце удаляем переменную

2. Local Storage - локальное хранилище

LocalStorage JavaScript объект функционально идентичен sessionStorage объекту. Они отличаются только продолжительностью жизни и областью видимости. Область видимости: данные в localStorage доступны через все окна браузера в то время, как sessionStorage данные ограничивается окном в котором были созданы.
Глобальное хранилище памяти задается браузером, веб-сайты могут использовать его для хранения постоянных данных, которые не должны быть отправлены на сервер. Данные доступны по JavaScript и Flash. Это может быть очень удобно для Flash-игр.

GlobalStorage[""].foo = "bar"; // foo будет доступен на любом веб-сайте globalStorage["ru"].foo1 = "bar1"; // foo1 будут доступны на сайтах "..foo2 = "bar2"; // foo2 будет доступен только на сайт

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

Вот как это можно сделать:

LocalStorage.setItem("userName", "taranfx"); // определяем переменную в localStorage alert("Вас зовут: " + localStorage.getItem("userName")); // доступ к ней alert("Привет " + localStorage.userName); // доступ к ней по другому localStorage.removeItem("userName"); // в конце удаляем ее

3. Database Storage - хранение в базе данных

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

Но в награду вы получаете полноценную SQL базу данных. И работа с ней ведется на SQL.

Прислал статью с рассказом о HTML5 LocalStorage в браузерах. Передаём ему слово.

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

Что такое localStorage?

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

Var myCar = { wheels: 4, doors: 4, engine: 1, name: "Jaguar" }

А так выглядит 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.setItem("ключ", "значение")

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

localStorage.getItem("ключ")

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

localStorage.removeItem("Ключ")

Удаляем ключ

localStorage.clear()

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

Сейчас вы можете открыть вкладку с 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: , 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("Превышен лимит"); } }

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

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

The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies .

Web Storage concepts and usage

The two mechanisms within Web Storage are as follows:

• sessionStorage maintains a separate storage area for each given origin that"s available for the duration of the page session (as long as the browser is open, including page reloads and restores)
  • Stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
  • Data is never transferred to the server.
  • Storage limit is larger than a cookie (at most 5MB).
• localStorage does the same thing, but persists even when the browser is closed and reopened.
  • Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data.
  • Storage limit is the maximum amongst the three.

Specifications

Browser compatibility

Window.localStorage

https://github.com/mdn/browser-compat-data and send us a pull request.

Legend

Window.sessionStorage

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Legend

Private Browsing / Incognito modes

Most modern browsers support a privacy option called "Incognito", "Private Browsing" or something similar that doesn"t store data like history and cookies. This is fundamentally incompatible with Web Storage for obvious reasons. As such, browser vendors are experimenting with different scenarios for how to deal with this incompatibility.

Most browsers have opted for a strategy where storage APIs are still available and seemingly fully functional, with the one big difference that all stored data is wiped after the browser is closed. For these browsers there are still different interpretations of what should be done with existing stored data (from a regular browsing session). Should it be available to read when in Private mode? Then there are some browsers, most notably Safari, that have opted for a solution where storage is available, but is empty and has a quota of 0 bytes assigned, effectively making it impossible to write data to it.

Developers should be aware of these different implementations and take them into account when developing websites depending on Web Storage APIs. For more information please have a look at this WHATWG blog post that specifically deals with this topic.