localStorage в javascript

Давайте рассмотрим подробнее. LocalStorage представляет собой своего рода ячейку памяти в которую мы можем записать чего-нибудь и этим дальше попользоваться. Т.е. это какая-то память, которую используем. Зачем они нужны? Я думаю, вы часто видели на сайтах возможность сохранять свои данные. Или Вас запоминает страничка и говорит. Запомнить Вас?

Итак, далее. В этом плане мы можем полностью рассчитывать на localStorage . Своего рода куки есть, которые в браузере хранятся и ими мы действительно можем пользоваться для таких целей, чтобы где-то запомнить нас и потом к тому, что запоминаем, уже обратиться. Т.е. это банально запись. Вот плюс localStorage в том, что мы можем записать на одной страничке данные, а на другой к этому обратиться. Итак, мы разберем, где нужен localStorage, как с ним работать и разберем все это дело на примере, и зачем они нужны. Поехали! Как мы можем их использовать и зачем они нам нужны мы уже поняли. Это всего-навсего ячейка памяти, куда мы чего-то записываем. А теперь давайте все это посмотрим на деле. Создадим первый файлик. Пусть это будет index.html. Дадим ему классическую структуру данных. Здесь запишем, что это localStorage. И здесь внутри сделаем что-нибудь интересное. Как мы можем записывать данные в localStorage. Если нам надо что-нибудь куда-нибудь записать определенно нам нужно будет работать с тегом script.

Давайте начнем все с построения плана:

Создадим переменную, имя пользователя.

Записать имя пользователя в localStorage.

Обратимся к записанной переменной на другой странице.

Это наш краткий план того , что мы будем делать. Что первое мы хотим сделать? Читаем, создать переменную, имя пользователя. Давайте создадим. В тегах script напишем переменную. Пусть будет var userName и назовем его Иван. Наша задача записывать в localStorage нашу переменную. Для записи в localStorage сначала к нему обратимся. Давайте напишем localStorage.setItem(‘ ’); LocalStorage всегда записывается в виде переменной ключа и значения. Всегда есть своего рода принцип. Сначала мы создадим имя переменной, а потом туда записываем то, что мы хотим записать. Точно также на деле происходит с localStorage. В начале говорим название ключа (нашу переменную), а потом в него пишем саму переменную.

Ну вот и поехали. Первым делом userName пусть будет, или myuser. Это будет ключ нашего localStorage. А в его значение мы запишем userName, который имеет значение Иван.

localStorage.setItem(‘myuser’,username);

Таким образом происходит запись. Т.е. мы сейчас выполнили первое действие записали переменную и имя пользователя. Второе действие, записать имя пользователя в localStorage мы тоже выполнили. И третий пункт нашего блокбастера - это обратиться к записанной переменной на другой страничке. Давайте обратимся пока на этой страничке к этой переменной, к нашей переменной localStorage. Как мы можем к ней обратиться? Давайте попробуем ее куда-то вывести. Пускай это будет у нас console.log. Но сейчас сделаем акцент, если хотим показать внутри нашей переменной что-то, обратиться не записывать, мы должны говорить не setItem, а getItem. Мы говорим. А ну-ка, выведите нам нашего пользователя, который тут есть, пользователя, которого мы тут у вас сохраняли. Это как раз даст возможность вывести. Поэтому здесь мы пишем, что это у нас вывод и выводим из localStorage нашего пользователя.

console.log(localStorage(‘myuser’));

Давайте попробуем посмотреть, а как же это у нас будет работать. Что скажет нам консоль?

localStorage пишется через букву S большую всегда. Еще раз проверяем. Видим, что у нас здесь звучит Иван. Т.е. мы записали в localStorage переменную, а потом ее вычитали. Отлично! По-моему все сработало. А как же нам посмотреть, что мы сделали на другой страничке. Я же заявил о том, что localStorage может помнить то, что у них записывается. Давайте сделаем ссылку на другую страничку. Пусть это у нас будет файл second.html.

<a href=”second.html”> Second page</a>

Наша цель вывести localStorage на второй страничке. Скопируем:

 console.log(localStorage.getItem(‘myuser’));

и выведем на другой странице, естественно, в тегах script. Вот вставляем, давайте посмотрим. Будет ли это работать? Т.е. сейчас , когда мы перейдем на другую страничку. На second. У нас внизу консоли должна, точно так же появиться наша переменная Иван. Поехали, мы переходим. По-моему, все видно. Т.е. вот мы явно находимся на другой странице. Здесь мы показываем в консоли это значение. Вот таким образом мы можем передавать данные с одной страницы на другую с помощью localStorage. Это та же кука, только элегантно обернута и которая нам дает возможность элегантно и красиво пользоваться ею. И чтобы уже более, как бы качественно, и более интересно попробовать это все дело закрепить, я предлагаю домашку.

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

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

Попробуйте это сделать - Должно обязательно получиться.

А если что-нибудь будет не так, то пишите, будем отвечать. Поможем разобраться. Все! Успехов! Вам счастливо!

Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на:
скайп: olegg.pann
telegram, viber - +380937663911
додавайтесь у телеграм-канал: t.me/webyk
email: oleggpann@gmail.com
ми у fb: www.facebook.com/webprograming24
Обов`язково оперативно відповімо на усі запитіння

Javascript / Jquery

Узнать подробнее