Скачать "JSON формат и localStorage в Javascript - разбор"

"videoThumbnail JSON формат и localStorage в Javascript - разбор

01. Базовый Javascript - курс для начинающих разработчиков

01. Базовый Javascript - курс для начинающих разработчиков

Канал: Александр Дудукало

Игра в пары на Javascript. Самое понятное объяснение

Игра в пары на Javascript. Самое понятное объяснение

Канал: Александр Дудукало

Игра в пары на Javascript. Часть 1

Игра в пары на Javascript. Часть 1

Канал: Александр Дудукало

Javascript

Frontend

Skillbox

Скиллбокс

Фронтенд

Разработка сайта

Программирование

JS

Обучение Javascript

Уроки Javascript

Уроки програмирования

Создание приложения

JSON

localStorage

Передача данных

Сохранение данных

00:00:02

Что такое Джейсон формат попробуем его

00:00:05

использовать также мы будем работать с

00:00:07

Local storage это такое хранилище данных

00:00:10

все это мы попробуем и попрактикуем на

00:00:14

таком маленьком приложении мессенджере в

00:00:17

котором мы можем общаться с самими собой

00:00:18

конечно такое примитивное приложение но

00:00:21

здесь есть классная функция сохранения

00:00:24

данных смотрите при обновлении страницы

00:00:26

данные у нас сохраняются Мне кажется это

00:00:29

будет вам интересно попробовать и

00:00:31

поэкспериментировать с этим кодом буду

00:00:34

рад подписке на этот канал для меня это

00:00:36

очень важно комментарии под этим видео с

00:00:39

вашими вопросами или предложениями

00:00:41

лайком и есть ссылка под этим видео на

00:00:45

мой телеграм-канал На нем Я опубликую

00:00:47

исходники этого кода Приятного просмотра

00:00:50

Итак что такое Джейсон Ну можно читать

00:00:54

Джейсон это текстовый формат обмена

00:00:57

данными

00:00:58

Ну или хранения данных или их

00:01:01

представление То есть это значит что

00:01:04

любые данные мы можем

00:01:06

представить преобразовать в текст и

00:01:11

передавать Вообще его часто используют и

00:01:13

сейчас его широко также используют для

00:01:16

обмена клиентской части вашего

00:01:19

приложения серверной То есть вы можете

00:01:21

свои данные на сервер передавать Джейсон

00:01:24

формате Ну или также Джейсон Как Вам

00:01:27

удобно Ну что давайте разбираться что

00:01:30

мне сейчас есть это простой шаблон я его

00:01:33

всегда делаю Думаю уже с ним знакомы

00:01:36

если ранее смотрели мое видео если не

00:01:39

смотрели обязательно смотрите здесь

00:01:41

будет предложенные видео в углу думаю

00:01:43

вам будет Полезно и интересно

00:01:46

это HTML файл индекс HTML с названием и

00:01:50

подключением стилей нормальная CSS и

00:01:53

styless нужный мне для стилизации это

00:01:57

подключение скрипта внутри

00:01:59

сам скрипт пока пустой и файлы стилей

00:02:02

Вот они пока здесь ничего такого нет

00:02:05

мы к этому еще Вернемся но сначала

00:02:07

разберемся с самим форматом я перехожу в

00:02:10

файл index.js вот Ну давайте разбираться

00:02:13

Я создаю простую переменную назову

00:02:16

переменную А

00:02:18

это бы просто число 12 давайте это

00:02:22

значение число 12 поместим в

00:02:26

нутри баде в текст контент документ

00:02:31

есть точка Body то есть берем наш Body

00:02:35

нашего нашего сайта нашего приложения и текст

00:02:38

контент то есть мы хотим чтобы на экране

00:02:41

мы сейчас увидели внутри Бади число 12

00:02:44

то есть а равно А запускаем и смотрим

00:02:47

Что у нас получается я немного увеличу

00:02:49

Мы видим что у нас здесь на экране

00:02:51

появляется в браузере число 12 Я

00:02:54

открываю режим и наблюдаем что внутри

00:02:56

Бади прямо вот здесь вот находится число

00:02:59

12 То есть это работает то есть мы

00:03:02

сейчас заменим эту

00:03:05

это число на какую-то строку Привет

00:03:08

сохраняем да то есть у нас а строка

00:03:11

помещается внутрь текст контент Баги и

00:03:14

мы видим сейчас Привет на экране Вот так

00:03:16

мы можем в базе что-то класть или ложить

00:03:18

есть

00:03:21

дальше что если мы сейчас сделаем массив

00:03:25

массив это тоже данные да чистил

00:03:28

каких-нибудь делаем через запятую вот

00:03:30

так вот и смотрим мы видим массив то

00:03:33

есть JavaScript отлично работает с

00:03:35

выводом массивов текст контент Но что

00:03:38

если я например Здесь сделаю объект это

00:03:41

будет объект фигурный скобках

00:03:43

Илья запятая H

00:03:47

12 лет возраст давайте без кавычек даже

00:03:52

чтобы разные тип данных что мы сейчас

00:03:54

Увидим как вы думаете можете остановить

00:03:57

видео поставить его на паузу а потом

00:03:59

вернуться

00:04:01

Ну что Надеюсь вы

00:04:04

подумали вот я показываю что мы сейчас

00:04:07

видим на экране это у нас уже не объект

00:04:10

мы здесь видим object object то есть что

00:04:14

это объект типа объект но

00:04:18

да Вот такая история как же нам сейчас

00:04:20

эти данные вывести в текстовом формате

00:04:24

прямо на экран мы можем для этого

00:04:26

использовать специальное преобразование

00:04:28

мы можем преобразовать этот объект в

00:04:31

Джейсон формат для того чтобы это

00:04:34

сделать Мы должны использоваться

00:04:35

