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

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

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

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

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

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

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

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

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

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

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

Javascript

Frontend

Skillbox

Скиллбокс

Фронтенд

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

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

JS

Обучение Javascript

Уроки Javascript

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

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

JSON

localStorage

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

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

00:00:02

what Jason format is, we will try

00:00:05

to use it, we will also work with

00:00:07

Local storage, this is a data storage,

00:00:10

we will try and practice all this on

00:00:14

such a small messenger application in

00:00:17

which we can communicate with ourselves,

00:00:18

of course, such a primitive application, but

00:00:21

there is a cool function for saving

00:00:24

data, look, when you refresh the page, the

00:00:26

data is saved with us. I think it

00:00:29

will be interesting for you to try and

00:00:31

experiment with this code. I will be

00:00:34

glad to subscribe to this channel. For me, this is

00:00:36

very important. Comments under this video with

00:00:39

your questions or suggestions,

00:00:41

like and there is a link under this video on

00:00:45

my telegram channel On it I will publish

00:00:47

the source code of this code Enjoy watching

00:00:50

So what is Jason Well, you can read

00:00:54

Jason is a text format for data exchange

00:00:58

Well, or storing data or

00:01:01

representing it That is, this means that

00:01:04

we can convert any data we can

00:01:06

present into text and

00:01:11

transfer In general, it is often used and

00:01:13

now it is also widely used to

00:01:16

exchange the client part of your

00:01:19

application with the server part. That is, you can

00:01:21

transfer your data to the server in Jason

00:01:24

format, or also Jason. Whichever is

00:01:27

convenient for you. Well, let’s figure out what

00:01:30

I have now, this is a simple template, I’ll use it I

00:01:33

always do it I think you’re already familiar with it

00:01:36

if you’ve watched my video before if

00:01:39

you haven’t watched it be sure to watch here there

00:01:41

will be suggested videos in the corner I think

00:01:43

you will find it useful and interesting

00:01:46

this is an HTML file index HTML with the name and

00:01:50

connection of styles normal CSS and

00:01:53

styles I need for styling this is

00:01:57

connection of the script inside

00:01:59

the script itself is still empty and the style files

00:02:02

Here they are, there’s nothing like that here

00:02:05

yet. We’ll come back to this, but first

00:02:07

let’s look at the format itself. I’ll go to the

00:02:10

index.js file. Well, let’s figure it out.

00:02:13

I’ll create a simple variable, I’ll call it

00:02:16

a variable. And

00:02:18

this would be just the number 12, let’s

00:02:22

we will place this value of the number 12 in the inside of the

00:02:26

bad in the text content document

00:02:31

there is a point Body that is, we take our Body of

00:02:35

our site of our application and the text

00:02:38

content that is, we want on the screen

00:02:41

we now see the number 12 inside the Badi,

00:02:44

that is, and is equal to A we launch and look

00:02:47

What we get, I’ll enlarge it a little.

00:02:49

We see that

00:02:51

the number 12 appears on the screen here in the browser. I

00:02:54

open the mode and see that inside the

00:02:56

Badi, right here, there is the number

00:02:59

12. That is, it works, that is, we will

00:03:02

now replace this

00:03:05

this number with some- then

00:03:08

we save the line Hello, yes, that is, we have a line

00:03:11

placed inside the text content Bugs and

00:03:14

we see now Hello on the screen This is how

00:03:16

we can put something in the database or put it down,

00:03:21

then what if we now make an array, an

00:03:25

array is also data and cleaned

00:03:28

some something we do, separated by commas

00:03:30

like this, and we look, we see an array, that

00:03:33

is, JavaScript works fine with

00:03:35

outputting arrays of text content. But what

00:03:38

if, for example, here I make an object, it

00:03:41

will be an object in curly brackets

00:03:43

Ilya comma H

00:03:47

12 years age, let's do it without quotes, even

00:03:52

for different data types what we are now

00:03:54

We'll see what you think you can do is stop

00:03:57

the video, pause it and then

00:03:59

return

00:04:01

Well, I hope you've

00:04:04

thought, I'm showing what we now

00:04:07

see on the screen, this is no longer an object, we

00:04:10

see an object object here, that is, that

00:04:14

this is an object of type object but

00:04:18

yes That's the story, how can we now

00:04:20

display this data in text format

00:04:24

directly on the screen? We can

00:04:26

use a special transformation for this.

00:04:28

We can convert this object to

00:04:31

Jason format in order to

00:04:34

do this. We must use

00:04:35

built-in JavaScript functions. Well, in

00:04:39

order to work as Jason We have a

00:04:40

special object It's called

00:04:43

Jason Jason Let's write it with a capital letter

00:04:46

Pay attention, this object has

00:04:49

methods and that is, functions for work,

00:04:52

dot and you see What methods are inside it,

