搜索历史记录该怎么写啊

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

以下方法同学可以参考一下

<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">

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>');
}


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师