встроенные JavaScript функции Ну что для

00:04:39

того чтобы работать Джейсоном У нас есть

00:04:40

специальный объект Так он называется

00:04:43

Джейсон Джейсон Пишем с большой буквы

00:04:46

Обратите внимание у этого объекта есть

00:04:49

методы да то есть функции для работы

00:04:52

точка и видите Какие внутри него есть

00:04:55

методы это парс и стринги файл Давайте

00:04:58

работать с ними Что делать с тренды Файт

00:05:00

стринге файл преобразовав преобразует

00:05:05

наши данные строку от слова string да то

00:05:09

есть

00:05:10

тракаризация какая-нибудь Да наверно так

00:05:13

перевести Это правильно

00:05:15

или строкизация не знаю Джейсон стринге

00:05:19

файл как удобно когда

00:05:22

редактор кода вместо нас вводят все

00:05:25

слова

00:05:26

и части кода в скобочках мы должны

00:05:30

поставить сюда данные какие-то например

00:05:31

число 12 подставляю но я просто вам

00:05:34

показываю То есть это простые данные что

00:05:36

мы сейчас увидим текст контент смотрите

00:05:38

в текст контент мы видим 12 Если мы

00:05:41

поставим сюда строку

00:05:43

какую-нибудь тоже видим строку но в

00:05:46

кавычках Обратите внимание то есть это

00:05:48

строка уже в кавычках потому что она

00:05:51

преобразована в Джейсон формат что если

00:05:55

мы подставим сюда массив Обратите

00:05:56

внимание

00:05:57

Я сейчас через запятую пишу числа и как

00:06:00

сейчас мы будем видеть этот массив

00:06:02

теперь мы видим квадратные скобочки то

00:06:05

есть эта функция сделала из массива

00:06:07

просто строчку То есть это как текст

00:06:09

получается это даже как

00:06:12

давайте

00:06:13

это выглядит сейчас внутри текста

00:06:17

контент вот так как строка Да вот в

00:06:20

таком виде То есть это не массив эта

00:06:22

строка же да уже получилось добавились

00:06:24

кавычки так и здесь эта функция

00:06:26

преобразовывает строку что если я

00:06:29

поставлю Наш А нашу переменную там же

00:06:32

объект как мы сейчас видим наш объект

00:06:34

Теперь мы наш объект видим в том виде

00:06:37

который он в коде Но это строка

00:06:40

то есть эта строка в таком виде мы

00:06:42

добавляем сюда кавычку открывающую и

00:06:44

закрывающую вот так да это код убираем

00:06:49

получается переносы И вот такой вид

00:06:52

преобразован у нас объект вот он же

00:06:57

это и называется Джейсон формат то есть

00:07:00

для того чтобы нам преобразовать

00:07:04

объект какой-то Да массив что угодно в

00:07:07

Джейсон формат то есть текстовый формат

00:07:10

мы используем

00:07:13

json.tringfy давайте сделаем B и

00:07:17

поместить и помещаем туда

00:07:18

преобразованную нашу строку Вот то есть

00:07:21

б хранится строка

00:07:23

для уверенности еще выведу в консоль

00:07:26

Давайте посмотрим Вот видите у нас

00:07:29

строка и в консоли Мы тоже видим строку

00:07:31

это не объект

00:07:33

хорошо Как же нам теперь обратно

00:07:36

преобразовать наш на нашу строку json

00:07:41

обратно в объект чтобы мы могли с ним

00:07:43

работать чтобы если например хочу

00:07:45

получить ней то я не смогу это сделать

00:07:47

потому что б сейчас это строка у строки

00:07:50

нет видите undefine этого свойства но

00:07:53

такое свойство есть объект вот поэтому

00:07:55

мы сделаем новую переменную C равно

00:07:59

также пишем g-son точка parts или pers

00:08:06

преобразовывай преобразуем Нашу строку

00:08:09

Джейсон б подставляем тут же строка

00:08:12

обратно в объект и ввожу в консоль то

00:08:16

сейчас в консоли увидите опять объект

00:08:18

видите Мы можем с ним работать мы можем

00:08:20

например взять C точка name вывести в

00:08:23

консоль Да только Илья то есть Мы

00:08:27

научились сейчас брать

00:08:29

данные какие-то преобразовать их мы

00:08:32

можем теперь в строку и обратной и

00:08:36

строки сделать объект или массив Или

00:08:38

простой тип данных то есть здесь вы

00:08:40

можете подставлять любой тип данных

00:08:42

поэкспериментируйте поставьте любой тип

00:08:45

данных и посмотрите что в итоге вы

00:08:46

будете получать кстати существует онлайн

00:08:49

конвертеры которые вы можете

00:08:50

использовать для конвертации json Я уже

00:08:53

ввел в Яндекс игры сам конвертер

00:08:55

открываю вторую ссылку здесь мы видим

00:08:58

как бы два поля левая часть это формат

00:09:01

json здесь уже преобразованный объект То

00:09:04

есть если я здесь что-то меняю мы увидим

00:09:06

изменения сразу же в онлайн режиме и

00:09:09

здесь да Или например то что то меняю Мы

00:09:12

видим что здесь идет преобразование

00:09:13

Джейсон то есть слева Джейсон формат а

00:09:17

справа уже построены объект Да вы можете

00:09:19

вставлять сюда json строку и вы увидите

00:09:22

результат на экране Например если сейчас

00:09:25

выведу в консоль сейчас да то есть нашу

00:09:28

жизнь строчку она в консоли у нас я ее

00:09:32

копирую

00:09:33

Вставляю вот сюда и мы видим полученный

00:09:37

объект то есть получаем преобразование

00:09:39

да возможно вам пригодится онлайн

00:09:42

конвертер json когда вы будете работать

00:09:44

с данными еще раз скажу что Джейсон

