<!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>