正在回答
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>');
}
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星