00:09:47

широко используется для обмена данными

00:09:49

между сервером и клиентской частью

00:09:53

сервера это удаленный какой-то компьютер

00:09:55

а клиентская часть это

00:09:57

сам сайт или само приложение которым

00:10:00

пользуется конечный потребитель

00:10:02

пользователь хорошо Сейчас мы с вами

00:10:05

разобрались что такое Джейсон как с ним

00:10:08

работать да как делать преобразование

00:10:10

стринге файл преобразует в строку Да

00:10:14

какой-то тип данных какие-то данные а

00:10:17

парк преобразует обратно из строки в

00:10:20

данные То есть это может быть строка это

00:10:24

может быть Объект это может быть массив

00:10:27

Ну что давайте Теперь попробуем

00:10:29

попрактиковать Я хочу сейчас конечно

00:10:32

сделать кавычках кавычках простейшим

00:10:34

мессенджер Ну грубо говоря даже не так

00:10:37

давайте Messenger но без диалога с

00:10:40

кем-то диалог с самим собой будет Вот но

00:10:44

для этого я начну делать следующее Я

00:10:46

создаю форму я буду делать это сразу

00:10:48

здесь наша будет форма

00:10:51

с классом

00:11:01

добавить сообщение

00:11:04

есть дальше я здесь создаю Input

00:11:08

например давайте я помещу его в

00:11:11

какой-нибудь пустой Пока что да без

00:11:13

класса Input текст Я указываю этому

00:11:16

Input ID name

00:11:26

и placeholder укажу надеюсь вы никуда не

00:11:29

спешите Вот кстати буду рад подписки на

00:11:33

этот канал надеюсь он вам нравится и

00:11:35

понравится placeholder имя это будет

00:11:38

такой простейший мессенджер то есть

00:11:41

буквально без фанатизма буду делать

00:11:43

Просто чтобы он продемонстрировать

00:11:45

кстати покажу немножко Что такое Local

00:11:47

Stories тоже текст Aria вот name я

00:11:51

указывать пока не буду Вот лучше конечно

00:11:54

оказывать но я не буду

00:11:57

сокращенно

00:12:00

точнее

00:12:04

все и placeholder сообщение

00:12:09

Ну и конечно же кнопка отправить будет у

00:12:12

нас да

00:12:19

Button

00:12:21

ID цент

00:12:25

отправить как мы сейчас видим это все на

00:12:29

экране Давайте перейдем на экран вот это

00:12:31

сейчас выглядит Вот так я не могу меньше

00:12:33

размеры чтобы это Примерно вот так вот

00:12:35

было Ну я заранее уже подготавливал

00:12:37

класс контейнер который выполняет

00:12:39

центрирование контейнер

00:12:42

Вставляю эту форму туда и добавлю

00:12:45

заголовок H1 Да ну сообщение напишу

00:12:50

Вот это будет заголовок нашего

00:12:51

мини-приложения есть Смотрим как это

00:12:55

выглядит сейчас довольно таки большое

00:12:57

поле для текста Да я пожалуй меньше

00:12:59

количество строк сделаю 4

00:13:02

есть вот так сейчас это все выглядит но

00:13:06

хочется чтобы все выглядело крайне

00:13:08

Конечно красивее до симпатичнее Давайте

00:13:10

будем использовать библиотеку bootstrap

00:13:13

я вожу здесь будет строп 4 до ее будет

00:13:17

недостаточно перехожу на этот сайт

00:13:20

документация кликают быстрый Старт вот

00:13:23

листа прям при вас все показываю это

00:13:26

библиотека которая помогает нам

00:13:27

создавать быструю стилизацию чего-либо

00:13:30

вот нам предлагают подключить boostrap

00:13:33

почему-то указанная версия 5 Давайте ее

00:13:36

подключим уже я копирую эту часть кода

00:13:39

нам понадобится вот копируем конечно

00:13:43

желательно еще подключить скрипты вот

00:13:46

эти вот если вам нужны будут модальные

00:13:47

окна или что-то еще но я сейчас это не

00:13:50

буду мне модальные окна сейчас не нужны

00:13:52

подключаю после нормалайз обязательно

00:13:54

вот здесь вот bootstrap есть подключили

00:13:57

что-то нам дает Теперь мы можем

00:13:59

добавлять нашим элементам какие-то

00:14:01

дополнительные стили потому что вот

00:14:03

здесь в файле находится специальные

00:14:05

классы Итак формы кликаю сюда Да листаем

00:14:09

ниже Я хочу добавить какие-то настройки

00:14:11

для нашей формы первым делом я добавлю

00:14:13

класс для Дива в нашей для создания

00:14:16

отступов Да вот здесь

00:14:18

первый второй

00:14:21

и добавлю пожалуй

00:14:24

тут я буду делать не класс я буду делать

00:14:27

ID пожалуй

00:14:28

месседж И добавляю Здесь тоже класс для

00:14:31

формы сейчас это выглядит вот так вот на

00:14:33

экране видите появились отступы

00:14:35

благодаря этому классу вы в этом видео

00:14:38

по моему еще и учитесь использовать

00:14:40

bootstrap Ну не думаю что это страшно

00:14:42

есть

00:14:44

далее Я хочу стилизовать Intel я буду

00:14:48

уже использовать вот эти классы которые

00:14:49

здесь есть копирую и Вставляю вот сюда

00:14:52

для Input сюда Вставляю и тексты тоже

00:14:56

ставлю проверяем как это выглядит сейчас

00:14:59

но это выглядит пока что никак почему-то

00:15:02

странно

00:15:05

класс форм А я скопировал не тот класс

00:15:09

конечно я скопировал лейбл нам нужно

00:15:12

использовать форму Control

00:15:15

копируем вот сюда вставляем

00:15:20

есть

00:15:22

есть проверяем

