Использование localstorage. Использование localStorage для нужд JavaScript. Слежение за областью HTML5-хранилища
Прислал статью с рассказом о 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
Specification | Status | Comment |
---|---|---|
HTML Living Standard | Living Standard |
Browser compatibility
Window.localStorage
https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
localStorage | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 8 | Opera Full support 10.5 | Safari Full support 4 |
Legend
Full support Full supportWindow.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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
sessionStorage | Chrome Full support 5 | Edge Full support 12 | Firefox Full support 2 | IE Full support 8 | Opera Full support 10.5 | Safari Full support 4 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support 11 | Safari iOS Full support 3.2 | Samsung Internet Android Full support Yes |
Legend
Full support Full supportPrivate 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.
Перевод статьи:
How to use local storage for JavaScript.
Sara Vieira.
Знакомство с основами программирования языка JavaScript зачастую начинается с создания простейших приложений, таких, к примеру, как электронная записная книжка, используемая нами для записи дел и событий, о которых мы можем забыть. Но подобным приложениям свойственна одна проблема — после перезагрузки страницы, список всех оставленных ранее записей исчезает, то есть приложение возвращается в свое исходное состояние.
Существует очень простой выход из данной ситуации, предусматривающий использование механизма локального хранения localStorage . Благодаря тому, что localStorage позволяет нам сохранять необходимые данные на пользовательском компьютере, упомянутый выше список запланированных дел и событий будет все еще доступен после перезагрузки страницы, кроме того, localStorage является на удивление очень простым способом хранения данных и доступа к ним при необходимости.
Что такое localStorage?
Это механизм локального хранения данных, который является частью технологии Web Storage , предусмотренной HTML5 спецификацией. Имеется два варианта хранения данных, допустимые данной спецификацией:
- Локальное хранение: позволяет сохранять информацию без ограничений по срокам хранения. Именно этот вариант мы и будем использовать, поскольку имеющийся в нашем примере список задач должен храниться постоянно.
- Использование сеансов: обеспечивает сохранность данных лишь на период одного сеанса, то есть после закрытия пользователем вкладки нашего приложения и повторного ее открытия вся необходимая для дальнейшей работы приложения информация будет удалена.
Попросту говоря, все, что делает Web Storage , это хранит данные в форме именованный ключ/значение локально и в отличие от двух других методов, каждый из которых имеет свои недостатки (Сеансовое хранение информации предусматривает использование для этого серверной стороны, к тому же после закрытия сеанса пользователя эта информация удаляется, а cookies хотя и используют для хранения сторону клиента, но не надежны потому, что путем настроек браузера пользователь может отменить их поддержку.) сохраняет данные даже в том случае, если вы закрыли браузер или выключили свой компьютер. (*Я позволил себе несколько изменить и дополнить содержание этого абзаца, поскольку считаю, что в оригинале автор допустил неточности. )
HTML
Если придерживаться нашего примера, в котором мы хотим создать электронный вариант записной книжки, то ниже представлены все необходимые компоненты для ее реализации:
- Поле для ввода новых записей (событий, дел и т.п.).
- Кнопка для подтверждения введенной записи.
- Кнопка для очистки уже созданного списка дел.
- Неупорядоченный список, который будет пополняться элементами в виде новых записей.
- И в заключение, нам нужен блок div в качестве контейнера, содержащего выводимые для пользователя сообщения, такие, допустим, как предупреждение о том, что он забыл ввести значение следующей записи, оставив поле ввода пустым.
В результате наша разметка должна иметь примерно такой вид:
Это вполне стандартный HTML шаблон, который мы можем заполнить динамически формируемым контентом с помощью JavaScript .
JavaScript
Применительно к структуре взятого в нашем примере простейшего приложения блокнота, первое, что нам необходимо сделать, это обеспечить отслеживание события нажатия кнопки «Добавить запись» и проверять, введена ли в текстовое поле для записи какая-нибудь информация, то есть в момент нажатия кнопки оно должно быть не пустым. Что-то на пример вот этого:
$("#add").click(function() {
//если текстовое поле не заполнено
$("#alert").html("Внимание! Введите запись в текстовое
поле.");
return false;
}
Вот что мы делаем с помощью этого фрагмента кода. При нажатии кнопки «Добавить запись» мы проверяем, ввел ли пользователь что-нибудь в поле для новой записи. Если он этого не сделал, то появляется предусмотренный нами для вывода сообщений div , информируя пользователя о том, что поле ввода записи не заполнено и затем, по истечении 1000ms (1 секунда) элемент div , а соответственно и сообщение, исчезает. Далее функция возвращает значение false , после чего браузер прекращает выполнение остальной части скрипта и приложение снова готово к вводу новой записи.
Следующим нашим шагом будет добавление в начало списка введенного в поле для записей значения путем генерации нового элемента списка. Таким образом, когда пользователь дописывает еще одну запись, то она всегда будет помещаться в начало списка намеченных дел и ожидаемых событий. После этого нам остается лишь сохранить список с помощью механизма localStorage :
// Добавляем запись в существующий список
$("#todos").prepend("
// Очищаем поле ввода
$("#form").reset();
return false;
});
Как вы, возможно, заметили, здесь нет ничего необычного, используется стандартный вариант jQuery кода. В месте обращения к объекту localStorage мы должны указать сохраняемые нами данные в форме ключ/значение . Для ключа можно использовать произвольное имя, и я назвал его "todos" , далее нужно указать то, что нам, собственно, необходимо сохранить в памяти. В данном случае это полный фрагмент HTML разметки, включаемый в неупорядоченный список (находящийся между тегами ), с помощью которого отображаются все введенные пользователем ранее записи. Из кода видно, что мы просто извлекаем необходимый нам фрагмент с помощью jQuery метода .html() и в конце, выполнив все необходимые действия, устанавливаем возвратное значение функции в false , что предотвращает отправку данных формы и, следовательно, перезагрузку нашей страницы.
Теперь, допустим, наш пользователь ранее уже внес несколько записей и для дальнейшей нормальной работы приложения нам нужно проверить имеется ли в localStorage сохраненная прежде на компьютере информация и если да, то отобразить ее для пользователя. Поскольку имя нашего ключа "todos" , то мы должны проверить его существование следующим образом:
// если в локальном хранилище уже есть данные, то отображаем их
}
Для проверки наличия данных мы использовали обычный if оператор и при выполнении указанного нами условия, просто извлекли из локального хранилища все данные, поместив их в качестве HTML разметки внутри неупорядоченного списка, с помощью которого отображаются введенные ранее пользователем записи.
Если вы проверите работу своего простейшего приложения, то обнаружите, что после перезагрузки страницы все остается на месте. И теперь, последнее, что нам остается сделать, так это создать функцию, с помощью которой пользователь при необходимости смог бы удалить все свои записи. Это реализуется путем очистки localStorage и перезагрузки страницы для активации сделанных изменений. Далее, мы, как и в предыдущем случае устанавливаем false в качестве возвратного значения функции, что предотвращает появление хэша в URL . (*и не прокручивает страницу вверх. ):
// Полная очиска localStorage
window.localStorage.clear();
location.reload();
return false;
});
В результате имеем полностью функционирующее приложение. И собирая все приведенные выше фрагменты воедино, получаем полный код приложения:
$("#add").click(function() {
var Description = $("#description").val();
if($("#description").val() == "") {
$("#alert").html("Внимание! Введите запись в
текстовое поле.");
$("#alert").fadeIn().delay(1000).fadeOut();
return false;
}
$("#todos").prepend("
+ Description + "
$("#form").reset();
var todos = $("#todos").html();
localStorage.setItem("todos", todos);
return false;
});
if(localStorage.getItem("todos")) {
$("#todos").html(localStorage.getItem("todos"));
}
$("#clear").click(function() {
window.localStorage.clear();
location.reload();
return false;
});
Поддержка браузеров.
В HTML5 спецификации предусмотрена достаточно мощная поддержка технологии Web Storage , благодаря чему она также реализована большинством популярных браузеров, даже IE8 . Единственной проблемой остается IE7 , если вас это все еще интересует.
Заключение.
В таких небольших приложениях механизм localStorage может вполне успешно заменить использование баз данных. Для хранения небольших объемов данных совсем не обязательно использовать более сложные альтернативы.
* Примечание переводчика.
Post Views: 475
Хранение данных непосредственно в браузере обладает множеством преимуществ, основное из которых это быстрый и независимый от сети доступ к “базе данных”. На данный момент есть 4 активных метода для этого (плюс один устаревший):
- Локальное хранилище
- Сессионное хранилище
- IndexedDB
- WebSQL (устаревшее)
Куки
Куки это классический способ хранения простых строчных данных внутри документа. Обычно куки отсылаются с сервера на клиент, который может сохранять их, а затем отправлять обратно на сервер в ответ на последующие запросы. Это может быть использовано для таких вещей, как управление сессиями аккаунта или отслеживание пользовательской информации.
Дополнительно куки можно использовать и для простого хранения данных на клиентской стороне. Поэтому они также часто используются для хранения общих данных типа пользовательских настроек.
Базовые CRUD-операции с куки
// Create document.cookie = "user_name=Ire Aderinokun"; document.cookie = "user_age=25;max-age=31536000;secure"; // Read (All) console.log(document.cookie); // Update document.cookie = "user_age=24;max-age=31536000;secure"; // Delete document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT";
Преимущества куки
- Их можно использовать для коммуникации с сервером
- Мы можем определить для куки срок их автоматического окончания вместо того, чтобы удалять вручную.
Недостатки куки
- Они добавляются к загрузке страницы документа
- Они могут хранить небольшое количество данных
- Они могут содержать только строки.
- Потенциальные проблемы с безопасностью.
- Это метод не рекомендуется для хранения данных на клиенте с момента появления Web Storage API (локальное и сессионное хранилище).
Поддержка в браузерах
У куки есть базовая поддержка во всех больших браузерах.
Локальное хранилище
Локальное хранилище это одна из разновидностей Web Storage API , специального API для хранения данных в браузере в формате ключ-значение. Этот API был создан как решение для проблем с куки и является более интуитивным и безопасным способом хранения простых данных внутри браузера.
Хотя технически мы можем хранить в локальном хранилище только строки, это обходится за счет преобразования в JSON. Таким образом мы можем сохранять в локальном хранилище более сложные данные по сравнению с куки.
Базовые CRUD-операции с локальным хранилищем
// Create const user = { name: "Ire Aderinokun", age: 25 } localStorage.setItem("user", JSON.stringify(user)); // Read (Single) console.log(JSON.parse(localStorage.getItem("user"))) // Update const updatedUser = { name: "Ire Aderinokun", age: 24 } localStorage.setItem("user", JSON.stringify(updatedUser)); // Delete localStorage.removeItem("user");
Преимущества локального хранилища
- Предлагает более простой и интуитивный интерфейс хранения данных.
- Более безопасно для хранения данных на клиенте.
- Позволяет хранить больше данных (все 3 пункта - в сравнении с куки).
Недостатки локального хранилища
- Позволяет хранить только строки
Поддержка в браузерах
Сессионное хранилище
Сессионное хранилище это вторая разновидность Web Storage API . Оно точно такое же как и локальное хранилище за исключением того, что данные хранятся только для сессии вкладки браузера. Как только пользователь уходит со страницы и закрывает браузер, данные очищаются.
Базовые CRUD-операции с сессионным хранилищем
// Create const user = { name: "Ire Aderinokun", age: 25 } sessionStorage.setItem("user", JSON.stringify(user)); // Read (Single) console.log(JSON.parse(sessionStorage.getItem("user"))) // Update const updatedUser = { name: "Ire Aderinokun", age: 24 } sessionStorage.setItem("user", JSON.stringify(updatedUser)); // Delete sessionStorage.removeItem("user");
Достоинства, недостатки и поддержка в браузерах точно такие же как и у локального хранилища.
IndexedDB
IndexedDB это намного более сложное и проработанное решение для хранения данных в браузере, так как это низкоуровневый API для хранения на клиенте значительного количества структурированных данных. По своей сути это объектно-ориентированная база данных, основанная на JavaScript, которая позволяет нам легко сохранять и извлекать данные, проиндексированные по ключу.
WebSQL
WebSQL это API для реляционной базы на клиенте, сходное с SQLite. С 2010 рабочая группа W3C прекратила работу над этой спецификацией и этот API больше не является частью спецификации HTML и не должен использоваться.
Куки, которые мы разбирали в предыдущем уроке, очень ограничены: в одной куке может быть всего 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. Просто пропускайте такие видео, посмотрите потом.