Session storage is used when the user wants the same data to be used for a session, that also can be used in multiple windows, without affecting the working of website or mobile app. The data stored in sessions can only be maintained until the user closes the window, i.e., as soon as the user closes the window the session is lost, i.e. data gets deleted.
For storing data in sessions we use sessionStorage object and it is maintained till the user closes the windows.
For storing data in session we use setItem(key,value) function.
sessionStorage.setItem('data',"Hello");
For retrieving data in session we use getItem(key) function.
sessionStorage.getItem('data');
For deleting a particular session we use removeItem(key) function.
sessionStorage.removeItem('data');
For deleting all key/value pairs from session we use clear() function.
sessionStorage.clear();
Here is simple HTML page to save the user data and then retrieve data:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900,600italic,600,400italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
label,button,input{margin-bottom: 5px;}
</style>
</head>
<body>
<div style="border:1px solid #000;padding 10px;width:300px; heigth:300px;margin:0 auto;padding:5px;">
<label style="display:block">Save Data In Session</label>
<input id="setInput" type="text" style="border-radius:0px; border:1px solid #ccc; padding:5px; width:95%;" placeholder="Enter Your Name">
<button id="save" type="button">Save</button>
<label style="display:block">Retrive Data from Session</label>
<input id="getInput" type="text" style="border-radius:0px; border:1px solid #ccc; padding:5px; width:95%;" placeholder="Get Your Name" disabled>
<button id="get" type="button">Retrieve</button>
<label style="display:block">Clear data from session</label>
<button id="clear" type="button">Clear Data</button>
</div>
</body>
</html>
And here the Javascript code:
$(document).ready(function(){
$("#save").click(function(){
window.sessionStorage.setItem('userObject',$('#setInput').val());
alert("Data has been saved in session");
});
$("#get").click(function(){
$('#getInput').val(window.sessionStorage.getItem('userObject'))
});
$("#clear").click(function(){
window.sessionStorage.removeItem('userObject');
});
});
0 Comment(s)