JS在H5下实现本地历史搜索记录

项目中要用到点击手机键盘搜索按钮时，搜索后本地存储写入历史记录，下面写了个简单的本地搜索，效果如下：

CSS部分

<style>
		/*搜索框样式*/		
		.fubao-serch {
			margin: 10px 15px -15px 15px;
			border-radius: 25px;
		}
		/*块状搜索记录*/
		
		#spancircle {
			padding: 5px 5px 25px 5px;
		}
		
		#spancircle div {
			padding: 10px 15px;
			line-height: 12px;
			font-size: 16px;
			color: #353535;
			background-color: #F9F9F9;
			border-radius: 50px;
			display: inline-table;
			margin: 4px;
			border: none;
		}
	</style>

HTML部分

<div class="fubao-serch">
			<div class="mui-input-row mui-search">
				<input type="search" id="selectzx" class="mui-input-clear" autocomplete="off" placeholder="搜索资讯">
			</div>
			<div id="spancircle">
				<!--<div>怎么注册</div>-->
			</div>
		</div>

JS部分

		var max_history = 5; // 存储最大历史数据
			$("#selectzx").on('keypress', function(e)  {                  
				var  keycode  =  e.keyCode;                               
				if(keycode == '13')  { 
					if(document.getElementById("selectzx").value == "") {
						mui.toast("请输入搜索内容");
						return;
					} else {
						e.preventDefault();                         //请求搜索接口  
						searchHistory($(this).val());   

					}                                     
				}        
			})
			var data = localStorage.getItem('data'); //从本地存储中读取数据
			historydata(JSON.parse(data)); // 渲染数据
			function searchHistory(_serchtext) {

				var data = localStorage.getItem('data'); //从本地存储中读取数据
				if(data) {      
					var arr = JSON.parse(data); //如果有数据则转换成对象或数组					    
				} else {      
					var arr = []; //如果没有数据，则新增一条
					    
				}    
				arr.push(_serchtext);
				removalDuplicate(arr); // 对用户输入值进行处理(去重-筛选)				    
				localStorage.setItem('data', JSON.stringify(arr)); //将数据写入到本地存储中
			}
			// 数组去重-筛选函数
			function removalDuplicate(arr) {
				for(var i = 0; i < arr.length; i++) {
					var arritem = arr[i].trim(); // 去除字符串两端空格
					// 如果值为空，则不添加
					if(arritem == '') {
						arr.splice(i, 1);
					}
					if(arritem !== "") {
						for(var j = i + 1; j < arr.length; j++) {
							if(arr[i] == arr[j]) {
								arr.splice(i, 1); //如果第二次输入的值与第一次相同，则添加第二次的值
							}
						}
					}
				}
				return arr;
			}
			// 渲染数据
			function historydata(searchArr) {

				if(searchArr != null) {
					searchArr.reverse(); //反转，从后往前添加
					// 遍历出数据
					if(searchArr.length <= max_history) { //如果存储数据小于等于max_history,则遍历渲染 
						for(var i = 0; i < searchArr.length; i++) {
							$('#spancircle').append('<div onclick=\'JacyWindow("FuBaoSouSuoDetil.html?word=' + encodeURI(searchArr[i]) + '&type=0", "FuBaoSou", "搜索")\'>' + searchArr[i] + '</div>');
						}
					} else { //否则渲染最大历史记录条数
						for(var i = 0; i < max_history; i++) {
							$('#spancircle').append('<div onclick=\'JacyWindow("FuBaoSouSuoDetil.html?word=' + encodeURI(searchArr[i]) + '&type=0", "FuBaoSou", "搜索")\'>' + searchArr[i] + '</div>');
						}
					}
				}

				/*	$('#spancircle').append('<div class="clear-history">清空×</div>');*/
			}
                  /*清空历史搜索记录  此方法清空会退出应用程序 清空用户信息 重新登录*/
				/*	$(".clear-history").click(function(event) {
						event.stopPropagation();
						localStorage.clear();
						$("#spancircle").empty();
					
					});*/