00:15:25

вот сейчас это выглядит вот так вот на

00:15:27

экране Ну хорошо и осталось кнопку

00:15:30

стерилизовать чтобы украсть ее тоже вот

00:15:33

классы для кнопки рекомендую очень

00:15:36

рекомендую изучить Тут куча всего есть

00:15:38

Это очень полезно То есть если вы хотите

00:15:40

что-то делать быстро для быстрого

00:15:41

стилизации

00:15:42

добавляем форме отправить Вот сейчас Так

00:15:45

выглядит теперь наша кнопка тут эффекты

00:15:47

сразу есть в общем-то все достаточно

00:15:49

красиво сделано дальше что я хочу

00:15:52

сделать Я хочу добавить сейчас

00:15:54

специальный список для наших сообщений

00:15:57

то есть то место куда будут добавляться

00:15:59

наши сообщения это будет

00:16:03

ID у него будет

00:16:05

месседж Ну мессенджер лист назову его Да

00:16:09

вот здесь будут ли пока создаю их так

00:16:13

ули будут классы какие-то Да месседж

00:16:16

план

00:16:18

даже не буду писать мастер я сразу буду

00:16:21

создавать добавлять классы bootstrap

00:16:23

Итак ищем здесь списки нам нужно

00:16:26

работать с списка со списками Да таблицы

00:16:29

типографика может быть здесь полистаем

00:16:32

Давайте

00:16:34

Пока что ничего здесь не вижу прям вот в

00:16:37

онлайн режиме все делаю Да таблицы

00:16:39

иллюстрации контрольные точки тут много

00:16:41

всего просто меняется

00:16:46

возможно что-то подзабыл группа кнопок

00:16:48

значки уведомления

00:16:52

Давайте в поиске списке

00:16:55

группа списков но я думаю вот этого

00:16:58

будет достаточно Да вот для

00:17:01

использования списков я буду

00:17:02

использовать класс видите Вот пример

00:17:05

есть лист групп я его копирую Вот так и

00:17:08

указываю для нашего ул вот а для я буду

00:17:12

указывать Класс вот отсюда

00:17:15

копирую его Они все будут пока что

00:17:17

одинаковыми

00:17:20

внутри здесь будет у нас первое это

00:17:22

заголовок H2 имя да и параграф с текстом

00:17:29

Для текста тоже я буду использовать

00:17:31

boottrapские классы тут есть типографика

00:17:34

раздела да

00:17:39

Давайте его найдем Вот она Да тут мы

00:17:43

используем какие-то настройки для наших

00:17:45

параграфов ниже

00:17:49

Вот например такой

00:17:55

какой-то текст сделаем лором 22

00:17:59

проверяем как это выглядит сейчас в

00:18:01

браузере вот так будет выглядеть наше

00:18:03

сообщение То есть это сообщение от

00:18:05

одного пользователя который мы будем

00:18:07

отправлять

00:18:09

Ну что я пожалуй наверное да пусть так и

00:18:12

остается продолжим далее нам нужно

00:18:15

сделать JavaScript код Итак я пока что

00:18:19

это закомментирую Потому что эти

00:18:21

сообщения будем создавать через

00:18:22

JavaScript вот у нас есть подключенный

00:18:26

ниже скрипт

00:18:27

index.js Вот то есть он подключен внизу

00:18:30

и поэтому нам не нужно Здесь дом контент

00:18:34

вот я бы сделал бы наверное но пока что

00:18:37

не буду я бы рекомендовал делать Итак у

00:18:41

нас есть форма вот для того чтобы нам ее

00:18:43

использовать у него есть ID вот такой

00:18:45

вот ID Обратите внимание нам нужно

00:18:47

привязать к ней события

00:18:50

Ну чтобы использовать нам нужно получить

00:18:52

ее сначала документ из дом дерева Get

00:18:55

Element by ID по ID получаем и указываем

00:18:59

имя ID так как мы используем Get

00:19:02

elementby ID решетку мне здесь писать не

00:19:05

нужно

00:19:06

привязываемся Будьте сами

00:19:09

здесь мы прописываем тип события то есть

00:19:12

мы создаем реакцию на отправку формы

00:19:14

нажатие на нажатие кнопку кнопки

00:19:17

Отправить сообщение запятая function

00:19:20

обязательно здесь пишу Event она нам

00:19:23

понадобится и вот тут мы что-то будем

00:19:25

делать смотрите какой момент Возможно вы

00:19:28

с этим уже знакомы но я поясню еще один

00:19:30

раз

00:19:31

форма при нажатии на кнопку отправить на

00:19:35

эту переадресует нас по этому адресу то

00:19:38

есть у нас будет переход поэтому адресу

00:19:41

пустому даже мы не хотим этого Поэтому

00:19:43

Мы отменяем это действие это действие

00:19:46

заложено браузером по умолчанию чтобы

00:19:48

его не было как раз мы используем этот

00:19:50

аргумент внутри функции Кстати это

00:19:53

callback функция по колбеков функциям У

00:19:55

меня есть отдельное видео Я рекомендую

00:19:57

его посмотреть Если вы не смотрели и не

00:20:00

знакомы с этим чтобы вас

00:20:02

термин вообще не Пугало

00:20:05

точка

00:20:06

Мы отменяем стандартные действия формы

00:20:09

Давайте выведем консоль что-нибудь при

00:20:12

попытке отправить форму какой-то текст и

00:20:15

открываю консоль вот да закрою вот это

00:20:18

все вот наша консоль я что-то ввожу

00:20:20

отправить видите мы отправляем

00:20:22

появляется текст но страница не

00:20:24

перезагружается это важно

00:20:27

Всё теперь нам нужно сделать следующее я

00:20:30

получу данные из наших текстовых полей

00:20:32

валидацию я делать не буду Да у меня

00:20:34

кстати по валидации тоже есть видео

00:20:36

надеюсь тут появится подсказка

00:20:37

обязательно посмотрите ее Да если вам

00:20:39

интересно кстати вам интересно вот

00:20:42

Поставьте

00:20:44

лайк где-то до справа или слева если вам

00:20:47

интересно

00:20:48

и подписочку если вам очень интересно

00:20:52

кстати меня телеграм-канал есть на нем Я

00:20:55

публикую

00:20:56

исходники этой работы может быть Вам

00:20:59

тоже будет полезно посмотреть лет

00:21:04

и name

00:21:09

пользователя имя которое от которого мы

00:21:12

получаем сообщение или отправляем

00:21:15

получаем документ

00:21:18

точка Get Element by ID

00:21:21

тоже получаем элемент по ID в кавычках

00:21:24

указываем ID нашего текстового Поля с

00:21:28

именем вот оно да сразу же получаем

00:21:31

значение в Илью то есть значение внутри

00:21:34

которому вводим без скобочек Обратите

00:21:36

внимание то же самое Я делаю с текстовым

00:21:40

полем для сообщения но у него ID другое

00:21:42

message

00:21:44

вот пишу

00:21:51

и масочки Input Давайте выведем в

00:21:53

консоль эти результаты username

00:21:55

conster Lock usmail смотрим я ввожу

00:21:59

что-то мы видим при отправке нас

00:22:01

выводится имя но я думаю что также будет

00:22:03

из сообщения Давайте протестируем

00:22:06

добавляем есть то есть мы видим что все

00:22:09

прекрасно срабатывает сообщение

00:22:10

появляется внизу То есть это значит что

00:22:12

мы правильно получили эти значения

00:22:14

дальше нам нужно создавать наш элемент

00:22:17

Первое что я сделаю да

00:22:20

это создам ли LED Ну можно использовать

00:22:23

конст кстати конт равно даже без равно

00:22:27

айтем

00:22:30

или itemessage

00:22:34

равно документ точка Creed Element мы

00:22:37

создаем один элемент это у нас ли далее

00:22:41

этому ли мы добавляем класс ли точка

00:22:45

класс лист

00:22:52

и я вас специально сделал заранее эту

00:22:55

конструкцию чтобы потом можно было

00:22:57

перенести в JavaScript код я копирую

00:22:59

этот класс и подставляю вот сюда вот

00:23:02

сделали далее мы создаем это же копирую

00:23:05

Да вот часть кода H3 заголовок

00:23:09

name item title назовем Да это будет H3

00:23:15

у нас H2 не H3 и этому я просто видите

00:23:19

заранее сделал Я знаю что это H2

00:23:22

и этому H2 мы добавляем текст текст

00:23:27

контент Если вы хотите видео под дом

00:23:29

элементам вообще что я делаю здесь что я

00:23:32

делаю Тут и так далее подробное видео

00:23:35

пожалуйста Напишите об этом в

00:23:37

комментариях текст контент

00:23:40

равно и

00:23:44

что нам нужно нам нужно вот этот вот

00:23:46

username для того чтобы создать

00:23:48

заголовок да

00:23:50

и также создаем параграф

00:23:53

P

00:23:55

Ой там текст

00:23:59

назовем его Да у нас там будет

00:24:02

получается вот этот текст message тут мы

00:24:06

тоже используем текст потому что мы ему

00:24:08

добавляем текст но еще нам осталось мы

00:24:10

добавить Класс Класс лист

00:24:13

и в кавычках мы пишем название класса

00:24:17

называется его копирую и добавляю вот

00:24:20

сюда то есть при отправке формы при

00:24:24

нажатии отправить у нас создаются все

00:24:26

эти элементы мы сделали но мы их не

00:24:29

добавили друг в друга У нас есть it mess

00:24:32

нужно внутри него добавить

00:24:35

сначала наш заголов заголовок

00:24:39

и также мы добавляем

00:24:42

это внутрь

00:24:45

параграф Да вот этот вот наш айтом текст

00:24:48

тоже добавляем внутрь Ну и осталось

00:24:51

добавить наше сообщение в ул вот в этот

00:24:54

ул у него есть класс точнее тач лист

00:24:58

получаем его из дом дерева документ

00:25:01

элемент by ID Да Нам нужно его получить

00:25:05

поэтому ID и точка epn добавляем Да наш

00:25:10

айтем message проверяем нашу работу и

00:25:13

так надеюсь ошибок не будет вводим

00:25:16

какой-то текст нажимаем отправить и

00:25:18

сразу же видим ошибку Мы молодцы кстати

00:25:20

видите ошибка здесь отображается на

00:25:22

какой именно строчки то есть индекс

00:25:25

восьмая строчка это очень удобно Я

00:25:28

перепутал здесь написал ли места а это

00:25:31

message поэтому я стараюсь это была

00:25:34

ошибка я ошибся

00:25:35

вот нажимаем отправить опять у нас

00:25:38

ошибка 11 строчка что же я делаю я опять

00:25:41

ошибаюсь давайте-ка видите

00:25:42

внимательность поздно записываю это

00:25:45

видео Вот кстати когда вы любите

00:25:47

работать больше Днем или вечером вот мне

00:25:50

удобнее работать с кодом вечернее время

00:25:52

ночное Как вы видите Ну как-то спокойнее

00:25:55

что ли тише как-то да не отвлекают

00:25:58

сообщения и вот как-то

00:26:01

не знаю Ну конечно бывает такие моменты

00:26:04

с ошибками вот при нажатии отправили нас

00:26:07

появляется сообщение кликаю еще раз

00:26:09

появляется новое сообщение Можем даже

00:26:11

другое имя написать Мы видим что

00:26:13

сообщение появляются отлично Ну что я

00:26:16