00:04:55

this is a parser and a string file Let's

00:04:58

work with them What to do with trends File

00:05:00

string the transforming file converts

00:05:05

our data into a string from the word string, yes, that

00:05:09

is,

00:05:10

some kind of tracarization Yes, that’s probably how to

00:05:13

translate Is this correct

00:05:15

or stringization I don’t know Jason string

00:05:19

file how convenient it is when the

00:05:22

code editor instead of us enters all the

00:05:25

words

00:05:26

and parts of the code in brackets, we must

00:05:30

put what data here - for example,

00:05:31

I substitute the number 12, but I’m just

00:05:34

showing you. That is, this is simple data that

00:05:36

we will now see the text content, look

00:05:38

in the text content, we see 12 If we

00:05:41

put some line here, we

00:05:43

also see the line but in

00:05:46

quotes. Please note that this is a

00:05:48

line already in quotes because it is

00:05:51

converted to Jason format, what if

00:05:55

we substitute an array here? Please note:

00:05:57

I am now writing numbers separated by commas and

00:06:00

now we will see this array;

00:06:02

now we see square brackets, that

00:06:05

is, this function made

00:06:07

just a line from the array. That is, it is like text

00:06:09

it turns out that even this is what it

00:06:13

looks like now inside the text,

00:06:17

the content is like a string Yes, in

00:06:20

this form. That is, it’s not an array, this

00:06:22

string, yes, it’s already happened,

00:06:24

quotes have been added, and here this function

00:06:26

converts the string, what if I

00:06:29

put Our And our variable in the same place

00:06:32

object as we now see our object

00:06:34

Now we see our object in the form

00:06:37

that it is in the code But this is a line,

00:06:40

that is, this line in this form, we

00:06:42

add here an opening and closing quotation mark like this,

00:06:44

yes we remove this code,

00:06:49

we get hyphens And this is the view

00:06:52

converted from we have an object here

00:06:57

it is called Jason format, that is,

00:07:00

in order for us to convert some kind of

00:07:04

object Yes, an array of anything into

00:07:07

Jason format, that is, a text format,

00:07:10

we use

00:07:13

json.tringfy let's make B and

00:07:17

place and place

00:07:18

our converted string there That's it there is a

00:07:21

string stored

00:07:23

to be sure, I will also output it to the console

00:07:26

Let's see You see we have a

00:07:29

string in the console We also see a string,

00:07:31

this is not an object,

00:07:33

okay How can we now

00:07:36

convert our json string

00:07:41

back into an object so that we can work with it

00:07:43

so that if for example, I want

00:07:45

to get it, then I can’t do it

00:07:47

because now it’s a string, the string

00:07:50

doesn’t see the undefine of this property, but

00:07:53

this property is an object, that’s why

00:07:55

we’ll make a new variable C, and

00:07:59

we’ll also write g-son dot parts or pers

00:08:06

transform transform Our string

00:08:09

Jason b we immediately substitute the string

00:08:12

back into the object and enter it into the console, then

00:08:16

now in the console you will see the object again.

00:08:18

We can work with it, we can, for

00:08:20

example, take C dot name and output it to the

00:08:23

console Yes, only Ilya, that is, We

00:08:27

have now learned how to take some

00:08:29

data and transform it we

00:08:32

can now make an object or an array into a string and the inverse and a

00:08:36

string Or a

00:08:38

simple data type, that is, here you

00:08:40

can substitute any data type,

00:08:42

experiment, put any

00:08:45

data type and see what you get in the end.

00:08:46

By the way, there are online

00:08:49

converters that you can

00:08:50

use to convert json I have already

00:08:53

entered the converter itself into Yandex games,

00:08:55

I open the second link here we see

00:08:58

two fields, the left side is the

00:09:01

json format, here is already a converted object. That

00:09:04

is, if I change something here, we will see the

00:09:06

changes immediately online and

00:09:09

here yes Or for example then I’m changing something We

00:09:12

see that there is a transformation going on here

00:09:13

Jason, that is, on the left is the Jason format and on the

00:09:17

right the object is already built. Yes, you can

00:09:19

insert a json string here and you will see the

00:09:22

result on the screen. For example, if I now

00:09:25

output to the console now, yes, that is, our

00:09:28

life line is in the console us I copy it I

00:09:33

paste it here and we see the resulting

00:09:37

object, that is, we get the transformation

00:09:39

yes, perhaps you will need an online

00:09:42

json converter when you work

00:09:44

with data, once again I will say that Jason is

00:09:47

widely used for exchanging data

00:09:49

between the server and the client part of the

00:09:53

server, this is some kind of remote the computer

00:09:55

and the client part is the

00:09:57

site itself or the application itself that the

00:10:00

end user uses,

00:10:02

okay Now we have

00:10:05

