<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>清空localStorage的全部數據</title>
</head>
<body>
<fieldset>
<input type="button" id="btnadd" onClick="add_click()" value="增加數據">
<input type="button" id="btndel" onClick="del_click()" value="清除數據">
<p id="pstauts"></p>
</fieldset>
</body>
<script type="text/javascript" >
function $(id){
return document.getElementById(id);
}
var intNum = 0;
//保存數據函數
function add_click(){
for(var intI = 0;intI <= 5;intI++){
var strKeyName = "strKeyName"+intI;
var strKeyValue = "strKeyValue"+intI;
localStorage.setItem(strKeyName,strKeyValue);
intNum++;
}
$("pstauts").style.display = "block";
$("pstauts").innerHTML = "已保存成功<br>"+intNum+"<br>條記錄"
}
//清空數據函數
function del_click(){
localStorage.clear();
$("pstauts").style.display = "block";
$("pstauts").innerHTML = "全部數據已經清除"
}
/*
代碼解析：
當用戶點擊"增加數據"，將使用循環的方式，按執行順序保存6條數據記錄
其鍵名"strKeyName"與變量intI相連，其值名"strKeyValue"也與intI相連,這些數據
被localStorage對象保存記錄,可以再瀏覽器Chrome中通過單擊右鍵,選擇"審查元素"選項,
單擊"Resources"選項查看localStorage保存的數據
當用戶"點擊清除數據"將清空localStorage對象保存數據記錄
*/
</script>
</html>