хочу все-таки код писать более знаете

00:26:19

разобранным то есть разбирать большие

00:26:22

какие-то задачи на более мелкие под

00:26:24

задачи мне это помогает делать функции

00:26:27

то есть мы понимаем что для создания

00:26:29

одного сообщения у нас есть может быть

00:26:32

специальная функция Да function Create

00:26:36

New message то есть функция создания

00:26:38

нового сообщения в нее будут передавать

00:26:41

два аргумента первый name второй message

00:26:44

вот так да вот и тело нашей функции вот

00:26:48

мы создаем функцию инициализируем ее я

00:26:51

этот код весь копирую и помещаю внутрь

00:26:54

этой функции я не случайно делаю еще

00:26:56

одну функцию она пригодится вот и в нее

00:27:00

помещаю сейчас сюда

00:27:02

вот у нас теперь в этой функции

00:27:05

сообщения хранится имя точнее переменной

00:27:08

вставляем вот сюда моя страница

00:27:12

так есть

00:27:16

Ну и конечно же нам нужно эту функцию

00:27:18

вызывать вот здесь то есть тут мы

00:27:20

инициализируем описываем а здесь мы ее

00:27:23

вызываем при отправке формы и Передаем

00:27:25

ее два параметра username и message

00:27:27

запятая есть смотрим

00:27:31

добавляем что-нибудь Должно все работать

00:27:33

также видите все опять также срабатывает

00:27:37

вот есть то есть например пишу Саша

00:27:43

Привет вам всем

00:27:49

отправляем и мы видим сообщение от Саши

00:27:51

Привет вам всем отлично Я немного

00:27:54

доработаю код Я хочу чтобы эти данные

00:27:57

сюда попадали в виде объекта то есть что

00:27:59

это просто сделаю Смотрите Я создаю LED

00:28:03

message object Да это будет объект пока

00:28:07

пустой тут будет два параметра name

00:28:09

name мы будем брать отсюда вот он Да

00:28:13

запятая message

00:28:16

message Давайте при отправке этот объект

00:28:19

будем просто вводить в консоль вот так Я

00:28:22

вывожу вывожу то есть мы данные

00:28:24

упаковали в объект так с ними работать

00:28:26

проще видите у нас объект Вот то есть

00:28:29

чтобы нам получить мы пишем точка

00:28:31

например

00:28:36

видим сообщение на экране только имя не

00:28:40

сообщение Вот то есть мы получили имя

00:28:42

нашего пользователя

00:28:45

а вот и получается что мы можем теперь в

00:28:49

этой функции оставить один аргумент

00:28:50

общий назову Я его вот мы этот объект

00:28:55

Передаем в эту функцию так как у нас

00:28:57

данные здесь хранятся виде объекта то ли

00:28:59

чтобы получить ней мы должны писать

00:29:01

обжиг.н вот тут у нас name Да вот в

00:29:06

таком виде в объекте поэтому пишем точку

00:29:08

А здесь object точка message ничего не

00:29:11

изменилось принципе да Но это нам

00:29:12

поможет есть вот мы видим хорошо далее

00:29:17

что я хочу сделать мне хочется чтобы

00:29:20

сейчас наши сообщения сохранялись чтобы

00:29:23

я мог перезагружать страницу Да и Мы их

00:29:27

видели в сохраненном виде как это

00:29:30

реализовать Но обычно сообщение хранят

00:29:32

на сервере то есть на удаленном

00:29:34

компьютере чтобы мне сделать мне

00:29:36

придется создавать сервер до подключать

00:29:39

это куча куча работ Я сейчас пока делать

00:29:41

так не буду я буду использовать другой

00:29:43

способ хранения он называется Stories в

00:29:47

браузере есть такое хранилище точнее у

00:29:49

каждого сайта в браузере есть хранилище

00:29:52

куда вы можете запихивать что-то что-то

00:29:54

сохранять это называется локос торидж

00:29:57

локальное хранилище Я кликаю на вкладку

00:30:01

приложение

00:30:02

локальное хранилище Вот здесь она может

00:30:05

называться на английском языке кстати и

00:30:07

вот наш сайт я пока его очищаю у меня

00:30:09

здесь были данные это то место где вы

00:30:12

можете что-то хранить Вот как нам сюда

00:30:15

что-то добавить Давайте я вам покажу вот

00:30:17

здесь вот заранее я сделаю следующее

00:30:20

также обращаюсь к Local Stories

00:30:22

специальная зарезервированный объект и

00:30:25

есть такой метод Set it вот в скобочках

00:30:29

я пишу название ключа то есть грубо

00:30:32

говоря переменной например name

00:30:35

запятая и указываю имя или я то есть при

00:30:39

запуске этого кода у нас Local Stories

00:30:42

появится

00:30:43

Илья включенным перезагружаю смотрите

00:30:47

видите появляется на Илья также я могу

00:30:50

сохранять

00:30:53

например H в виде числа

00:30:56

12 лет

00:30:59

вот так видите хранится но я не могу

00:31:03

хранить объекты То есть если я сейчас

00:31:05

попытаюсь этот объект сохранить Вот

00:31:08

здесь

00:31:11

Ну давайте сделаю какой-то объект новый

00:31:14

я скопирую это и массивы также не могу

00:31:17

Да на массивы конечно будут строки

00:31:19

например это будет объект name

00:31:21

какой-нибудь

00:31:24

смотрите что получается у нас здесь

00:31:26

хранится теперь объект видите

00:31:29

то есть мы не можем хранить объекты но

00:31:33

мы можем хранить

00:31:35

данные представленные в виде строки мы

00:31:38

можем данные представлять в виде строки

00:31:40

да

00:31:42

Давайте дата назову мы можем этот объект

00:31:46

преобразовать строчку json pars

00:31:51

и вставляем наш объект смотрите что

