html代码
<input name="keywords" id="keywords" type="text" class="sso_wk" x-webkit-speech="" autofocus placeholder="请输入您要搜索产品" onkeydown="if(event.keyCode==13){SiteSearch();return false};">
<input name="" class="sso_an" type="button" onclick="SiteSearch();">
<div class="lsss">历史搜索:</div>
<div class="sslb" id="lssslb">
</div>
js代码
//产品搜索并存值
var thisurl="search.aspx?action=search";
function SiteSearch(){
var sszd = $("#keywords").val();
setHistoryItems(sszd);
location.href=thisurl+"&sszd="+sszd+"";
};
//取值写入页面
$(function(){
var str=localStorage.historyItems;
var s = '';
if(str==undefined){
s='<div class="rmssts">暂无搜索记录...</div>';
$("#lssslb").append(s);
}else{
var strs= new Array();
strs=str.split("|");
for(var i=0;i<strs.length;i++){
s+= "<a href='search.aspx?action=search&sszd="+strs[i]+"' >"+strs[i]+"</a>";
}
$("#lssslb").append(s+'<input type="button" class="scls" onclick="clearHistory();" value="清除历史记录">');
}
});
//存值方法,新的值添加在首位
function setHistoryItems(keyword) {
let { historyItems } = localStorage;
if (historyItems === undefined) {
localStorage.historyItems = keyword;
} else {
historyItems = keyword + '|' + historyItems.split('|').filter(e => e != keyword).join('|');
localStorage.historyItems = historyItems;
}
};
//清除值
function clearHistory() {
localStorage.removeItem('historyItems');
var div = document.getElementById("lssslb");
while(div.hasChildNodes()) //当div下还存在子节点时 循环继续
{
div.removeChild(div.firstChild);
}
$("#lssslb").append('<div class="rmssts">暂无搜索记录...</div>');
}
//存值方法,新的值添加在首位
function setHistoryItems(keyword) {
let { historyItems } = localStorage;
if (historyItems === undefined) {
localStorage.historyItems = keyword;
} else {
historyItems = keyword + '|' + historyItems.split('|').filter(e => e != keyword).join('|');
localStorage.historyItems = historyItems;
}
};
//清除值
function clearHistory() {
localStorage.removeItem('historyItems');
var div = document.getElementById("lssslb");
while(div.hasChildNodes()) //当div下还存在子节点时 循环继续
{
div.removeChild(div.firstChild);
}
$("#lssslb").append('<div class="rmssts">暂无搜索记录...</div>');
}