figured out what Jason is, how to work with him,

00:10:08

and how to do the conversion, the

00:10:10

file converts a string into a string Yes,

00:10:14

some type of data, some data, and the

00:10:17

park converts back from a string to

00:10:20

data That is, it could be a string it

00:10:24

could be an Object it could be an array

00:10:27

Well, let's now try

00:10:29

to practice. Now, of course, I want to

00:10:32

make a quote-unquote simplest

00:10:34

messenger Well, roughly speaking, not even like that,

00:10:37

let's Messenger but without a dialogue with

00:10:40

someone, a dialogue with itself will be Here, but

00:10:44

for this I will start doing the following I am

00:10:46

creating a form I will do this right away

00:10:48

here ours will be a form

00:10:51

with a class

00:11:01

add a message

00:11:04

is next I am creating an Input here

00:11:08

for example let me put it in

00:11:11

some empty For now yes without the

00:11:13

Input class text I indicate this

00:11:16

Input ID name

00:11:26

and placeholder I will indicate I hope you are not in a

00:11:29

hurry By the way, I will be glad to subscribe to

00:11:33

this channel I hope you like it and

00:11:35

like it placeholder name it will be

00:11:38

such a simple messenger, that is,

00:11:41

literally without fanaticism I will do it

00:11:43

Just to demonstrate it

00:11:45

by the way I will show a little What is Local

00:11:47

Stories, also the text Aria, here’s the name I wo

00:11:51

n’t indicate yet. It’s better, of course,

00:11:54

to provide it, but I won’t

00:11:57

abbreviate it

00:12:00

more precisely,

00:12:04

everything and the placeholder message. And of

00:12:09

course, we will have a send button

00:12:12

yes

00:12:19

Button

00:12:21

ID cent

00:12:25

send as we now see it all on

00:12:29

the screen Let's go to the screen, this is what it

00:12:31

looks like now. This is how I can't make the

00:12:33

dimensions smaller so that it's something like this.

00:12:35

Well, I've already prepared a

00:12:37

container class in advance that performs

00:12:39

centering of the container.

00:12:42

I'll paste this form there and add the

00:12:45

H1 header. Oh well, I'll write a message.

00:12:50

This will be the header of our

00:12:51

There are mini-applications Let's see what it

00:12:55

looks like now, quite a large

00:12:57

field for text Yes, I'll probably

00:12:59

make the number of lines less than 4. This is how

00:13:02

it all looks now, but

00:13:06

I want everything to look extremely

00:13:08

Beautiful Of course, it's prettier Let's

00:13:10

use the bootstrap library

00:13:13

I'm driving here there will be a sling 4 before it won’t be

00:13:17

enough I go to this site

00:13:20

documentation click quick Start here is

00:13:23

the sheet right in front of you I show everything this is

00:13:26

a library that helps us

00:13:27

create a quick stylization of something

00:13:30

so we are offered to connect boostrap for some reason the

00:13:33

specified version 5 Let’s

00:13:36

connect it already I’m copying this part

00:13:39

We will need some code here, copy it, of course it

00:13:43

would be advisable to also connect

00:13:46

these scripts if you need modal

00:13:47

windows or something else, but I won’t do that now,

00:13:50

I don’t need modal windows right now, I’ll connect them

00:13:52

after normalize, be sure to have

00:13:54

bootstrap here, we’ve connected

00:13:57

something for us gives Now we can

00:13:59

add some

00:14:01

additional styles to our elements because

00:14:03

here in the file there are special

00:14:05

classes So forms, click here Yes, scroll

00:14:09

below I want to add some settings

00:14:11

for our form, first of all I will add a

00:14:13

class for Div in ours to create

00:14:16

indents Yes, here is

00:14:18

the first second

00:14:21

and I’ll add, perhaps,

00:14:24

here I will not do a class, I will do an

00:14:27

ID, perhaps

00:14:28

a message And I’ll add here, too, a class for the

00:14:31

form now it looks like this on

00:14:33

the screen, you see, indents have appeared

00:14:35

thanks to this class, in my opinion, you are also learning in this video

00:14:38

use

00:14:40

bootstrap Well, I don’t think it’s scary,

00:14:42

there’s

00:14:44

more I want to style Intel I’ll

00:14:48

already use these classes that are

00:14:49

here I copy and Paste here

00:14:52

for Input here I Paste and put the texts too let’s

00:14:56

check how it looks now

00:14:59

but it doesn’t look like that yet for some reason- that’s

00:15:02

strange, the

00:15:05

form class And I copied the wrong class,

00:15:09

of course I copied the label, we need to

00:15:12

use the Control form,

00:15:15

copy it here, paste it,

00:15:22

have it, check it,

00:15:25

now it looks like this on

00:15:27

the screen. Well, okay, all that’s left is to sterilize the button

00:15:30