00:31:53

получается перезагружаем

00:31:58

а я парси использую я ошибся стринги фай

00:32:01

конечно чтобы нам превратить в строку мы

00:32:03

используем стринги файл Вот видите

00:32:05

теперь данные хранятся в виде строки как

00:32:08

же нам их получить обратно чтобы

00:32:10

получить Обратно мы используем другой

00:32:12

способ но я буду вводить в консоль

00:32:13

полученные данные также Обращаемся к

00:32:15

Local Stories точка Get It Ну и вот Для

00:32:19

чего Нам нужен ключ именно по ключу мы

00:32:21

можем сказать браузеру какие именно

00:32:24

данные хотим получить в данном случае

00:32:26

хочу получить Поэтому сейчас я в консоли

00:32:29

увижу Ну и вы вместе со мной тоже у

00:32:31

детей или я вот то есть мы данные

00:32:34

извлекли обращаю Ваше внимание смотрите

00:32:36

Я вот сейчас это комментирую код вот

00:32:40

этот вот закомментировал он больше не

00:32:42

работает я перезагружаю страницу и мы

00:32:45

видим что эти данные сохранились они

00:32:47

хранятся в браузере

00:32:49

даже когда вы его закроете они там

00:32:51

сохранятся даже когда выключить

00:32:52

компьютер Вот то есть получить данные

00:32:57

Давайте получим H

00:33:00

Да вот у нас консоли наш возраст и

00:33:04

Давайте получим Что там у нас дата дата

00:33:08

кстати переводится не когда-то а данные

00:33:10

не путайте дата это данные дате это как

00:33:14

раз таки дата

00:33:15

дата Вот но данный мы получили опять же

00:33:19

видеть строки нам нужно их обратно

00:33:21

преобразовать Джейсон в объект Поэтому

00:33:24

json точка pars Передаем сюда наши ведь

00:33:29

локоть вернет Да она вернет эта функция

00:33:32

строку и подставляем И теперь мы видим

00:33:35

что здесь объект

00:33:37

Ну все все что я сейчас рассказал

00:33:39

поможет нам хранить данные

00:33:42

смотрите при первой загрузке приложения

00:33:45

я должен получить данные из Local

00:33:47

storage давайте это сделаем LED дата

00:33:51

равно Local storage Get

00:33:56

alten Ну и мы будем получать дата

00:34:00

Давайте

00:34:03

лист

00:34:05

то есть список сообщений вот я предлагаю

00:34:10

хранить наши данные в виде массива лет

00:34:18

это пока что будет пустой массив нам это

00:34:22

нужно создавать пустой массив Потому что

00:34:24

если при первом запуске у нас Lock

00:34:26

Stories не будет то массив будет пустым

00:34:28

Итак проверяем есть ли у нас здесь

00:34:30

что-то есть дата точка

00:34:33

дата не равно пустой строке строки и

00:34:39

дата не равно ну

00:34:42

То есть если там что-то есть если есть

00:34:44

там данные мы можем делать парсинг Мы

00:34:47

можем лист присвоить

00:34:53

точка парс И партим наши данные если мы

00:34:58

не будем делать эту проверку и

00:35:00

попытаемся передать в парс вот сюда

00:35:02

пустую строчку то мы можем получить

00:35:03

ошибку Да мы не хотим ошибки есть

00:35:07

Давайте выводить наш массив консоль

00:35:11

вот здесь выводим в консоль при первом

00:35:13

запуске Он пустой там ничего еще нет ну

00:35:16

что же теперь самое интересное при

00:35:18

добавлении нового дела Мы можем в наш

00:35:21

массив пока он пустой добавить новое

00:35:23

дело в виде объекта Давайте делать это

00:35:27

вот

00:35:28

листочка Push и вот наш объект

00:35:33

добавляем его вот то есть добавляем

00:35:37

новое сообщение Вот нажимаем отправить

00:35:40

Пока ничего не происходит Мы только

00:35:42

видим сообщение здесь

00:35:44

хорошо

00:35:46

Кстати Давайте после отправки сообщения

00:35:48

были наши текстовые поля очищать я вот

00:35:51

так вот сделаю здесь вот прям да

00:35:54

копирую это

00:35:57

равно пустоте

00:36:00

И здесь тоже конечно так делать не очень

00:36:02

хорошо лучше эти дом элементы положить в

00:36:05

отдельную переменную я сделаю

00:36:06

по-быстрому то есть при отправке

00:36:08

сообщения нас текстовая прядь очищаются

00:36:10

видите чтобы мы могли ввести новое

00:36:12

сообщение есть я имя кстати не буду

00:36:16

удалять пусть она будет чтобы постоянно

00:36:18

его не вводить а сообщение буду удалять

00:36:20

то есть вот мы добавляем что наши данные

00:36:24

Так давайте же этот массив сохраним

00:36:26

Local Stories Да чтобы сделать

00:36:29

сохранение мы знаем мы используем блоков

00:36:31

Stories

00:36:34

точка сет айтем Мы обязательно должны

00:36:37

называть запись также как и здесь при

00:36:40

получении и добавляем сюда Да сохранение

00:36:44

Им что-то мы должны сохранить наш массив

00:36:47

Но помните что мы массив сохранять не

00:36:50

можем просто так объектов нам нужно

00:36:53

преобразовать в строку Джейсон тема ведь

00:36:56

видео Джейсон поэтому Джейсон парс

00:37:00

стринге файл

00:37:02

строку преобразовываем и Передаем наш

00:37:06

массив Теперь смотрите что происходит

00:37:08

Первая загрузка приложения его загружаю

00:37:11

Она загружается в нашем блока Stories

00:37:15

еще ничего нет я очищу то есть вот

00:37:18

ничего нет Да когда мы нажимаем

00:37:22

отправить срабатывает этот код мы

