想通过读取localStorage（SearchInputValue）里面的元素，然后随机选择一个元素展示在（
臭豆腐
）里面触发规则是网页刷新时触发事件，刷新一次更新一次只要localStorage存在元素，就刷新一次更新一次，展示不同的元素
<div id="SearchBox">
<div class="icnb-search">
<div id="SearchEenu">
<div class="SearchFont">
<span class="menu-baby">宝贝</span>
<span class="icon-se">
<span class="icon-font">ˇ</span>
</span>
</div>
<div id="selectSearch-menu">
<div id="SearchTmall"><span class="select-tamll">天猫</span></div>
<div id="SearchShop"><span class="select-shop">店铺</span></div>
</div>
</div>
<form action="" id="searchBox">
<div class="inputRecommendation" data-Rdr-type="SearchRdN">臭豆腐</div>
<div class="inputBox">
<input id="SearchInput" aria-label="请输入内容" name="SearchInput" autocomplete="off">
</div>
<div class="icon-delete">×</div>
<div id="SearchButton">
<button id="SearchBtn">搜索</button>
</div>
</form>
</div>
<div id="Search_rn_box">
var SearchEenu = document.getElementById('SearchEenu');
var selectSearch_menu = document.getElementById('selectSearch-menu');
var sh_for_rmd_rods = document.getElementById('sh_for_rmd_rods');
SearchEenu.onclick = function(ent){
if(selectSearch_menu.style.display==''){
selectSearch_menu.style.display = 'block';
ent.cancelBubble = true;
}else{
selectSearch_menu.style.display = '';
ent.cancelBubble = true;
};
};
document.onclick = function(shwEnt){
if(selectSearch_menu.style.display == 'block'){
selectSearch_menu.style.display = '';
}
if(sh_for_rmd_rods.style.display == 'block'){
sh_for_rmd_rods.style.display = '';
}
};
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];
SearchInput.oninput = function(){
if(SearchInput.value==''){
inputRecommendation.style.display = '';
iconDelete.style.display = '';
sh_for_rmd_rods.style.display = 'block';
}else{
inputRecommendation.style.display = 'none';
iconDelete.style.display = 'block';
sh_for_rmd_rods.style.display = '';
};
};
iconDelete.onclick = function(){
SearchInput.value='';
iconDelete.style.display = '';
inputRecommendation.style.display = '';
SearchInput.focus();
};
SearchBtn.onclick = function(){
let userVal = SearchInput.value;
let localCon = localStorage.getItem('SearchInputValue');
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.onclick = function () {
localStorage.removeItem('SearchInputValue');
location.reload();
};
inputRecommendation.onclick = 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;
};
};
ShowHistory.onclick = 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();
};
};