to steal it, too, here are the

00:15:33

classes for the button, I recommend I highly

00:15:36

recommend studying There’s a ton of stuff here

00:15:38

It’s very useful That is, if you want to

00:15:40

do something quickly, for quick

00:15:41

styling,

00:15:42

add the form to send Now This is what

00:15:45

our button looks like now There are effects

00:15:47

right away, in general, everything is

00:15:49

done quite nicely Next what I want to

00:15:52

do I want to add now a

00:15:54

special list for our messages,

00:15:57

that is, the place where

00:15:59

our messages will be added, it will be an

00:16:03

ID, it will have a

00:16:05

message. Well, I’ll call it a messenger list. Yes,

00:16:09

here they will be, while I’m creating them,

00:16:13

will there be some classes? Yes, the message

00:16:16

plan is

00:16:18

not even I’ll write a master, I’ll immediately

00:16:21

create it, add bootstrap classes

00:16:23

So we’re looking for lists here, we need to

00:16:26

work from a list with lists Yes, tables,

00:16:29

typography can be looked through here

00:16:32

Let’s

00:16:34

look at nothing here yet, I’m

00:16:37

doing everything online Yes, tables,

00:16:39

illustrations, control points, there’s a lot of

00:16:41

stuff here it’s just changing,

00:16:46

maybe something has been forgotten a group of buttons

00:16:48

notification icons

00:16:52

Let’s search for a list with a

00:16:55

group of lists but I think this

00:16:58

will be enough Yes, to

00:17:01

use lists I will

00:17:02

use the class you see Here is an example

00:17:05

there is a list of groups I copy it That’s how I

00:17:08

indicate it for our street and for I will

00:17:12

indicate the Class from here

00:17:15

I copy it They will all be the

00:17:17

same for now

00:17:20

inside here we will have the first one this is the

00:17:22

heading H2 name and a paragraph with text

00:17:29

For the text I will also use

00:17:31

boottrap classes here there is a

00:17:34

section typography yes

00:17:39

Let's find it Here it is Yes here we

00:17:43

use some settings for our

00:17:45

paragraphs below.

00:17:49

For example, we

00:17:55

’ll make some text like this as lore 22,

00:17:59

check how it looks now in

00:18:01

the browser, this is what our message will look like.

00:18:03

That is, this is a message from

00:18:05

one user that we will

00:18:07

send.

00:18:09

Well, I guess I guess yes, let it

00:18:12

remain like this, let's continue further, we need

00:18:15

to make JavaScript code So I

00:18:19

'll comment out this for now Because we

00:18:21

will create these messages through

00:18:22

JavaScript, so we have the index.js

00:18:26

script connected below That is,

00:18:27

it is connected below

00:18:30

and therefore we don't need Here is the home content

00:18:34

I would probably do it, but for now I wo

00:18:37

n’t, I would recommend doing it. So

00:18:41

we have a form so that we can

00:18:43

use it, it has an ID like this

00:18:45

ID Pay attention, we need to

00:18:47

bind events to it

00:18:50

Well, in order to use it we need to get

00:18:52

it first, a document from the tree house Get

00:18:55

Element by ID by ID we receive and indicate

00:18:59

the name of the ID since we use the Get

00:19:02

elementby ID lattice, I don’t need to write here, we

00:19:06

get attached Be yourself

00:19:09

here we register the type of event, that is,

00:19:12

we create a reaction to submitting the form by

00:19:14

clicking on the click of the button

00:19:17

Send a message comma function

00:19:20

is sure to write Event here, we

00:19:23

will need it and here we will

00:19:25

do something, look at what point You may

00:19:28

already be familiar with this, but I will explain it one more

00:19:30

time,

00:19:31

the form, when you click on the send button,

00:19:35

will redirect us to this address, that

00:19:38

is we will have a transition, so the address is

00:19:41

empty, even we don’t want it. Therefore,

00:19:43

we cancel this action; this action is

00:19:46

set by the default browser so that

00:19:48

it does not exist; we use this

00:19:50

argument inside the function. By the way, this is a

00:19:53

callback function for callback functions.

00:19:55

I have a separate video. I recommend

00:19:57

it. look If you haven’t watched and are not

00:20:00

familiar with this, so that

00:20:02

the term doesn’t scare you at all.

00:20:05

Period.

00:20:06

We are canceling the standard actions of the form.

00:20:09

Let’s display something in the console when we

00:20:12

try to submit the form, some text and

00:20:15

open the console, and then I’ll close it. That’s

00:20:18

all, here’s our console. -then I enter

00:20:20

send you see we send

00:20:22

the text appears but the page does not

00:20:24

reload this is important

00:20:27

All now we need to do the following I

00:20:30

will receive data from our text fields

00:20:32

I will not do validation Yes

00:20:34

