本来只是想写个简单的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>