html5实现 搜索历史记录【轻松搞定】 |
您所在的位置：网站首页 › 历史记录快照怎么删除 › html5实现 搜索历史记录【轻松搞定】 |
|
昨天公司要求给html5开发的web前端添加 搜索历史记录的功能，在网上找了一些demo，发现或多或少存在一些问题。总之对于不擅长前端的我，想要找到开箱即用的demo真的很难。 所以自己根据自己的设计，写了一个功能的实现。 技术： HTML5 + localStorage【类似cookie的缓存机制】+js栈 实现的方式也非常的简单,【界面没有样式，请包涵】。 localStorage的value不能存数组对象，所以使用数组转成json的格式放在value中，用menuHistory 来操作转换成数组的操作。
----------------------------------------------------------------------------------------------------------------- 历史搜索 取消 搜索历史 清空历史搜索 var ItemName = ""; //localStorage的getItem 和 setItem的数组名字，主要用来做不同界面调用各自的历史记录。 var menuHistory = new Object(); $(function(){ console.log(1111111111111111); initLocalStorageArg("hi_001"); console.log(ItemName); }); $(document).delegate(".history>li","click",function(){ $("#sec").val($(this).text()); }); /** * 初始化相关参数，界面js调用 * menucode：可以是js的名字 */ function initLocalStorageArg(menucode){ //苹果手机不兼容出现input无法取值以下是解决方法 $('.history>li').click(function(){ var div = $(this).text(); $('#sec').val(div); }); ItemName = "hist_"+menucode; initlocalStorage(); showHistDom(); } /** * 历史数据展示 */ function showHistDom(){ $(".history").html(""); for( var i=0 ; i=0){ var keyval = Object.keys(menuHistory).filter(function(x){return menuHistory[x] == value}).toString() ; menuHistory.splice(Number(keyval), 1); //splice(index,1):index代表value值在数组中对应到下标，1：表示删除 }else { if (menuHistory.length > 9) { menuHistory.pop(); }else { } } menuHistory.unshift(value); localStorage.removeItem(ItemName); localStorage.setItem( ItemName,JSON.stringify(menuHistory)); // 因为localStorage的value不能直接放数组，所以转换程json串后，再set showHistDom(); } //清除记录功能 $(".btnEmpty").click(function(){ localStorage.setItem( ItemName,JSON.stringify([])); initlocalStorage(); showHistDom(); }); /*执行搜索的一种方式，绑定回车键*/ $("#sec").on("keypress",function(e){ var keycode=e.keyCode; if(keycode=='13'){ recordHist(); } }); |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |