1）使用本地存储（localstorage）:
通过全局属性localstorage访问本地存储功能，并会返回一个storage对象，它被用来保存键/值形式的字符串对。
storage对象的成员：
clear()——移除保存的键/值对；
getitem(b426c87d5d3d3a1fd68262c64998cac2)——取得与指定键关联的值；
key(64531295cb863c6c1bc26fe1360fcf6c)——取得指定索引的键；
length——返回已保存的键/值对数量；
removeitem(42538adbdb6240b2b083a000a615d5bd)——移除指定键对应的键/值对；
setitem(42538adbdb6240b2b083a000a615d5bd,8487820b627113dd990f63dd2ef215f3)——添加一个新的键/值对，如果键已使用就更新它的值；
[42538adbdb6240b2b083a000a615d5bd]——用数组的访问形式取得与指定键关联的值；
监听存储事件：
某个文档对本地存储进行修改时会触发storage事件，同时指派的对象是一个storageevent对象，其成员有：
key——返回发生变化的键；
oldvalue——返回关联此键的旧值；
newvalue——返回关联此键的新值；
url——返回制造变化的文档url;
storagearea——返回发生变化的storage对象；
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>上海远地资产管理有限公司</title>
<meta name="author" content="jason"/>
<meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<style type="text/css">
body > *{
float:left;
}
table{
border-collapse: collapse;
margin-left: 50px;
}
th,td{
padding: 4px;
}
th{
text-align: right;
}
input{
border:thin solid black;
padding: 2px;
}
label{
min-width: 50px;
display: inline-block;
text-align: right;
}
#countmsg,#buttons{
margin-left: 50px;
margin-top:5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<p>
<p>
<label>key:</label>
<input id="key" placeholder="enter key">
</p>
<p>
<label>value:</label>
<input id="value" placeholder="enter value">
</p>
<p id="buttons">
<button id="add">add</button>
<button id="clear">clear</button>
</p>
<p id="countmsg">there are <span id="count"></span> items</p>
</p>
<table id="data" border="1">
<tr>
<th>item count:</th><td>-</td>
</tr>
</table>
<script>
displaydata();
var buttons=document.getelementsbytagname("button");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=handlebuttonpress;
}
function handlebuttonpress(e){
switch(e.target.id){
case 'add':
var key=document.getelementbyid("key").value;
var value=document.getelementbyid("value").value;
localstorage.setitem(key,value);
break;
case 'clear':
localstorage.clear();
break;
}
displaydata();
}
function displaydata(){
var tableelem=document.getelementbyid("data");
tableelem.innerhtml="";
var itemcount=localstorage.length;
document.getelementbyid("count").innerhtml=itemcount;
for(var i=0;i<itemcount;i++){
var key=localstorage.key(i);
var val=localstorage[key];
tableelem.innerhtml+="<tr><th>"+key+":</th><td>"+val+"</td></tr>";
}
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
border-collapse: collapse;
margin-left: 50px;
}
th,td{
padding: 4px;
}
</style>
</head>
<body>
<table id="data" border="1">
<tr>
<th>key</th>
<th>oldvalue</th>
<th>newvalue</th>
<th>url</th>
<th>storagearea</th>
</tr>
</table>
<script>
var tableelem=document.getelementbyid("data");
window.onstorage=handlestorage;
function handlestorage(e){
var row="<tr>";
row+="<td>"+ e.key+"</td>";
row+="<td>"+ e.oldvalue+"</td>";
row+="<td>"+ e.newvalue+"</td>";
row+="<td>"+ e.url+"</td>";
row+="<td>"+ (e.storagearea == localstorage)+"</td></tr>";
tableelem.innerhtml+=row;
}
</script>
</body>
</html>
2）使用会话存储（sessionstorage）
会话存储的工作方式和本地存储很接近，不同之处在于数据是各个浏览器上下文私有的，会在文档关闭时移除。
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>上海远地资产管理有限公司</title>
<meta name="author" content="jason"/>
<meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<style type="text/css">
body > *{
float:left;
}
table{
border-collapse: collapse;
margin-left: 50px;
}
th,td{
padding: 4px;
}
th{
text-align: right;
}
input{
border:thin solid black;
padding: 2px;
}
label{
min-width: 50px;
display: inline-block;
text-align: right;
}
#countmsg,#buttons {
margin-left: 50px;
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<p>
<p>
<label>key:</label>
<input id="key" placeholder="enter key">
</p>
<p>
<label>value:</label>
<input id="value" placeholder="enter value">
</p>
<p id="buttons">
<button id="add">add</button>
<button id="clear">clear</button>
</p>
<p id="countmsg">there are <span id="count"></span> items</p>
</p>
<table id="data" border="1">
<tr>
<th>item count:</th><td>-</td>
</tr>
</table>
<script>
displaydata();
var buttons=document.getelementsbytagname("button");
for(var i=0;i<buttons.length;i++){
buttons[i].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();
break;
}
displaydata();
}
function displaydata(){
var tableelem=document.getelementbyid("data");
tableelem.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];
tableelem.innerhtml+="<tr><th>"+key+":</th><td>"+val+"</td></tr>";
}
}
</script>
</body>
</html>
以上就是html5之使用web存储的具体介绍的详细内容。