html5指南-5.使用web storage存储键值对的数据
【编者按】：网学网XHTML为您提供html5指南-5.使用web storage存储键值对的数据参考，解决您在html5指南-5.使用web storage存储键值对的数据学习中工作中的难题，参考学习。
本节课的内容是介绍web storage，使用它在浏览器里存储键值对的数据，功能上像以前的cookie一样，不过他更好，存储的数据可以更大。有两种类型的web storage：local storage和session storage，他们使用相同的实现机制，只是可见性和生命周期不同。1.使用local storage
我们使用localStorage对象来访问local storage，他返回Storage对象，Storage用来存储键值对的数据，他有下面一些属性和方法：
clear()：清楚存储的键值对数据；
getItem(<key>)：通过key获取value值；
key(<index>)：通过索引获取key值；
length：返回键值对的个数；
removeItem(<key>)：通过key移出指定数据；
setItem(<key>,<value>)：添加一个键值对，当指定key的键值对存在，则实现更新操作；
[<key>]：通过数组下标的方式，使用key获取指定value值。
Storage对象允许我们存储key和value都是字符串形式的键值对数据，key是唯一的，意味着当我们使用setItem方法添加键值对时，如果key值已经存在的话，将实现更新的操作。我们来看下面的例子：
复制代码代码如下:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
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>
<div>
<div>
<label>Key:</label><input id="key" placeholder="Enter Key" /></div>
<div>
<label>Value:</label><input id="value" placeholder="Enter Value" /></div>
<div id="buttons">
<button id="add">Add</button>
<button id="clear">Clear</button>
</div>
<p id="countmsg">There are <span id="count"></span>items</p>
</div>
<table id="data" border="1">
<tr>
<th>Item Count:</th>
<td id="count">-</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 tableElement = document.getElementById(''data'');
tableElement.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.getItem(key);
tableElement.innerHTML += ''<tr><th>'' + key + '':</th><td>'' + val + ''</td></tr>'';
}
}
</script>
</body>
</html>
我们来看运行结果：
浏览器不能删除我们通过localStorage创建的数据，除非用户删除它。
2.监听Storage事件
通过local storage存储