LOCAL STORAGE IN HTML5
HTML5 introduced two storage mechanisms, they are local storage and session storage. Web applications uses local storage to store the data in the browser locally. In early version of html, data was stored in cookies. Local storage can store more data (5MB) and information are not sent to the server. The data in the local storage is stored in the form of key and value.
Local storage is key-value hash table to store data and is persistent and remains even on page reloads. It avoids cookie limitations. It is scoped to a domain name. The data stored at one domain will not be available to other domains or webpages. It can only store string values.
localStorage.setItem('key',somevalue); is the method used to store a value with the key provided.
For example, localStorage.setItem('key',sushma);
localStorage.getItem('key'); is the method used to get the item which was stored before.
For example, localStorage.getItem(sushma);
localStorage.removeItem('key'); is the method used to remove the item which was stored.
For example, localStorage.removeItem(sushma);
localStorage.length - returns the number of item stored.
localStorage.key(index) - returns the key stored at particular index
Below is the code for local storage
The output for the above code is
Html5 has many new features other than storage, if you want to learn more about it you can attend training on Html5
Local storage is key-value hash table to store data and is persistent and remains even on page reloads. It avoids cookie limitations. It is scoped to a domain name. The data stored at one domain will not be available to other domains or webpages. It can only store string values.
localStorage.setItem('key',somevalue); is the method used to store a value with the key provided.
For example, localStorage.setItem('key',sushma);
localStorage.getItem('key'); is the method used to get the item which was stored before.
For example, localStorage.getItem(sushma);
localStorage.removeItem('key'); is the method used to remove the item which was stored.
For example, localStorage.removeItem(sushma);
localStorage.length - returns the number of item stored.
localStorage.key(index) - returns the key stored at particular index
Below is the code for local 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>local 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;
localStorage.setItem('msg',val);
document.getElementById("result").innerHTML='the value is stored in local storage';
}else
{
alert("no support available");
}
}
function display()
{
document.getElementById("display").innerHTML='storage set and value is '+ localStorage.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
ZenRays provide the following to make you expert
- 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
ABOUT THE AUTHOR
Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible
0 comments:
Post a Comment