by the way I also have a video on validation I

00:20:36

hope there will be a hint here

00:20:37

be sure to watch it Yes if you are

00:20:39

interested, by the way, you are interested, here you are,

00:20:44

like somewhere on the right or left if you are

00:20:47

interested

00:20:48

and subscribe if you are very interested,

00:20:52

by the way, I have a telegram channel on it I am

00:20:55

publishing the

00:20:56

source code of this work, maybe it

00:20:59

will also be useful for you to look at the years

00:21:04

and

00:21:09

user name name which we

00:21:12

receive a message from or send,

00:21:15

we receive a document

00:21:18

dot Get Element by ID, we

00:21:21

also get the element by ID in quotes,

00:21:24

we indicate the ID of our text Field with

00:21:28

the name, here it is, and we immediately get the

00:21:31

value in Ilya, that is, the value inside

00:21:34

which we enter without brackets.

00:21:36

Note the same the same thing I do with a text

00:21:40

field for a message, but it has a different ID

00:21:42

message,

00:21:44

so I write

00:21:51

and Input masks Let's display

00:21:53

these results in the console username

00:21:55

conster Lock usmail look, I enter

00:21:59

something we see when sending us,

00:22:01

the name is displayed, but I think it will also be

00:22:03

from the message Let's test,

00:22:06

add, that is, we see that everything

00:22:09

works perfectly, the message

00:22:10

appears at the bottom. That is, this means that

00:22:12

we got these values correctly,

00:22:14

then we need to create our element. The

00:22:17

first thing I will do is

00:22:20

create an LED. Well, you can use

00:22:23

const, by the way, cont equals even without equals

00:22:27

item

00:22:30

or itemessage

00:22:34

equals document dot Creed Element we

00:22:37

create one element is this what we have next

00:22:41

or do we add a class dot

00:22:45

class sheet

00:22:52

and I specially made this construction for you in advance so that

00:22:55

later you can

00:22:57

transfer the code to JavaScript I copy

00:22:59

this class and paste it here here we

00:23:02

did it next, we create the same copy

00:23:05

Yes, here is part of the code H3 header

00:23:09

name item title Let's call it Yes this will be H3

00:23:15

we have H2 not H3 and I just see this one I

00:23:19

did in advance I know that this is H2

00:23:22

and this H2 we add text text

00:23:27

content If you want video under the house

00:23:29

elements in general what am I doing here what am I

00:23:32

doing Here and so on detailed video

00:23:35

please Write about this in

00:23:37

the comments text content

00:23:40

equals and

00:23:44

what we need we need this

00:23:46

username to create

00:23:48

a title

00:23:50

and also create a paragraph

00:23:53

P

00:23:55

Oh there text

00:23:59

let's call it Yes, we will have

00:24:02

this text message here, we

00:24:06

also use text because we

00:24:08

add text to it, but we still have to

00:24:10

add Class Class sheet

00:24:13

and in quotes we write the name of the class

00:24:17

is called I copy it and add it

00:24:20

here, that is, when when submitting the form, when you

00:24:24

click submit, we create all

00:24:26

these elements we made, but we didn’t

00:24:29

add them to each other. We have it mess, we

00:24:32

need to add

00:24:35

our header inside it first, header,

00:24:39

and we also add

00:24:42

this inside

00:24:45

the paragraph. Yes, this is our atom text, we

00:24:48

also add it inside Well, all that remains is

00:24:51

to add our message to the street, in this

00:24:54

street it has a class, or rather a touch sheet,

00:24:58

we get it from the tree house document

00:25:01

element by ID Yes We need to get it,

00:25:05

so we add ID and dot epn Yes our

00:25:10

item message we check our work and

00:25:13

so I hope there will be no errors, enter

00:25:16

some text, click send and

00:25:18

immediately see the error. We are great, by the way,

00:25:20

you see the error is displayed on

00:25:22

which line, that is, the index is the

00:25:25

eighth line, this is very convenient. I

00:25:28

mixed up whether I wrote the places here and this is

00:25:31

the message, so I’m trying, it was a

00:25:34

mistake. I made a mistake,

00:25:35

so we press send again, we have an

00:25:38

error 11 line, what am I doing, I’m

00:25:41

wrong again, let’s see, pay

00:25:42

attention, I’m recording this

00:25:45

video late. By the way, when do you like to

00:25:47

work more During the day or in the evening, it’s

00:25:50

more convenient for me to work with the code evening time at

00:25:52

night As you can see Well, how Is it calmer or

00:25:55

quieter somehow, but messages don’t distract me

00:25:58

and somehow

00:26:01

I don’t know. Well, of course, there are such moments

00:26:04

with errors, when you click sent,

00:26:07

a message appears, I click again, a

00:26:09

new message appears. We can even

00:26:11

write a different name. We see that

00:26:13

the message appears. great Well, I still

00:26:16

want to write the code more know,

00:26:19

disassembled, that is, to parse

00:26:22

some large tasks into smaller

00:26:24

tasks, it helps me to create functions,

00:26:27

that is, we understand that to create

00:26:29

one message we may have a

00:26:32

special function Yes function Create

00:26:36

New message that is, the function for creating a

00:26:38

new message will pass

00:26:41

two arguments to it, the first name is the second message

00:26:44

like this, and here is the body of our function, so

00:26:48

we create a function, initialize it, I

00:26:51

copy all this code and place it inside

00:26:54

this function, it is not by chance that I make

00:26:56

another function it it will come in handy, so

00:27:00

I put it in it now here,

00:27:02

now we have the

00:27:05

name of the message stored in this message function, or rather the variable,

00:27:08

we insert it here, my page is

00:27:12

like this

00:27:16

Well, of course, we need to call this function

00:27:18

here, that is, here we

00:27:20

initialize it, describe it, and here we

00:27:23

call it when sending the form and Passing

00:27:25

it two parameters username and message

00:27:27

comma there we look

00:27:31

add something Everything should work

00:27:33

also you see everything also works again here

00:27:37

is that is for example I write Sasha

00:27:43

Hello we

00:27:49

send it to you all and we see a message from Sasha

00:27:51

Hello you all great I

00:27:54

’ll finalize it a little code I want this data to

00:27:57

get here in the form of an object, that is, I’ll

00:27:59

just do it Look, I’m creating an LED

00:28:03

message object Yes, this will be an object while

00:28:07

empty, there will be two parameters name

00:28:09

name, we will take it from here, here it is Yes,

00:28:13

comma message

00:28:16

message Let's send this object when sending

00:28:19

we’ll just enter it into the console like this I

00:28:22

output I output that is, we

00:28:24

packed the data into an object so it’s easier to work with them you

00:28:26

see we have an object That is, in order for

00:28:29

us to receive we write a dot

00:28:31

for example

00:28:36

we see a message on the screen only the name is not a

00:28:40

message That is, we got the name

00:28:42

our user, but it

00:28:45

turns out that we can now

00:28:49

leave one general argument in this function,

00:28:50

I’ll call it. We pass this object

00:28:55

to this function since we

00:28:57

store the data here as an object, or

00:28:59

to get it we have to write

00:29:01

firing here. we have name Yes, in

00:29:06

this form in the object, so we write a dot

00:29:08

And here object dot message nothing

00:29:11

has changed in principle, yes But this will

00:29:12

help us, here we see well, next

00:29:17

what I want to do, I want our

00:29:20

messages to be saved now so that

00:29:23

I can reload the page Yes and We

00:29:27

saw them in saved form, how to

00:29:30

implement this. But usually the message is stored

00:29:32

on a server, that is, on a remote

00:29:34

computer. To do this, I will

00:29:36

have to create a server before connecting it,

00:29:39

this is a lot of work. I

00:29:41

won’t do that for now, I will use another

00:29:43

storage method, it’s called Stories in

00:29:47

the browser there is such a storage, more precisely,

00:29:49

every site in the browser has a storage

00:29:52

where you can stuff something,

00:29:54

save it, it’s called lokostorij

00:29:57

local storage I click on the application tab

00:30:02

local storage Here it can be

00:30:05

called in English by the way and here is

00:30:07

our website I'm still clearing it, I

00:30:09

had data here, this is the place where you

00:30:12

can store something. Here's how we can

00:30:15

add something here. Let me show you

00:30:17

here in advance. I'll do the following. I

00:30:20

also refer to Local Stories, a

00:30:22

special reserved object, and

00:30:25

there is such a method. Set it here in parentheses

00:30:29

I write the name of the key, that is, roughly

00:30:32

speaking, a variable for example name is

00:30:35

a comma and indicate the name or I, that is, when we

00:30:39

run this code, Local Stories

00:30:42

will appear

00:30:43

Ilya turned on, I reboot, look,

00:30:47

you see it appears on Ilya, I can also

00:30:50

save,

00:30:53

for example, H as a number For

00:30:56

12 years,

00:30:59

you see, it’s been stored, but I can’t

00:31:03

store objects. That is, if I now

00:31:05

try to save this object Here,

00:31:11

well, let’s make some new object,

00:31:14

I’ll copy it and I can’t store arrays either.

00:31:17

Yes, of course there will be strings for arrays,

00:31:19

for example, it will be a name object

00:31:21

some

00:31:24

look what we have here,

00:31:26

now the object is stored here, you see,

00:31:29

that is, we cannot store objects, but

00:31:33

we can store

00:31:35

data presented in the form of a string, we

00:31:38

can present data in the form of a string,

00:31:40

yes

00:31:42

Let me name the date, we can convert this object to the

00:31:46

string json pars

00:31:51

and insert our object look what

00:31:53

happens we reload

00:31:58

and I use parsi I made a mistake string file

00:32:01

of course so we can turn it into a string we

00:32:03

use string file You see

00:32:05

now the data is stored as a string how can

00:32:08

we get it back to

00:32:10

get it Back we use a different

00:32:12

method but I will enter it in console

00:32:13

received data also We turn to

00:32:15

Local Stories dot Get It Well, that's why

00:32:19

We need a key, just by the key we

00:32:21

can tell the browser what

00:32:24

data we want to receive in this case

00:32:26

I want to receive So now I will see in the console

00:32:29

Well, you and I too

00:32:31

children or I, that is, we have

00:32:34

extracted the data, I draw your attention, look.

00:32:36

I am now commenting on the code,

00:32:40

this one has been commented out, it no longer

00:32:42

works, I reload the page and we

00:32:45

see that this data has been saved, it

00:32:47

is stored in the browser

00:32:49

even when you close it, it will

00:32:51

even be saved there when to turn off

00:32:52

the computer That is, get the data

00:32:57

Let's get H

00:33:00

Yes, here we have consoles, our age and

00:33:04

Let's get What we have date date

00:33:08

by the way is not translated once and the data is

00:33:10

not confused date is data date is

00:33:14

just the same date

00:33:15

date Here but given we got to

00:33:19

see the strings again, we need to convert them back

00:33:21

Jason into an object Therefore,

00:33:24

json dot pars We pass ours here because the

00:33:29

elbow will return Yes, this function will return a

00:33:32

string and substitute And now we see

00:33:35

that there is an object

00:33:37

Well, everything that I just told

00:33:39

will help us store the data

00:33:42

look, when you first load the application,

00:33:45

I have to get data from Local

00:33:47

storage, let's do this LED date is

00:33:51

equal to Local storage Get

00:33:56

alten Well, we will get the date

00:34:00

Let's get

00:34:03

a sheet,

00:34:05

that is, a list of messages, so I suggest

00:34:10

storing our data as an array years,

00:34:18

this will be an empty array for now we

00:34:22

need to create an empty array Because

00:34:24

if at the first launch we do

00:34:26

n’t have Lock Stories, then the array will be empty

00:34:28

So we check if we have

00:34:30

something here: date dot

00:34:33

date is not equal to the empty string of the string and

00:34:39

date is not equal to well

00:34:42

That is, if there there is something if there is

00:34:44

data there we can do parsing We

00:34:47

can assign a sheet to the

00:34:53

point pars And parse our data if we

00:34:58

don’t do this check and

00:35:00

try to pass an empty line to the parser here,

00:35:02

then we can get

00:35:03

an error Yes, we don’t want there to be an error

00:35:07

Let’s display our array in the console

00:35:11

here we display it in the console at the first

00:35:13

launch It’s empty there’s nothing there yet, well,

00:35:16

what’s the most interesting thing now when

00:35:18

adding a new case? We can

00:35:21

add a new

00:35:23

case in the form of an object to our array while it’s empty. Let’s do it,

00:35:27

here’s a

00:35:28

leaflet Push and here our object

00:35:33

we add it here, that is, we add a

00:35:37

new message Here we press send

00:35:40

Nothing happens yet We only

00:35:42

see the message here

00:35:44

good

00:35:46

By the way Let's

00:35:48

clear our text fields after sending the message I'll

00:35:51

do it like this here just like that

00:35:54

I copy it

00:35:57

equals emptiness

00:36:00

And here too of course doing this is not very

00:36:02

good, it’s better to put these house elements in a

00:36:05

separate variable, I’ll do it

00:36:06

quickly, that is, when sending a

00:36:08

message to us, the text strand is cleared,

00:36:10

you see, so that we can enter a new

00:36:12

message. There, by the way, I won’t delete the name,

00:36:16

let it be so that we do

00:36:18

n’t have to enter it all the time. I will delete the message,

00:36:20

that is, here we add that our data

00:36:24

So let's save this array

00:36:26

Local Stories Yes, to make a

00:36:29

save, we know we use Stories blocks

00:36:34

dot set item We must

00:36:37

name the record the same way as here upon

00:36:40

receipt and add here Yes save

00:36:44

What do they do? -then we need to save our array

00:36:47

But remember that we can’t just save an array of

00:36:50

objects, we need to

00:36:53

convert it into a string Jason theme, because the

00:36:56

video is Jason, so Jason pars the

00:37:00

string file,

00:37:02

we convert the string and pass our

00:37:06

array Now look what’s happening The

00:37:08

first loading of the application I’m loading it

00:37:11

It’s loading there is nothing in our Stories block

00:37:15

yet, I will clear it, that is, there is

00:37:18

