Session storage
Html5 introduced web storage techniques to allow the data to be saved on the client device. Local storage and session storage are the two types of web storage. The main difference between them is that the session storage is available till the browser window is open. If the window is closed, the storage associated with that window will also be closed. Local Storage is opposite of session storage. The data stored in the browser will remain even if the window is closed.
Session storage is Key/value hash table to store data. This storage is not persistent and goes off if the tab is closed or the browser is closed. It is scoped to a domain name. The data stored in one domain will not be available to other domains or web pages. It can only store string values.
sessionStorage.setItem('key',somevalue); It is the method used to store a value with the key provided. For example, sessionStorage.setItem('key',zenrays);
sessionStorage.getItem('key'); It is the method used to get the item which was stored before. For example, sessionStorage.getItem(zenrays);
sessionStorage.removeItem('key'); It is the method used to remove the item which was stored. For example, sessionStorage.removeItem(zenrays);
sessionStorage.length - It returns the number of items stored.
sessionStorage.key(index) - It returns the key stored at particular index
Below is the code for session storage:
The output for the above code is:
But if the tab or browser is closed, data stored is lost.That's the main difference between local and session storage. Html5 has many new features other than storage, if you want to learn more about it, you can attend training on Html5
Session storage is Key/value hash table to store data. This storage is not persistent and goes off if the tab is closed or the browser is closed. It is scoped to a domain name. The data stored in one domain will not be available to other domains or web pages. It can only store string values.
sessionStorage.setItem('key',somevalue); It is the method used to store a value with the key provided. For example, sessionStorage.setItem('key',zenrays);
sessionStorage.getItem('key'); It is the method used to get the item which was stored before. For example, sessionStorage.getItem(zenrays);
sessionStorage.removeItem('key'); It is the method used to remove the item which was stored. For example, sessionStorage.removeItem(zenrays);
sessionStorage.length - It returns the number of items stored.
sessionStorage.key(index) - It returns the key stored at particular index
Below is the code for session storage:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <!doctype html>
<html>
<head>
<title> Session ex</title>
<style type="text/css">
#result{
border: 1px solid blue;
padding: 10px;
margin: 15px;
}
#display{
border: 1px solid blue;
padding: 10px;
margin: 15px;
}
</style>
</head>
<body>
<div id="result"></div>
<div id="display"></div>
<script type="text/javascript">
function store()
{
if(typeof(Storage)!==undefined)
{
var val=document.getElementById("val").value;
sessionStorage.setItem('msg',val);
document.getElementById("result").innerHTML='the value is stored in session storage';
}else
{
alert("no support available");
}
}
function display()
{
document.getElementById("display").innerHTML='storage set and value is '+ sessionStorage.getItem('msg');
}
</script>
<label for="val">enter the value to store in local storage</label>
<input type="text" id="val">
<button onclick="store()">store the value</button>
<button onclick="display()">display stored value</button>
</body>
</html>
|
The output for the above code is:
But if the tab or browser is closed, data stored is lost.That's the main difference between local and session storage. Html5 has many new features other than storage, if you want to learn more about it, you can attend training on Html5
ZenRays provide the following to make you expert
zenrays providing html5 training in Bangalore
- Fully practical and project-based sessions from first class.
- Training by Experienced Consultants, not regular Trainers
- Friendly and enthusiastic faculty to clear your doubts 24X7
- Free Live project after the training to get you industry experience
If you want more details please visit us:
Zenrays.com Reach us at trainings@zenrays.com
