Up next in 10
JavaScript Session Storage Explained | How to Use Session Storage in the Browser
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video we will look at the
0:05
session storage inside JavaScript so
0:09
session storage actually there is two
0:12
types of storage local storage session
0:14
storage and cookies so in in this
0:16
specific video we'll talk about session
0:18
storage from the name itself it actually
0:21
processed over a session so whenever you
0:25
open a browser window inside your
0:27
application so let's suppose I opened
0:29
this browser right here in this active
0:31
session the storage will only be
0:33
accessible right here let me take an
0:35
example right here and show to you this
0:38
is actually the simple HTML file that
0:40
I've declared and I'm including this
0:41
script.js file so now to declare the
0:44
session
0:46
storage we actually have this uh
0:50
method just need to write session
0:52
storage and it is accessible using this
0:54
keyword session storage and then there
0:58
are two methods available
1:00
either uh get get item you can get a
1:03
item using a key value pair and then you
1:06
can set a item in the session storage
1:09
these are the two methods get and set
1:11
get item and set item and also there is
1:14
a third method which is remove item
1:16
which is useful if you want to remove or
1:19
delete something from the session
1:21
storage and if you also want to clear
1:24
everything there is a clear method as
1:26
well these are different methods which
1:28
are available in such session storage so
1:30
first of all we will set a item inside
1:33
the session storage so we'll use this
1:36
method of set item and here you need to
1:39
provide a key value pair so whatever is
1:42
the key and then here comes the value so
1:45
you can give any key of your choice so
1:47
let's suppose you're storing username
1:50
inside your application you will set the
1:52
key as username and then the whatever is
1:55
the value the user submits so let me
1:57
hard code this value as John so we have
2:00
actually submit this information in the
2:02
session storage using this method set
2:04
item and we actually have the key as
2:07
username and the actual value which is
2:09
John so we are storing this information
2:12
John with the key parameter which is
2:15
usern name so now we have successfully
2:17
set this information now if you want to
2:20
retrieve this information from the S
2:22
session
2:25
storage we again will use the second
2:28
method so now to console log this
2:30
information on the screen we can simply
2:32
just write
2:35
uh session
2:37
storage dot get item and here we need to
2:42
specify this key parameter in order to
2:44
get this
2:45
data we need to specify the key
2:48
here so here we need to specify this key
2:51
which is username this needs to be sa
2:54
and if you try to go to the console
2:56
right here
3:03
so you will actually see this John will
3:06
be printed out this is an
3:09
information which is available in the
3:11
session storage and if you also want to
3:13
see this information in the session
3:15
storage you can even go
3:17
to the application tab there is this
3:20
application tab right here and then
3:23
there is the section out there inside
3:25
storage we have different kind of
3:27
storage inside the browser we have the
3:29
local storage session storage we need to
3:32
go to this session storage and we have
3:35
this data and if you now see there is
3:39
actually this username property which is
3:41
actually stored and we have this value
3:44
which is John so it is storing the key
3:48
this is actual key parameter and this is
3:50
actual value so in this way you can
3:53
store your data inside session storage
3:55
and it is actually shown to you so now
3:57
we are simply retrieving this data and
3:59
showing it in the console so in this way
4:02
uh there these are the two methods we
4:05
can even set multiple things right here
4:07
you can again write session storage set
4:10
item and we can set a age property as
4:13
well which is
4:14
25 and if you refresh now you will
4:17
actually see there will be two
4:19
properties which is age and username so
4:22
you can actually store multiple items in
4:25
session storage it can even be an object
4:29
as well so so let's suppose we have a
4:30
user object and which contains these two
4:34
properties username as shn and the age
4:37
property which is so now we instead of
4:40
storing a variable we can store an
4:42
object so we can simply say info and we
4:45
can simply store an object so what you
4:49
will see uh if you go to the tab you
4:53
will see now this info is an object
4:55
rather than this is a variable this is
4:58
actually an object
5:00
so in this way you can retrieve this
5:03
object very simply by getting this
5:08
info so now we can actually show it on
5:11
the screen as well in the console this
5:13
is actually an object right here so what
5:16
we need to
5:18
do we need to print out the username
5:21
property so what we so it is comes out
5:25
to be undefined uh I think it's an uh
5:30
object okay sorry this is actually
5:35
a we need to store
5:38
it session storage. get
5:46
item and I think we need to convert this
5:50
into Json so json.
5:55
pars and then we can console log it
6:09
I think json. stringify need to say
6:11
console
6:21
output uh let me just session storage
6:25
get
6:26
item okay sorry this key parameter is in
6:29
sorry this was a problem you need to set
6:31
it to
6:35
info this is info not
6:55
user so it's actually an object here uh
7:09
so there is will be I think two
7:11
properties here which will
7:22
be let me ask a question to chat GPT how
7:25
to retrieve this
7:27
information in this case you you can use
7:29
chat GPD for
7:34
that how to print the info it is not
7:42
outputting when you store an object in
7:44
session storage using set item
7:46
JavaScript converts it to a string
7:48
because session storage Only Store
7:50
strings this is the information uh it
7:52
doesn't store objects it only storees
7:54
strings so you need to First convert
7:56
your object into a string with Json
7:58
string if I then pass it back to Json
8:01
pars when retrieving it so first of all
8:04
whenever you storing an object in
8:05
session storage you need to convert into
8:07
a string using json. stringify and then
8:11
whenever you are retrieving that object
8:13
you then you need to convert to a Json
8:17
do parts so what we do need to
8:22
do so in this example here we have this
8:26
two object which contains two properties
8:28
username and age and whenever you
8:30
storing it in the session storage we
8:32
need to convert this into a Json uh
8:35
JavaScript string using json. stringy
8:38
file so it converts it into a string
8:41
this object that you see it converts it
8:44
into a string and then store it in the
8:46
session storage and then when we
8:49
retrieving this
8:50
object we actually convert back it a
8:55
back to an object from a string using
8:57
json. pars and now we can console Lo
9:00
this information that is the dot syntax
9:03
we can use output. username output. AG
9:06
so if you try to see this
9:09
information in the browser you will see
9:12
John username is John age is 25 so in
9:16
this way you can uh store objects in
9:20
session storage we actually stored this
9:23
object which contains two properties
9:25
username and
9:26
age so the thing about session storage
9:29
is that it only persist over a session
9:32
so whenever you close this window close
9:34
this browser window it vanishes all this
9:37
information is get deleted so it doesn't
9:39
basically store information on the
9:42
browser it only stores information about
9:45
a particular session so whenever you
9:48
open this application in the browser in
9:50
a particular session it stores this
9:51
information in a particular session so
9:54
that session storage is only persisted
9:56
over a session so now when you open a
9:59
new tab when you open a new session a
10:02
new set of variables get created
10:04
automatically so this is the thing about
10:06
session storage it doesn't Stick Over
10:10
multiple sessions it only sticks to a
10:12
particular window where your application
10:16
has it also has methods if you do want
10:19
to wipe the data out there is a method
10:22
which you can use which is session
10:25
storage. clear so it will actually
10:28
delete everything from session storage
10:31
whenever you call this method it will
10:33
vanish it will delete everything so now
10:36
if you check the session storage you
10:38
will actually see all the data has been
10:42
cleared so if you uncomment this line
10:45
let's
10:49
suppose so if I uncomment this line so
10:53
you will actually see all the data will
10:55
will be
10:57
there again all the data will be there
11:00
but if
11:02
you uncomment you will see the data will
11:05
be gone so in this way this is the mini
11:09
crash course on session storage how to
11:11
set information how to get information
11:13
how to delete information from session
11:15
storage so this is one kind of storage
11:18
in JavaScript other storage of supported
11:21
local storage or cookies we will discuss
11:22
it in the next
11:24
video so thank you very much for
11:26
watching this video and do check out my
11:28
website as well which is free mediat
11:31
tools.com which is an open-source
11:34
website for audio video and image tools
11:37
and I will be seeing you in the next
11:39
video