利用html5的localStorage结合jquery实现日常费用查询器
最近工资都是不知不觉的用光了，然后朋友交了一个方法，
把每个月用的钱都记录下来，到月底再看看哪些钱能省而不用，这样渐渐的就能省下钱来了。
但是手动记录计算，查询数据又很麻烦。所以最近抽空，结合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文件了。
刚用ie测了下。发现ie在使用JSON会出现点小问题.所以要用请用谷歌或者火狐浏览器把。
<!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>
浙公网安备 33010602011771号