原理是通过读取本地存储的数据创建元素生成到指定div里面，本地存储的数据有多少就创建多少个li元素
但是不兼容ie
for(let i = 0; i < locaShow.length; i++){
Showhtml += `<li class='SearchHiy_font'data-key='SearchInputValue' data-index=${i}><span class='Search_font'>${locaShow[i]}</span><span class='SearchiconDelBin'id='delhiy' data-index=${i} data-value=${locaShow[i]}>删除</span></li>`;
ShowHistory.innerHTML = Showhtml;
};
var inputRecommendation = document.getElementsByClassName('inputRecommendation')[0];
var SearchInput = document.getElementById('SearchInput');
var iconDelete = document.getElementsByClassName('icon-delete')[0];
var SearchBtn = document.getElementById('SearchBtn');
var ShowHistory = document.getElementById('ShowHistory');
var rods_del = document.getElementsByClassName('rods_del')[0];
function InputVal(){
SearchInput.value = '';
}
SearchInput.oninput = function(){
if(SearchInput.value== ''){
sh_for_rmd_rods.style.display = 'block';
inputRecommendation.style.display = '';
iconDelete.style.display = '';
}else{
inputRecommendation.style.display = 'none';
iconDelete.style.display = 'block';
sh_for_rmd_rods.style.display = '';
};
};
iconDelete.addEventListener('click',function(){
SearchInput.value='';
iconDelete.style.display = '';
inputRecommendation.style.display = '';
SearchInput.focus();
});
SearchBtn.addEventListener('click',function(){
let userVal = SearchInput.value;
arr = localStorage.getItem('SearchInputValue') ? arr = JSON.parse(localStorage.getItem('SearchInputValue')) : [];
if(userVal == null||userVal == ''||userVal == undefined||userVal.replace(/(^\s*)|(\s*$)/g, "")==''){
SearchInput.value = '';
return false;
}else{
let arr = [];
}
if(arr.indexOf(userVal)== -1){
arr.unshift(userVal);
};
if(arr.length >= 15){
arr.splice(arr.indexOf(14),1);
};
localStorage.setItem('SearchInputValue',JSON.stringify(arr));
});
rods_del.addEventListener('click',function(){
localStorage.removeItem('SearchInputValue');
location.reload();
});
inputRecommendation.addEventListener('click',function(shwHir){
SearchInput.focus();
shwHir.cancelBubble = true;
let locaShow = JSON.parse(localStorage.getItem('SearchInputValue')) || [];
if(locaShow.length > ''){
sh_for_rmd_rods.style.display = 'block';
}else{
sh_for_rmd_rods.style.display = '';
};
let Showhtml = '';
for(let i = 0; i < locaShow.length; i++){
Showhtml += `<li class='SearchHiy_font'data-key='SearchInputValue' data-index=${i}>${locaShow[i]}<span class='SearchiconDelBin'id='delhiy' data-index=${i} data-value=${locaShow[i]}>删除`;
ShowHistory.innerHTML = Showhtml;
};
if(selectSearch_menu.style.display == 'block'){
selectSearch_menu.style.display = '';
}
});
function loaA(){
let locaArr = ['连衣裙','男装','新款女装','手机','精品汉服','品牌电脑','华硕'];
let randomArr =locaArr[Math.floor(Math.random()*locaArr.length)];
inputRecommendation.innerHTML = randomArr;
};
ShowHistory.addEventListener('click',function(d){
if(d.target.className == 'SearchiconDelBin'){
let localDel = JSON.parse(localStorage.getItem('SearchInputValue')) || [];
var DelSearch = d.target.dataset.index;
localDel.splice(DelSearch,1);
localStorage.setItem('SearchInputValue',JSON.stringify(localDel));
location.reload();
};
if(d.target.className == 'SearchHiy_font'){
let localCon = JSON.parse(localStorage.getItem('SearchInputValue')) || [];
var inputV = d.target.dataset.index;
SearchInput.value = localCon[inputV];
if(SearchInput.value == ''){
inputRecommendation.style.display = 'block';
iconDelete.style.display = '';
}else{
inputRecommendation.style.display = 'none';
iconDelete.style.display = 'block';
}
};
});
```
