会话存储的工作方式和本地存储的工作方式很接近，不同之处在于数据是各个浏览器上下文私有的，会在文档被关闭时移除（注意是被关闭时才移除，刷新是不会移除的）。我们通过全局sessionStorage访问会话存储，它返回一个Storage对象，该对象与本地存储里的是一样的。
sessionStorage案例1：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sessionStorage</title>
<style> </style>
</head> <body>
<ul>
<li>key:<input id="key" type="text" value=""></li>
<li>value:<input id="value" type="text" value=""></li>
<li>
<input id="add" type="button" value="add">
<input id="clear" type="button" value="clear">
</li>
<li id="countmsg">There are <span id="count"></span> items</li>
</ul>
<table id="data"></table>
<script>
displayData();
document.getElementById('add').onclick=handleButtonPress;
document.getElementById('clear').onclick=handleButtonPress;
function handleButtonPress(e){
switch(e.target.id){
case 'add':
var key=document.getElementById('key').value;
var value=document.getElementById('value').value;
sessionStorage.setItem(key,value);
break;
case 'clear':
sessionStorage.clear();
}
displayData();
}
function displayData(){
var tableItem=document.getElementById('data');
tableItem.innerHTML='';
var itemCount=sessionStorage.length;
document.getElementById('count').innerHTML=itemCount;
for(var i=0;i<itemCount;i++){
var key=sessionStorage.key(i);
var val=sessionStorage[key];
tableItem.innerHTML+='<tr><th>'+key+'</th><td>'+val+'</td></tr>';
}
}
</script>
</body>
</html>
这个案例的工作方式和本地存储里的案例很接近，不同之处在与可见性和寿命受到限制（sessionStorage是临时存储）。这些限制会影响storage事件的处理方式，本地存储里提到storage事件只会在其他同源文档中触发。对于会话存储，这就意味着事件只会在内嵌文档中触发，比如iframe文档，如下案例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sessionStorage</title>
<style> </style>
</head> <body>
<ul>
<li>key:<input id="key" type="text" value=""></li>
<li>value:<input id="value" type="text" value=""></li>
<li>
<input id="add" type="button" value="add">
<input id="clear" type="button" value="clear">
</li>
<li id="countmsg">There are <span id="count"></span> items</li>
</ul>
<table id="data"></table>
<iframe src="./storage.html" width="500" height="175"></iframe>
<script>
displayData();
document.getElementById('add').onclick=handleButtonPress;
document.getElementById('clear').onclick=handleButtonPress;
function handleButtonPress(e){
switch(e.target.id){
case 'add':
var key=document.getElementById('key').value;
var value=document.getElementById('value').value;
sessionStorage.setItem(key,value);
break;
case 'clear':
sessionStorage.clear();
}
displayData();
}
function displayData(){
var tableItem=document.getElementById('data');
tableItem.innerHTML='';
var itemCount=sessionStorage.length;
document.getElementById('count').innerHTML=itemCount;
for(var i=0;i<itemCount;i++){
var key=sessionStorage.key(i);
var val=sessionStorage[key];
tableItem.innerHTML+='<tr><th>'+key+'</th><td>'+val+'</td></tr>';
}
}
</script>
</body>
</html>
此案例中iframe引入的storage.html与本地存储那里的storage.html代码一模一样，此处就不做说明。直接copy上面的代码并在浏览器中运行可以查看到效果