00:37:25

получаем текстовые значения из текстовых

00:37:27

полей создаем объект этот объект

00:37:30

добавляем пока еще пустой массив потому

00:37:32

что это условие не срабатывало там пусто

00:37:35

и делаем сохранение этого массива когда

00:37:39

мы еще раз добавляем новое дело мы опять

00:37:41

добавляем второе сообщение в этот массив

00:37:44

там уже будет два сообщения и опять

00:37:45

сохраняем локоть

00:37:47

при перезагрузке нашего приложения при

00:37:51

перезагрузке опять срабатывает этот код

00:37:53

но весь Да но в Data уже что-то есть да

00:37:58

И мы увидим что в месседж-лист там уже

00:38:01

будут сообщения Да я вот сейчас буду

00:38:03

выводить консоль вот так проверяем

00:38:07

смотрите

00:38:09

приложение добавляю новое сообщение

00:38:12

какое-то нажимаем отправить видите тут

00:38:16

появилась Джейсон строка Вот она кстати

00:38:19

смотрите как преобразовался перенос

00:38:21

видите перенос символов Вот так вот

00:38:25

вот такие символы вставляются видите тут

00:38:28

уже два объекта в этом массиве Джейсон

00:38:30

формате кстати ниже браузер на панельке

00:38:33

делает преобразование конвертирует в

00:38:35

понятные нам объект Это очень удобно то

00:38:37

есть теперь мы храним данные в виде json

00:38:41

строки Local storage потому что мы не

00:38:43

можем хранить в виде массива только в

00:38:44

виде строки Ну или числа есть да все

00:38:49

научились сохранять и теперь при первом

00:38:52

при перезагрузке приложения у нас

00:38:55

срабатывает этот код блоков Stories есть

00:38:57

данные и мы делаем парсинг то есть мы

00:39:00

преобразуем обратную строку в массив И

00:39:03

теперь в консоли мы вводим массив

00:39:05

смотрите видите это массив наших

00:39:07

сообщений вот Ну и конечно же при

00:39:11

получении данных из массива мы можем

00:39:14

допустить

00:39:17

Привет Это у нас массив вот он Да один а

00:39:20

это давайте назовем message одно

00:39:22

сообщение и для ниже сюда помещаю Да у

00:39:26

нас уже заранее есть специальная функция

00:39:28

создания одного сообщения Вот она я

00:39:31

просто вызываю и передаю наш объект и

00:39:34

здесь у нас хранится объект ведь у нас в

00:39:36

массиве хранятся объекты помните через

00:39:39

запятую наших сообщений каждый объект по

00:39:42

очереди внутри этого цикла Вот это будет

00:39:45

подставляться внутри месседж и

00:39:47

подставляться в эту функцию А наша

00:39:49

функция умеет работать с объектами нужно

00:39:52

учили это делать Мы специально здесь

00:39:54

убрали два параметра сделали одно чтобы

00:39:58

можно было работать с объектами и

00:40:00

смотрите я перезагружаю страницу теперь

00:40:02

данные берутся из Local Stories и

00:40:04

выводятся вот в таком виде Да Саша

00:40:07

например вводим какой-то текст

00:40:09

отправляем перезагружаю смотрите

00:40:11

сохраняется Игорь и что-то вводим то

00:40:14

есть мы видим что мы сделали такой

00:40:16

простой менеджер Да мы пока что общаемся

00:40:19

сами с собой Ну ничего страшного

00:40:21

нам интересно самим с тобой правда вот

00:40:25

изучили с вами Джейсон формат json Jason

00:40:29

как угодно Назовите Да не думаю что это

00:40:32

играет большую роль

00:40:34

изучили коснулись Local storage Да

00:40:38

научились что-то получать из текстовых

00:40:42

полей не обрабатывать отправку формы

00:40:44

по-моему очень интересное видео

00:40:46

получилось а Как вам кажется интересное

00:40:48

видео или нет вы можете сказать об этом

00:40:51

в комментариях Мне будет очень приятно

00:40:53

если Вы меня поддержите вы можете

00:40:55

поставить лайк мне тоже это очень

00:40:57

приятно

00:40:58

подписка на канал это

00:41:00

то к чему я всегда стремлюсь вот Конечно

00:41:04

я стремлюсь к тому что видео были

00:41:06

полезными Вот и

00:41:08

я читаю комментарии стараюсь на них

00:41:11

отвечать И мне всегда очень приятно это

00:41:13

делать Вот это мне мотивирует на работу

00:41:16

надеюсь вам комфортно смотреть мои

00:41:19

ролики Вот и надеюсь вы будете это

00:41:22

делать а исходники этого кода будут в

00:41:24

Telegram канале ссылка на который ниже

00:41:27

под этим видео Спасибо что вы были со

00:41:29

мной сегодня да потратили время и до

00:41:34

встречи

Описание:

Разбираю на примере формат передачи данных JSON в Javascript с использованием сохранения данных в localStorage. 👁‍🗨 Телеграм канал: https://t.me/frontend_du2 👁‍🗨 Discord сервер: https://discord.com/invite/frontend 👁‍🗨 VK: https://vk.com/frontend_du2 👁‍🗨 Дзен: https://dzen.ru/frontend_it

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

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

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

Как можно скачать видео "JSON формат и localStorage в Javascript - разбор"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "JSON формат и localStorage в Javascript - разбор" выбрать?

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

Почему компьютер зависает при загрузке видео "JSON формат и localStorage в Javascript - разбор"?

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

Как скачать видео "JSON формат и localStorage в Javascript - разбор" на телефон?

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

Как скачать аудиодорожку (музыку) в MP3 "JSON формат и localStorage в Javascript - разбор"?

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

Как сохранить кадр из видео "JSON формат и localStorage в Javascript - разбор"?

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

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

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