JavaScript_Html5_LocalStorage项目demo - 明lucky_H5之家 - 中国HTML5教程资源分享第一站

项目中localStorage实用

项目中h5本地存储的一个小实用，本意使用cookie，但发现chrome调试被禁用，便用了localStorage.

此需求是一贴吧搜索页，在新用户第一次点击搜索框时为搜索页面，老用户点击搜索框时带有搜索记录，实现方法为在点击搜索按钮时便为用户创建一个本地存储localStorage user-data,判断当页面中含有user-data时便将搜索框的val追加进user-data中，以“|”隔开，若user-data不存在便创建user-data。

1 var storage=window.localStorage; 2 if(storage.getItem("user-data")){ 3 var str=storage.getItem("user-data"); 4 storage.setItem("user-data",str+'|'+$('#keyword').val()); 5 }else{ 6 storage.setItem("user-data",$('#keyword').val()); 7 }

当页面加载时若本地localStorage中含有user-data,则获取此数据，返回为字符串，用split方法以“|”为判断条件将此字符串切割为数组，并循环创建，导入页面编辑器中，即：

if($('.search-con') && !findKey('keyWords')){ var html=""; if(window.localStorage && localStorage.getItem("user-data")){ var data=localStorage.getItem("user-data").split('|'); for(var i=data.length-1;i>=0;i--){ html+="<div>"+data[i]+"</div>" } $('.user-clear').show(); }else{ html='<i></i><br><span>未搜索任何信息</span>' } $('.search-con').html(html); }

其中findKey()方法为判断路径中是否含有搜索关键字keyWords，需求是当含有搜索关键字时显示为搜索结果，无需关注。

1 function findKey(name){ 2 var str=window.location.href; 3 return str.indexOf(name)==-1?false:true; 4 }

点击清除搜索记录时清除user-data,即：

1 localStorage.removeItem("user-data");

点击搜索时将搜索框val拼入路径，页面刷新获取后台数据，减少ajax请求，search.html为相对路径，即是当前文件名即可：

1 window.location.href='search.html?keyWords='+encodeURI($('#keyword').val());

