最近工资都是不知不觉的用光了，然后朋友交了一个方法，
把每个月用的钱都记录下来，到月底再看看哪些钱能省而不用，这样渐渐的就能省下钱来了。
但是手动记录计算，查询数据又很麻烦。所以最近抽空，结合jquery和刚研究的html5的localStorage实现了一个日常费用查询器。
技术嘛。就是要为解决问题而存在的。把技术转变为解决问题的产品才是王道。
先介绍下localStorage。顾名思义，本地存储。
本地存储解决方案很多，比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。
借用网上的一张图来看下目前主流的本地存储方案：
localStorage有自身的优点：容量大、易用、强大、原生支持；缺点是兼容性差些（chrome, safari, firefox，IE 9，IE8都支持 localStorage，主要是IE8以下版本不支持）、安全性也差些（所以请勿使用localStorage保存敏感信息）。
简单来说，把数据已键值对的形式，类似map，存在浏览器的localStorage中。这些数据是永久的，除非是主动删除。数据才会消失。
它的空间也达到了5mb。而且之后可以继续扩大。对于一些小程序，例如这个日常费用查询器，需要存储数据的，但是数据又不多，没必要在连个数据库，而把数据直接存在浏览器中。再方便不过了。
这里就不多介绍了，上自己的代码，欢迎拍砖。只是一个html页面就实现了所要的功能。界面没有美化，请谅解。
只要把下面代码复制到一个html文件中就可以用了。jquery的时间插件datepicker我也直接调用外链了，不需要在下js文件了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <style type="text/css"> *{ margin:0; padding:0; } body{ font:18px/28px Arial, Helvetica, sans-serif; color:#666; } label{ width:100px; float:left; } .left{ margin-left:450px; display:block; padding:5px; width:300px; float:left; } .right{ float:left; } .th{ float:left; width:100px; text-align:center; } h1{ text-align:center; } </style> <script type="text/javascript"> $(function(){ //初始化当前日期 $('#inputDate').val(new Date().getFullYear()+"-"+(new Date().getMonth()+1)+"-"+new Date().getDate()); //日期控件 $('#inputDate,#beginDate,#endDate').datepicker({ showMonthAfterYear: true, // 月在年之后显示 dateFormat:'yy-mm-dd', }); //本地存储 $('#add').click(function(){ if(('localStorage' in window) && window['localStorage'] !== null){ if(addcheck()){ var strname=$('#inputDate').val()+","+$('#money').val()+","+$('#description').val()+";"; //json形式存储 var strvalue={'inputDate':$('#inputDate').val(),'money':$('#money').val(),'description':$('#description').val()}; localStorage.setItem(strname,JSON.stringify(strvalue)); alert(strname+"保存成功"); $('#money').val("请输入金额"); $('#description').val("请输入使用描述"); } }else{ alert('天啊，你还在用这么土的浏览器'); } }); $('#clear').click(function(){ if(('localStorage' in window) && window['localStorage'] !== null){ if(confirm("确认清除?")){ localStorage.clear(); } }else{ alert('天啊，你还在用这么土的浏览器'); } }); //查询 $('#query').click(function(){ if(('localStorage' in window) && window['localStorage'] !== null){ if(querycheck()){ //清除之前添加的内容 $('.right table tr').remove(); //遍历 var begindate=$('#beginDate').val(); var enddate=$('#endDate').val(); var deslimit=$('#deslimit').val(); var sum=0; var th="<tr><th class='th'>日期</th><th class='th'>金额</th><th class='th'>使用描述</th></tr>"; $(th).appendTo($('.right table')); for(var i=0;i<localStorage.length;i++){ var key=localStorage.key(i); var obj=localStorage.getItem(key); var inputdate=JSON.parse(obj).inputDate; var money=JSON.parse(obj).money; var description=JSON.parse(obj).description; if((inputdate>=begindate)&&(inputdate<=enddate)){ if(!deslimit==""){ if(description.indexOf(deslimit)!=-1){ var temp="<tr><td class='th'>"+inputdate+"</td>"+"<td class='th'>"+money+"</td>"+"<td class='th'>"+description+"</td></tr>"; $(temp).appendTo($('.right table')); sum=parseFloat(sum)+parseFloat(money); } }else{ var temp="<tr><td class='th'>"+inputdate+"</td>"+"<td class='th'>"+money+"</td>"+"<td class='th'>"+description+"</td></tr>"; $(temp).appendTo($('.right table')); sum=parseFloat(sum)+parseFloat(money); } } } if($('.right table tr').size()==1){ var temp1="<tr><td class='th'> </td><td class='th'>没有匹配数据</td><td class='th'></td></tr>"; $(temp1).appendTo($('.right table')); } var tt="<tr><th class='th'>合计</th><th class='th'>"+sum+"</th></tr>"; $(tt).appendTo($('.right table')); } }else{ alert('天啊，你还在用这么土的浏览器'); } }); //删除 $('#delete').click(function(){ if(('localStorage' in window) && window['localStorage'] !== null){ if(querycheck()){ //遍历 var begindate=$('#beginDate').val(); var enddate=$('#endDate').val(); var deslimit=$('#deslimit').val(); for(var i=0;i<localStorage.length;i++){ var key=localStorage.key(i); var obj=localStorage.getItem(key); var inputdate=JSON.parse(obj).inputDate; var money=JSON.parse(obj).money; var description=JSON.parse(obj).description; if((inputdate>=begindate)&&(inputdate<=enddate)){ if(!deslimit==""){ if(description.indexOf(deslimit)!=-1){ if(confirm("确认删除"+key)){ localStorage.removeItem(key); $('#query').triggerHandler("click"); } } }else{ if(confirm("确认删除"+key)){ localStorage.removeItem(key); $('#query').triggerHandler("click"); } } } } } }else{ alert('天啊，你还在用这么土的浏览器'); } }); function addcheck(){ if($('#money').val()==""){ alert("请输入金额"); return false; } if($('#description').val()==""){ alert("请输入使用描述"); return false; } return true; } function querycheck(){ if($('#beginDate').val()==""){ alert("请输入开始日期"); return false; } if($('#endDate').val()==""){ alert("请输入结束日期"); return false; } return true; } }) $(function(){ $('#money').focus(function(){ var money_value=$(this).val(); if(money_value=="请输入金额"){ $(this).val(""); } }) $('#money').blur(function(){ var money_value=$(this).val(); if(money_value==""){ $(this).val("请输入金额"); } }) $('#description').focus(function(){ var description_value=$(this).val(); if(description_value=="请输入使用描述"){ $(this).val(""); } }) $('#description').blur(function(){ var description_value=$(this).val(); if(description_value==""){ $(this).val("请输入使用描述"); } }) }) </script> </head> <body style="font-size:75%;"> <h1>日常费用查询器</h1> <div class="left"> <div class="add"> <label>日期</label> <input type="text" id="inputDate"readonly="readonly" /><br/> <label>金额</label> <input type="text" id="money" value="请输入金额"/><br/> <label>使用描述</label> <input type="text" id="description" value="请输入使用描述"/><br/> <input type="submit" value="保存" id="add"/> </div> <div class="query"> <label>开始日期</label> <input type="text" id="beginDate"readonly="readonly" /><br/> <label>结束日期</label> <input type="text" id="endDate"readonly="readonly" /><br/> <label>使用描述限制</label> <input type="text" id="deslimit"/><br/> <input type="submit" value="查询" id="query"/> <input type="submit" value="删除查询记录" id="delete"/> <input type="submit" value="清除所有" id="clear"/> </div> </div> <div class="right"> <table> </table> </div> </body> </html>
