模仿博客园写了一个在线编辑自动保存

本来只是想写个简单的demo，没想到写得越多，强迫症犯得越厉害，又搞到凌晨了，不行了，贴完代码就睡觉去了。没什么好解释的，注释都写的很清楚。
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6     <title>auto save</title>
  7     <style type="text/css">
  8         html{
  9             font-size: 0.5rem;
 10         }
 11         form{
 12             width: 100%;
 13         }
 14         .title, .content{
 15             width: 50%;
 16             margin: 10px auto;
 17         }
 18 
 19         .content{
 20             height: 300px;
 21         }
 22         .tips{
 23             color: red;
 24         }
 25         .ctrl{
 26             width: 100%;
 27             float: right;
 28         }
 29     </style>
 30 </head>
 31 <body>
 32     <form>
 33         <input class="title" id="title" />
 34         <div class="tips" id="tips">
 35             already auto save at <span id="saveDate"></span>
 36         </div>
 37         <textarea class="content" id="content"></textarea>
 38     </form>
 39     <div class="ctrl">
 40         <input type="button" value="Save" id="save" />
 41         <input type="button" value="Clear" id="clear" />
 42     </div>
 43 
 44     <script type="text/javascript" src="./lib/jquery-1.11.3.min.js"></script>
 45     <script type="text/javascript">
 46         //保存数据
 47         $("#save").on("click", function(){
 48             // window.localStorage.setItem('title',$("#title").val());
 49             // window.localStorage.setItem('content',$("#content").val());
 50 
 51             // saveValueToLocalById('title','title');
 52             // saveValueToLocalById('content','content');
 53 
 54             saveArticle();
 55         });
 56 
 57         //清空数据
 58         $("#clear").on("click", function(){
 59             window.localStorage.clear();
 60         });
 61 
 62         //保存指定id的value到本地存储
 63         function saveValueToLocalById(id,index){
 64             window.localStorage.setItem(index, $("#"+id).val());
 65         }
 66 
 67         //给数字补0
 68         function addZero(str){
 69             var result = "";
 70             if(parseInt(str)<10){
 71                 result = "0" + str;
 72             }else if(parseInt(str) >= 10){
 73                 result = "" + str;
 74             }
 75 
 76             return result;
 77         }
 78 
 79         //获取当前时间
 80         function getNow(){
 81             var d = new Date();
 82             var now = addZero(d.getHours()) + ":" + addZero(d.getMinutes()) + ":" + addZero(d.getSeconds());
 83 
 84             return now;
 85         }
 86 
 87         //保存文章并且提示
 88         function saveArticle(){
 89             saveValueToLocalById('title','title');
 90             saveValueToLocalById('content','content');
 91 
 92             var now = getNow();
 93             $("#saveDate").text(now);
 94             $("#tips").css({'display':'block'}).animate({'opacity':1},2000,function(){
 95                 $(this).animate({'opacity':0},5000,function(){
 96                     $(this).css({'display':'none'});
 97                 });
 98             });
 99         }
100 
101         $(document).ready(function(){
102             //隐藏自动保存提示
103             $("#tips").css({'opacity':0,'display':'none'});
104 
105             //读取本地存储
106             var article = {
107                 title:window.localStorage.getItem('title'),
108                 content:window.localStorage.getItem('content')
109             };
110 
111             $(".title").val(article.title);
112             $(".content").val(article.content);
113 
114 
115             //每间隔一段时间做一次自动保存
116             var saveFrequecy = 20*1000;
117 
118             var timer = setInterval(function(){
119                 saveArticle();
120             },saveFrequecy);
121 
122 
123         });
124     </script>
125 </body>
126 </html>