Иногда можно столкнуться с необходимостью сохранять какие-то данные, доступ к которым бы сохранялся и после перезапуска браузера.
На ум сразу приходят Cookies, но куки удобны не всегда. Что же делать в этом случае? Ответ прост: воспользоваться локальным хранилищем браузера (Local Storage). Что же представляет из себя данное хранилище? Local Storage представляет собой список строк ключ/значение. Работать с локальным хранилищем невероятно просто. Local Storage – это не база данных, поэтому вам не придется учить язык запросов SQL. Вся работа сводится к нескольким методам, которые позволяют сохранять, удалять, изменять данные.
Откройте консоль своего браузера F12 (Chrome, Firefox) GTRL+SHIFT+I (Opera) и перейдите на вкладку Application.
Затем в панели слева выберите вкладку Local Storage и кликните хранилище с именем сайта (в моём случае – это http://testing-local-storage.loc).
В основной панели расположена таблица с двумя полями: key и value. В поле key сохраняется имя ключа, а в поле value значение ключа.
Для работы с локальным хранилищем в JavaScript есть объект LocalStorage, у которого, в свою очередь, есть методы:
key() – данный метод позволят проверить наличие ключа. Метод принимает строковый параметр (имя ключа). Если такой ключ существует, метод возвращает его имя, если же ключ не найден, то вернётся null;
getItem() – метод читает значение ключа. Принимает один строковый параметр (имя ключа) и возвращает значение, если ключ существует, а если ключ с указанным именем отсутствует, вернет undefined;
setItem() – метод позволяет установить значение ключа. Принимает два строковых параметра: имя ключа и значение. Если ключа с указанным именем не существует, ключ будет создан, а если существует, то значение ключа будет заменено на новое.
removeItem() – метод удаляет ключ. Принимает имя ключа и, если такой ключ существует, он будет удалён.
clear() – метод очищает таблицу полностью. Все данные будут удалены.
length – данное свойство содержит количество записей в хранилище.
Создадим несколько записей.
Теперь посмотрим на вкладке application на результат.
Как видите, у нас есть три новых записи. Теперь давайте изменим значения ключей.
Видно, что внесенные изменения применились. Теперь давайте выведем количество записей в хранилище, затем проверим, существует ли ключ с именем lastname и, если такой ключ существует, удалим его. Затем снова выведем количество записей.
Как видим, сначала у нас было три записи, а после удаления осталось две. Удостоверимся, что отчество удалилось.
Отчество в списке отсутствует. Теперь давайте проверим, существуют ли записи в хранилище и, если они существуют, очистим хранилище полностью.
Видим, что количество записей стало равно нулю и в хранилище какие-либо записи отсутствуют.
И напоследок создадим маленькое приложение. Наше приложение будет состоять из двух текстовых полей, в которые мы будем писать имя и фамилию и кнопки “очистить”. На текстовых полях мы будем обрабатывать событие keyUp (это событие, которое возникает в тот момент, когда кнопка на клавиатуре отпущена). В обработчике события мы будем сохранять введенный текст в хранилище Local Storage. На кнопке "очистить" мы будем обрабатывать событие click и по нажатию будем очищать наше хранилище.
Так же мы будем обрабатывать событие load (событие возникает в момент загрузки страницы). В обработчике мы будем проверять, существуют ли в хранилище ключи name и surname и, если они существуют, заполним поля данными из ключей.
Создадим файл index.html со следующей разметкой:
В браузере это будет выглядеть следующим образом.
Затем создадим файл app.js и создадим обработчик события load.
Теперь добавим внутрь обработчика load обработчик события keyup поля с именем.
Также следом добавим обработчик keyup на поле с фамилией.
И в конце добавим ещё обработчик события click на кнопке “очистить”
Заполним поля и посмотрим на результат во вкладке application
Видим, что данные успешно сохранились. Теперь нажмём на кнопку очистить.
Видим что данные их хранилища исчезли. Можно было бы ещё очистить и сами поля ввода. Но вы можете дописать недостающий код сами. Для этого в обработчик события klick по кнопке надо добавить две строчки кода:
document.getElementById('name').value = '';
document.getElementById('lastName').value = '';
Кроме объекта localStorage существует также объект sessionStorage. У данного объекта есть точно такие же свойства и методы, а отличие лишь в том, что localStorage сохраняет внесенные данные и после закрытия страницы или при перезагрузке. А вот sessionStorage хранит данные, пока существует страница, а после её закрытия или после перезагрузки данные очищаются.
На этом всё.
