background top icon
background center wave icon
background filled rhombus icon
background two lines icon
background stroke rhombus icon
header logo icon

Скачать "Урок 17. JavaScript. Все о LocalStorage"

input logo icon
"videoThumbnail Урок 17. JavaScript. Все о LocalStorage
Похожие ролики из нашего каталога
|

Похожие ролики из нашего каталога

Теги видео
|

Теги видео

js
javascript
js this
js уроки
javascript уроки
уроки javascript
владилен минин
уроки js
выучить javascript за час
учим javascript
как выучить javascript
javascript практика
localstorage
локалсторидж
Субтитры
|

Субтитры

subtitles menu arrow
  • enАнглийский
Скачать
00:00:02
говорим про сложные элементы внутри
00:00:04
языка java script простым языком
00:00:06
конкретно в этом видео мы будем говорить
00:00:08
про lacoste же
00:00:10
и вы правильно можете заметить что не
00:00:12
такой уж ты и сложный момент однако с
00:00:14
ним есть определенные нюансы которые
00:00:16
особенно начинающим будет достаточно
00:00:18
сложно понять поэтому в этом коротком
00:00:20
видео мы разберем все особенности
00:00:23
относящиеся к locust о вич и для начала
00:00:26
стоит понять а что такое вообще локус
00:00:28
тоже но из дословного перевода это
00:00:31
означает что это локальное хранилище и
00:00:34
прелесть этого локального хранилища
00:00:36
который находится именно в вашем
00:00:38
браузере заключается то что вы там
00:00:41
можете хранить любые данные и они будут
00:00:44
доступны у вас после перезагрузки
00:00:45
страницы то есть это очень такая
00:00:49
локальная и импровизированная база данных для
00:00:52
именно вашего браузера и чуть позже мы
00:00:55
поговорим про область его действия
00:00:57
теперь что касается непосредственно и
00:01:00
пьянь и как он работает
00:01:02
допустим я создаю переменную май намба
00:01:05
и конечно же это будет значение 42
00:01:10
потому что это отвечает на все вопросы
00:01:12
тем не менее мы хотим допустим сохранить
00:01:16
эту переменную волоку стоишь и для
00:01:19
работы с блока старриджа мы просто
00:01:21
обращаемся к глобальной переменной в том
00:01:24
случае если мы работаем в браузере то
00:01:27
есть здесь я прошу обратить ваше
00:01:29
внимание на то что если это но джесс то
00:01:31
там локуса уже нет это только браузерная
00:01:33
пей но получается он через глобальный объект
00:01:38
local storage он кстати доступен в
00:01:41
объекте
00:01:43
window да то есть вот он и у него есть
00:01:46
некоторое количество методов
00:01:48
то есть первый базовый метод для того
00:01:51
чтобы получить что-то из блока старриджа
00:01:54
мы вызываем метод get a этом ну и
00:01:57
допустим я хочу получить значение намбер
00:01:59
и сразу же давайте это выведу в консоль
00:02:05
если я обновлю страницу я получаю здесь
00:02:07
mouth
00:02:08
ну потому что здесь я просто создает
00:02:12
число
00:02:13
дальше я хочу его получить но его там
00:02:14
естественно нет значит для того чтобы
00:02:19
записать что-то в locust орешь-то мы
00:02:22
вызываем у него метод сайт а этом на то
00:02:25
есть здесь у нас букет здесь мы уже
00:02:28
что-то записываем и метод сет этом он
00:02:31
принимает себя два значения первое
00:02:33
значение это ключ по которому нужно
00:02:35
сохранить что-то в моем случае это нам
00:02:38
бы ну и второй аргумент это само
00:02:41
значение
00:02:42
но здесь видно что в шторм не уже
00:02:45
подсказывает что это значение должно
00:02:47
быть строкой да если мы записываем сюда
00:02:49
число май намба то это сработает но вы
00:02:55
по чтобы не подчеркивает что
00:02:57
несовпадение типов давайте посмотрим
00:03:01
после того как мы записали все ли там
00:03:02
сохранилась значит и обновлю страницу и
00:03:05
действительно мы здесь получаем значение
00:03:07
42 да потому что когда мы записываем
00:03:12
автоматически вызывается метод tostring
00:03:14
дано чтобы ваш то например не ругался
00:03:16
здесь мы можем явно указать ту string
00:03:18
это первый момент который стоит важно
00:03:21
понимать проволоку стоит что в
00:03:23
действительности он умеет работать
00:03:25
только со строками и больше несколькими
00:03:27
типами данных то есть даже когда мы
00:03:29
делаем гетто этом намбер а мы все равно
00:03:31
получаем здесь строчку 42 они число
00:03:35
данном случае мы получаем 2 концу logo
00:03:38
потому что мы до этого записали и дальше
00:03:42
мы снова получаем то есть после
00:03:43
перезагрузки страницы это все равно у
00:03:45
нас доступна кстати мы можем посмотреть
00:03:49
что у нас вообще находится в оку
00:03:51
старриджа вдв туз мы можем перейти во
00:03:55
вкладку applications и здесь есть поле
00:03:59
сторож здесь эти вообще много чего
00:04:02
интересного есть плюс у меня на канале
00:04:04
есть подробный ролик про работаю с
00:04:06
дебаггер ом для работы с network source
00:04:10
и так далее то есть в том числе там
00:04:13
затрагивать тему applications
00:04:14
но сейчас если мы перейдем в поле локус
00:04:18
to reach и здесь мы увидим такую запись
00:04:22
это локалхост
00:04:23
63 3
00:04:25
42 порт до определенной если мы
00:04:28
посмотрим то этот порт на котором я
00:04:30
работаю это то что вы котором добавляет
00:04:32
то есть у вас вероятно это будет
00:04:33
какое-то другое значение здесь как раз
00:04:36
таки важно понимать что local storage он
00:04:38
работает для текущего домена то есть
00:04:42
данном случае домена у меня является
00:04:44
данный локальный хост
00:04:45
если допустим буду работать на другом
00:04:47
сайте скажем в каком-то все что я
00:04:50
записываю волоку стоишь она будет тонар
00:04:52
меня ассоциироваться с текущим доменом
00:04:55
да если я работаю на другом домене это
00:04:57
прошлое данные они будут недоступны если
00:05:02
мы раскроем данные поле то мы увидим что
00:05:04
здесь у нас присутствует ключ набор и
00:05:06
его значение 42
00:05:08
то что хранится в локус торджи также
00:05:12
локу старых же есть другие полезные
00:05:14
методы такие как например удаление
00:05:17
определенного ключа ну и скажем здесь я
00:05:20
хочу удалить ключ
00:05:22
нам бы давайте мы вызовем этот метод
00:05:26
перец тем то есть сейчас по идее мы
00:05:29
начали удалим и когда мы будем получать
00:05:32
у нас будет null да потому что у нас у
00:05:35
удалено значение нам но после этого мы
00:05:37
сделаем сайт и должны получить вторым
00:05:39
консоль магом уже нужное нам значение
00:05:42
отменным страницу мы получаем
00:05:44
соответствующий результат
00:05:45
то здесь тоже думаю понятно что мы
00:05:47
просто удаляем ну и соответственно есть
00:05:49
метод лукас тоже кольер который просто
00:05:51
берет и полностью очищает локу сторож да
00:05:54
то есть если я обновлю страницу мы все
00:05:56
равно почем логе да потому что
00:05:58
очищаем мы после получения данных
00:06:02
но если посмотрим в апликэйшен the local
00:06:06
storage нас будет пустым да потому что
00:06:08
мы удалили все то есть clear
00:06:10
выбирает все remove a этом уделяет
00:06:12
только нужный нам ключ в чем есть нюансы
00:06:17
при работе с local storage и то есть
00:06:20
например я создам объект с базовыми
00:06:25
полями например name будет макс и лишь
00:06:28
при будет 20
00:06:31
и я хочу сохранить этот объект в local
00:06:35
storage то есть здесь я пишу local storage set
00:06:41
ой там допустим я все это хочу занести в
00:06:45
ключ персон и сюда я складываю объект
00:06:53
однако если я обновлю страницу то волоку
00:06:57
столь же мы видим ключ person но в более
00:07:01
пылью мы получаем объект объект почему
00:07:05
как я и говорил о пустой шумит работ
00:07:08
только со строками и если мы допустим
00:07:12
получим доступ нашего объекта объект мы
00:07:15
получаем его нужные значения но когда
00:07:18
все это записывается в лагос .
00:07:21
мы у объекта вызываем метод tostring это
00:07:24
базовый метод который присутствует в
00:07:26
прототип базово и вызывая этот метод
00:07:29
приводя его к строке это объекта мы
00:07:31
получаем значение объект объект как раз
00:07:34
таки то что мы сейчас и видим в поле
00:07:35
applications
00:07:37
но мы не хотим общем-то обжиг потому что
00:07:39
все данные наше стираются то есть как
00:07:41
поступить в таком случае как записать
00:07:44
данный объект в locust орешь для этого
00:07:47
нам необходимо воспользоваться другим
00:07:50
глобальным объектом который называется
00:07:52
джейсон
00:07:53
который работает соответственно с
00:07:55
жетонами и объектами у него есть два
00:07:58
метода это парс и стринги фай если мы
00:08:02
вызовем это стринги фай и передадим него
00:08:04
объект посмотрите что получится обновляю
00:08:09
страницу и здесь мы уже получаем нужный
00:08:12
нам объект в ключе person то есть что
00:08:16
делает вообще джейсон стринги fight у
00:08:19
нас есть объект
00:08:20
если мы его помещаем в джейсон стринги
00:08:25
фай
00:08:29
то на выходе мы получаем здесь
00:08:32
строчку строчку но в этой строке в
00:08:35
формате джейсон содержатся данные нашего
00:08:37
объекта на то есть если мы проверим тип
00:08:41
это у нас string они объект type of
00:08:44
просто объект это у нас объект в этом
00:08:47
краски разницы что мы в оку стоишь
00:08:50
складываем строчку
00:08:53
теперь мы хотим получить то что у нас
00:08:57
лежит в лоб авторе ja для этого я могу
00:09:00
создать переменную допустим рон и сейчас
00:09:03
я объясню почему я так назвал мы
00:09:07
обращаемся к луку старриджа с помощью
00:09:10
метода get a этом получаем доступ к
00:09:12
ключа person ну и допустим мы хотим
00:09:16
изменить возраст этого человека скажем
00:09:20
давайте выше и не поменяем скажем там .
00:09:25
name равно будет выделен и посмотрим на
00:09:30
то что такое у нас
00:09:35
однако если мы обновим страницу то мы
00:09:39
получаем здесь вот такую строчку то есть
00:09:42
это похоже на наш объект до который мы
00:09:45
сохранили волку столь же здесь можно
00:09:47
sata этом убрать потому что он остро там
00:09:49
хранится обновляю страницу он страну на
00:09:52
вас доступен как видно ими мы здесь не
00:09:55
поменяли если мы промоем обратиться к
00:09:57
скажем .
00:09:58
речь и она не страниц мы получаем здесь
00:10:04
он define то есть получая данные из лука
00:10:07
старриджа у нас нет доступа до простых
00:10:11
ключей и это логично потому что на самом
00:10:14
деле если мы проверим тип переменной
00:10:18
роту мы видим что здесь находится у нас
00:10:21
string то есть эта строка опять же
00:10:24
потому что луку сторож умеет работает
00:10:25
только со строками они с объектами и
00:10:28
поэтому для того чтобы нам получить
00:10:30
объект вместо строки здесь мы должны
00:10:33
вызвать обратное действие методу джейсон тенге
00:10:35
фай а конкретно это джейсон
00:10:37
pars
00:10:39
но здесь мы ну можно type of оставить мы
00:10:43
получим 10 объект а если мы уберем type
00:10:46
of the вот мы получаем уже обычный
00:10:48
объект с которым можно работать то есть
00:10:51
правильно это выглядит таким образом мы
00:10:53
создаем персон и парсим то что получили
00:10:58
из блоку старриджа и теперь уже мы можем
00:11:02
обращаться допустим у куклы нему и
00:11:04
смотреть на то изменилось ли это так
00:11:07
видим действительно изменилось то есть
00:11:09
это в принципе вся наука который
00:11:11
относится к луку служу при работе с
00:11:14
объектами мы просто вызываем две
00:11:17
обратные операции и тот же сон стринги
00:11:19
фай или джейсон парс если хотим привести
00:11:22
из таких к объекту кстати это работает и
00:11:26
в других случаях так что можете
00:11:27
пользоваться
00:11:29
какие еще есть особенности при работе с
00:11:33
lacoste режим на самом деле если здесь и
00:11:37
добавлю комментарий такой мы работаем с
00:11:40
ним и допустим наше приложение открыто в
00:11:42
разных вкладках то мы можем это все дело
00:11:45
синхронизировать с помощью специальных
00:11:47
событий которые может прослушивать
00:11:49
объект мендл для лаку старриджа
00:11:51
мы обращаемся к винту добавляем события
00:11:55
либо таким образом который называется
00:11:57
100 речь здесь получаем и band
00:12:00
альтернативный способ это написать
00:12:02
windows phone storage функция
00:12:07
и так далее но я пойду с таким способом
00:12:09
нем больше нравится просто визуально и
00:12:12
давайте посмотрим на это событие
00:12:14
остальные консоль логе я думаю что можно
00:12:16
убрать то есть данное событие вызывается
00:12:20
тогда когда что-то записывается в лагос
00:12:23
тоже то есть я обновляю страницу
00:12:25
слушатель у меня есть ну и допустим я
00:12:29
могу обратиться к луку сторожем и
00:12:30
записать него что-то покажем в ключ там
00:12:34
ну например дейт на у
00:12:40
ту string нажимаю enter и мы видим что у
00:12:46
нас нет никакого конца и logo
00:12:48
ивенты хотя если посмотрим в locust
00:12:51
орешь-то от нас есть temps time штампом
00:12:55
почему так потому что здесь есть один
00:13:00
нюанс в том плане что это событие
00:13:02
вызывается в том случае если во вкладке
00:13:06
того же самого домена происходит запись
00:13:10
в лог а сторож причем в другой вкладке
00:13:12
то есть если что-то происходит в этой
00:13:14
вкладке то события не вызывается значит
00:13:18
для того чтобы это проверить я здесь
00:13:20
уберут хэш и у меня текущей домен это
00:13:23
локалхост порт и дальше просто индекс
00:13:27
html то есть я беру дублирую данный код
00:13:31
а точнее данную вкладку
00:13:38
и теперь допустим здесь вот в этой
00:13:40
вкладке 1 я попробую что-нибудь записать
00:13:42
в lacoste rich видим что у нас здесь
00:13:46
ничего нет новой вкладке мы уже получаем
00:13:49
сторож event а потому что вот точно
00:13:51
такой же вкладке но в другой мы что-то
00:13:53
записывали волоку старик но если мы
00:13:56
посмотрим на данное событие то мы увидим
00:13:58
здесь много полезных элементов то есть
00:14:00
тут есть прошлое значение которое было
00:14:03
текущее значение юрий по которому где мы
00:14:08
сделали изменения для того чтобы понять
00:14:10
что произошло но и очень то другие
00:14:13
данные
00:14:15
штампы и прочее вот основные значения и
00:14:19
the key data есть над какими на нами шла
00:14:22
манипуляции о дуэлью нею вылетел и и
00:14:28
р-р-раз .
00:14:29
я так понимаю что здесь хранятся в
00:14:31
принципе и другие значения которые есть
00:14:34
в local storage
00:14:35
зачем это нужно но представьте что
00:14:37
допустим вы работаете в какой-нибудь
00:14:39
стираем системе где у вас много вкладка
00:14:42
открыта и вам нужно менеджера клиентов и
00:14:44
так далее да на разных страницах
00:14:46
но в рамках обычно часто данные
00:14:49
обновляются и для того чтобы
00:14:51
синхронизировать все эти вкладки вы
00:14:53
можете пользоваться как раз таки вот
00:14:56
подобной конструкции на этом что
00:14:58
касается блага старджон меня все это
00:15:01
действительно есть вся теория поэтому я
00:15:03
надеюсь что теперь вам стало много более
00:15:05
понятно как с ним работать и в
00:15:08
заключение хочу сказать еще несколько
00:15:09
отличий которые вы можете встретить
00:15:11
например на собеседовании вопросы
00:15:13
например чем отличается локу стоишь от
00:15:16
kuki
00:15:18
есть 2 основных отличия то есть в
00:15:21
основном lacoste же он намного больше по
00:15:25
объему чем cookies обычно это примерно 5
00:15:29
мегабайт
00:15:30
размер клоков сторожу то есть пять
00:15:32
мегабайт данных вы можете хранить
00:15:33
локального в браузере
00:15:35
но основное отличие от kuki заключается
00:15:38
в том что cookies они улетают также с
00:15:40
запросами на сервер и это не совсем
00:15:43
secure потому что то что у вас хранится
00:15:44
в cookie может прочитать распарсить
00:15:46
сервер ну и как-то использовать это
00:15:48
своих нуждах
00:15:49
лукус товарищ свою очередь он не улетает
00:15:52
с куками на сервак то есть это только
00:15:54
ваше локальное хранилище к которому вы
00:15:56
имеете доступ поэтому теперь я надеюсь
00:16:00
вам совсем стало понятно солоку
00:16:01
старриджа если это действительно так то
00:16:06
подписывайтесь на канал ставьте лайк и
00:16:08
оставляйте комментарии ставьте
00:16:09
колокольчики также посмотрите на данные
00:16:12
плейлист целиком потому что здесь много
00:16:13
чего полезного
00:16:14
но мы с вами увидимся уже в других
00:16:17
роликах

