SOURCE

console 命令行工具 X clear

                    
>
console
$("#addCount").click(function() { 
   //此瀏覽器支援Web Storage
   if (typeof(Storage) !== "undefined") {
     //注意Key有區分大小寫
     if (localStorage.clickcount) { //如果clickcount這個key裡有值的話 
       localStorage.clickcount = Number(localStorage.clickcount) + 1; //把字串轉型成數字※Number()同時支援parseInt()和parseFloat()
     } else { //localStorage.clickcount 無值的話
       //localStorage只能儲存字串
       localStorage.clickcount = 1; //給預設1,此數字會自動轉型成字串,大概是js的特性?
     } 
     $("#result").html("目前localStorage的值為 " + (typeof(localStorage.clickcount) == "undefined" ? 0 : Number(localStorage.clickcount)));
   } else { 
     alert("此浏览器不支持Web Storage");
   }

 });  

 $("#result").html("目前localStorage的值為 " + (typeof(localStorage.clickcount) == "undefined" ? 0 : Number(localStorage.clickcount)));


 $("input#removeOne").click(function() {

   //此瀏覽器支援Web Storage
   if (typeof(Storage) !== "undefined") {
     //注意Key有區分大小寫
     localStorage.removeItem("clickcount");

     $("div#result").html("目前localStorage的值為 " + (typeof(localStorage.clickcount) == "undefined" ? 0 : Number(localStorage.clickcount)));

   } else {
     alert("此瀏覽器不支援Web Storage");
   }

 }); //end click 註冊事件




 $("input#clearAll").click(function() {

   //此瀏覽器支援Web Storage
   if (typeof(Storage) !== "undefined") {

     localStorage.clear(); //清除所有localStorage

     $("div#result").html("目前localStorage的值為 " + (typeof(localStorage.clickcount) == "undefined" ? 0 : Number(localStorage.clickcount)));

   } else {

     alert("此瀏覽器不支援Web Storage");
   }

 }); //end click 註冊事件
<input type="button" value="加1" id="addCount" /> 
<input type="button" value="remove单个localStorage" id="removeOne" />  
<input type="button" value="清除所有localStorage" id="clearAll" />  
<div id="result">fghj</div>
input {
  background: #eee;
  border: #ccc 1px solid;
  padding: 15px;
  margin: 5px;
  outline: none;
  cursor:pointer;
  &:hover {
    background: #fff;
  }
}