nothing Yes, when we click

00:37:22

send, this code is triggered, we

00:37:25

get text values from the text

00:37:27

fields, we create an object, this object is

00:37:30

added to the still empty array

00:37:32

because this condition did not work there, it is empty

00:37:35

and we save it array when

00:37:39

we add a new case again we again

00:37:41

add a second message to this array

00:37:44

there will already be two messages and again

00:37:45

we save the elbow

00:37:47

when we restart our application when

00:37:51

we restart this code works again

00:37:53

but all Yes but there is already something in the Data yes

00:37:58

And we will see that there will already be messages in the message list

00:38:01

Yes, I’ll now

00:38:03

display the console like this, check the

00:38:09

application, add a new message

00:38:12

of some kind, click send, see

00:38:16

Jason’s line appears here, by the way,

00:38:19

look at how the transfer has been transformed,

00:38:21

see the transfer of symbols So these are

00:38:25

the symbols are inserted, you see there are

00:38:28

already two objects in this array Jason

00:38:30

format, by the way, below the browser on the panel

00:38:33

does the conversion and converts it into an

00:38:35

object that we can understand. This is very convenient, that

00:38:37

is, now we store the data in the form of a json

00:38:41

string Local storage because we

00:38:43

cannot store it in the form of an array only in the

00:38:44

form lines Well, or there are numbers, yes, everyone has

00:38:49

learned to save and now the first time the

00:38:52

application is restarted,

00:38:55

this block code works. Stories has

00:38:57

data and we do parsing, that is, we

00:39:00

convert the reverse string into an array And

00:39:03

now in the console we enter the array,

00:39:05

look, you see this is an array of our

00:39:07

messages here Well, of course, when

00:39:11

receiving data from an array, we can

00:39:14

allow

00:39:17

Hello This is our array, here it is Yes, one and

00:39:20

let’s call this message one

00:39:22

message and put it here below Yes,

00:39:26

we already have a special function for

00:39:28

creating one message in advance. Here I

00:39:31

just call it and I pass our object and

00:39:34

here we store the object, because we

00:39:36

store objects in an array, remember, separated by

00:39:39

commas from our messages, each object in

00:39:42

turn inside this loop. This will be

00:39:45

substituted inside the message and

00:39:47

substituted into this function. And our

00:39:49

function can work with objects, you need to

00:39:52

learn this do We specifically

00:39:54

removed two parameters here, made one so that

00:39:58

you can work with objects and

00:40:00

look, I reload the page, now the

00:40:02

data is taken from Local Stories and

00:40:04

displayed in this form Yes, Sasha,

00:40:07

for example, enter some text, send it,

00:40:09

reload, look, it’s

00:40:11

saved Igor and enter something that

00:40:14

is, we see that we have made such a

00:40:16

simple manager Yes, we are still communicating

00:40:19

with ourselves Well, it’s okay,

00:40:21

we are interested in you and me, really, we

00:40:25

studied with you Jason the json format Jason

00:40:29

whatever you want Call it Yes, I don’t think that this

00:40:32

plays a big role

00:40:34

we studied touched on Local storage Yes,

00:40:38

we learned how to get something from text

00:40:42

fields and not process form submission. In

00:40:44

my opinion, it turned out to be a very interesting video.

00:40:46

Do you think the

00:40:48

video is interesting or not? You can say so

00:40:51

in the comments. I will be very pleased

00:40:53

if you support me. You can

00:40:55

like me too. very

00:40:57

nice

00:40:58

subscribing to the channel is

00:41:00

what I always strive for, of course

00:41:04

I strive for the videos to be

00:41:06

useful So

00:41:08

I read the comments and try to

00:41:11

answer them And I am always very pleased to

00:41:13

do this This motivates me to work I

00:41:16

hope you feel comfortable watching my

00:41:19

videos So I hope you will

00:41:22

do this and the sources of this code will be in the

00:41:24

Telegram channel, the link to which is below

00:41:27

under this video Thank you for being with

00:41:29

me today and spending your time and

00:41:34

see you

Description:

Разбираю на примере формат передачи данных 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

Preparing download options

Popular

HD video

Only sound

All

* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."

** — Link intended for online playback in specialized players

Questions about downloading video

How can I download "JSON формат и localStorage в Javascript - разбор" video?

http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

Which format of "JSON формат и localStorage в Javascript - разбор" video should I choose?

The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

Why does my computer freeze when loading a "JSON формат и localStorage в Javascript - разбор" video?

The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

How can I download "JSON формат и localStorage в Javascript - разбор" video to my phone?

You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

How can I download an audio track (music) to MP3 "JSON формат и localStorage в Javascript - разбор"?

The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

How can I save a frame from a video "JSON формат и localStorage в Javascript - разбор"?

This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

What's the price of all this stuff?

It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.