Описание:

Получить профессию Frontend разработчика - https://result.school/products/junior-js Подробнее узнать об обучении в Result School - https://t.me/result_jfd Бесплатный курс HTML & CSS - https://result.school/products/html-css Сделать 5 проектов на JavaScript - https://result.school/products/marathon-js Я в соц сетях: Telegram: https://t.me/js_by_vladilen VK: https://vk.com/vladilen.minin Instagram: https://www.facebook.com/unsupportedbrowser Мои паблики по JavaScript: Telegram: https://t.me/result_school_it VK: https://vk.com/result.school Instagram: https://www.facebook.com/unsupportedbrowser JavaScript cообщества: Discord: https://discord.com/invite/jscommunity Telegram: https://t.me/js_by_vladilen_chat Roadmap по каналу: https://vladilen.notion.site/Roadmap-YouTube-0b917095c1ec424e9574c2ede36efab9 Все о LocalStorage Сложный JavaScript простым языком: https://www.youtube.com/watch?v=aQkgUUmUJy4&list=PLqKQF2ojwm3l4oPjsB9chrJmlhZ-zOzWT

Готовим варианты загрузки

popular icon
Популярные
hd icon
HD видео
audio icon
Только звук
total icon
Все форматы
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

mobile menu iconКак можно скачать видео "Урок 17. JavaScript. Все о LocalStorage"?mobile menu icon

  • Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.

  • Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.

  • UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

mobile menu iconКакой формат видео "Урок 17. JavaScript. Все о LocalStorage" выбрать?mobile menu icon

  • Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

mobile menu iconПочему компьютер зависает при загрузке видео "Урок 17. JavaScript. Все о LocalStorage"?mobile menu icon

  • Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

mobile menu iconКак скачать видео "Урок 17. JavaScript. Все о LocalStorage" на телефон?mobile menu icon

  • Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

mobile menu iconКак скачать аудиодорожку (музыку) в MP3 "Урок 17. JavaScript. Все о LocalStorage"?mobile menu icon

  • Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

mobile menu iconКак сохранить кадр из видео "Урок 17. JavaScript. Все о LocalStorage"?mobile menu icon

  • Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

mobile menu iconСколько это всё стоит?mobile menu icon

  • Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.