实现此需求只需后端一个页面即可（我们后端为asp.net），贴出完整测试代码：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Cache-Control" content="no-cache"> <meta content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta content="black"> <meta content="yes"> <link href="http://img.pccoo.cn/wap/webapp/font/iconfont.css"> <script type="text/javascript" src="http://img.pccoo.cn/wap/js2/jquery.js?v1.0"></script> <title>论坛搜索</title> <style> *{padding:0;margin:0;} li{list-style: none} input{outline: none} .s-content{background:#fff;padding:10px;position:relative;height:30px;border-bottom:1px solid #e5e5e5;} .sear-wrap{display:-webkit-box;display:flex;width:80%;padding:5px; border-radius:20px;background:#f0f0f0;position:absolute;top:20%;left:10px;z-index:9;} .sear-wrap input[type=text] { display:block;-webkit-box-flex:1;flex:1;height:24px;line-height:24px;color:#666;border:none;background:none;text-indent:10px;} .s-content .tishi{position:absolute;right:10px;top:16px;color:#09f;font-size: 14px} .search-con{width: 100%;background: #fff;text-align: center;} .search-con i{margin-top:100px;font-size: 80px;background: #f0f0f0;border-radius: 50%;width: 160px;height: 160px;display: inline-block;line-height: 160px;color:#ddd;} .search-con span{margin-top:10px;color:#ccc;display: inline-block;} .search-con .user-his{width: 100%;height: 40px;color:#333;line-height: 40px;text-align:left;padding-left:10px;font-size: 16px;border-bottom:1px solid #eee;} .user-clear{width: 90px;height: 30px;border-radius: 10px;font-size:14px;color:#09f;border:1px solid #09f;margin:20px auto;line-height: 30px;padding:0 10px;display: none} #span_search{width:30px;text-align: center;} #span_search i{color:#ccc;} #span_search i.icon-guanbi1{color:#ccc;} .srhword {position: absolute;top: 100px;border-radius: 0 0 3px 3px;width: 95%;z-index: 20;background: #fff;overflow-y: auto;_display: none;padding:10px 10px 40px;} .srhword li{padding:0px 0 10px;border-bottom:1px solid #eee;} .srhword .end-title{color:#999;margin:10px 0;font-size: 16px;border:none;} .srhword span{color:red;} .srhword .p1{color:#333;font-size: 16px;line-height: 26px;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden; } .srhword .p2{color:#ccc;font-size: 12px;margin-top:10px;position:relative;} .srhword .p2 i{font-size: 12px;margin-right:10px;} .srhword .p2 em{position:absolute;right:10px;} .load-more{position:absolute;bottom:0;left:0;line-height: 40px;text-align: center;width: 100%;background: #f0f0f0;} .load-more img{vertical-align: middle;} header dl dd.right-search{position:absolute;top:0;right:80px;} header dl dd.right-search i{font-size: 37px;color:#fff;} </style> </head> <body> <section> <form action="" method="get"> <div> <input type="text" placeholder="请输入帖子关键词" maxlength="20"> <span><i></i></span> </div> <span>搜索</span> </form> </section> <section>   </section> <div>清除搜索记录</div>  <script> (findKey("keyWords")){ $(document).find('.search-con').attr('class','srhword').removeClass('search-con'); var key=window.location.search; $('.srhword').html('<li>关于<span> "汽车" </span>的搜索结果</li>\ \ <li>\ <p>悄悄的进村，<span>汽车</span>悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村，</p>\ <p><i> 抹脸花看</i><i> 23</i> 2分钟前</p>\ </li>\ <li>\ <p>悄悄的进村，<span>汽车</span>悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村，</p>\ <p><i> 抹脸花看</i><i> 23</i> 2分钟前</p>\ </li>\ <li>\ <p>悄悄的进村，<span>汽车</span>悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村，</p>\ <p><i> 抹脸花看</i><i> 23</i> 2分钟前</p>\ </li>\ <li>\ <p>悄悄的进村，<span>汽车</span>悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村，</p>\ <p><i> 抹脸花看</i><i> 23</i> 2分钟前</p>\ </li>\ <li>\ <p>悄悄的进村，<span>汽车</span>悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村，</p>\ <p><i> 抹脸花看</i><i> 23</i> 2分钟前</p>\ </li>\ <li>\ <p>悄悄的进村，<span>汽车</span>悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村，</p>\ <p><i> 抹脸花看</i><i> 23</i> 2分钟前</p>\ </li>\ <li>\ <p>悄悄的进村，<span>汽车</span>悄悄的进村，悄悄的进村</p>\ <p><i> 抹脸花看</i><i> 23</i> 2分钟前</p>\ </li>\ ') $('.srhword').append('<div>加载更多</div>'); // match(/aaa(\S*)/)[1] key=key.match(/=(\S*)/)[1]; $.ajax({ url:'', type:'get', autoChange: true, data: { 'key': key}, success:function(data){ }, error:function(){} }) } findKey(name){ var str=window.location.href; return str.indexOf(name)==-1?false:true; } //点击清除清空输入框内容 $('#span_search').on('click',function(){ if($('#span_search').find("i").hasClass("icon-guanbi1")){ $("#keyword").val(""); $('#span_search i').removeClass('icon-guanbi1').addClass('icon-search1'); } }) //输入内容时显示清除按钮 $('#keyword').keyup(function(){ $('#span_search i').removeClass('icon-search1').addClass('icon-guanbi1'); }) ($('.search-con') && !findKey('keyWords')){ var html=""; if(window.localStorage && localStorage.getItem("user-data")){ var data=localStorage.getItem("user-data").split('|'); for(var i=data.length-1;i>=0;i--){ html+="<div>"+data[i]+"</div>" } $('.user-clear').show(); }else{ html='<i></i><br><span>未搜索任何信息</span>' } $('.search-con').html(html); } //点击搜索记录刷新页面 $('.search-con').find('div').on('click',function(){ window.location.href='search.html?keyWords='+encodeURI($(this).text()); }) //点击搜索按钮将搜索内容存入本地 $('.tishi').on('click',function(){ if(window.localStorage && $('#keyword').val()!=""){ var storage=window.localStorage; if(storage.getItem("user-data")){ var str=storage.getItem("user-data"); storage.setItem("user-data",str+'|'+$('#keyword').val()); }else{ storage.setItem("user-data",$('#keyword').val()); } } ($('#keyword').val()!=""){ window.location.href='search.html?keyWords='+encodeURI($('#keyword').val()); } }) //点击清除本地存储 $('.user-clear').on('click',function(){ localStorage.removeItem("user-data"); $('.search-con').remove("div"); $(this).hide(); window.location.href=window.location.href; }) ($('.load-more') && $('.load-more').offset().top<$(window).height()){ $('.srhword').find('.load-more').html('没有更多内容了。。') } $(window).scroll(function(){ if($(document).scrollTop()+$(window).height()>=$('.load-more').offset().top){ var flag=true, pageIndex=0; if(!flag)return; flag=!flag; pageIndex++; $('.srhword').find('.load-more').html("<img src='http://img.pccoo.cn/wap/images/load.gif' />正在加载，请稍后…") $.ajax({ url:'', type:'get', autoChange: true, data: { 'key': key,'pageIndex':pageIndex}, success:function(data){ if(data){ $('.srhword').find('.load-more').before(data); $('.srhword').find('.load-more').html('滑动加载更多') }else{ $('.srhword').find('.load-more').html('没有更多内容了。。') } flag=!flag; }, error:function(){} }) } }) </script> </body> </html>

直接复制到本地便可测试，调试状态为移动端效果更佳，如果路径中含有keyWords则为测试数据，将.html后面的数据删除即是搜索页面。若有疑问或错误，请多多交流，谢谢~~