验证中...
语言: JavaScript
分类: JavaScript 工具
最后更新于 2018-11-06 11:11
gistfile1.txt
原始数据 复制代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>首页</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
margin-left: 300px;
}
ul{
list-style: none;
}
ul li,div{
width: 250px;
padding: 10px 0;
margin-left: 10px;
border-bottom: 1px dashed #ccc;
height: 20px;
}
a{
float: right;
}
input{
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<input type="search" placeholder="输入搜索关键字"/>
<input type="button" value="搜索"/>
<div><a href="javascript:;">清空搜索记录</a></div>
<ul>
<li>没有搜索记录</li>
<li><span>手机</span><a href="javascript:;">删除</a></li>
<li><span>手机</span><a href="javascript:;">删除</a></li>
<li><span>手机</span><a href="javascript:;">删除</a></li>
<li><span>手机</span><a href="javascript:;">删除</a></li>
<li><span>手机</span><a href="javascript:;">删除</a></li>
</ul>
<script src="jquery.min.js"></script>
<script>
$(function () {
var historyListJson = localStorage.getItem('historyList') || '[]';
var historyListArr = JSON.parse(historyListJson);
/*获取到了数组格式的数据*/
var render = function () {
var html = '';
historyListArr.forEach(function (item,i) {
html += '<li><span>'+item+'</span><a data-index="'+i+'" href="javascript:;">删除</a></li>';
});
html = html || '<li>没有搜索记录</li>';
$('ul').html(html);
}
render();
$('[type="button"]').on('click',function () {
var key = $.trim($('[type=search]').val());
if(!key){
alert('请输入搜索关键字');
return false;
}
/*追加一条历史*/
historyListArr.push(key);
/*保存*/
localStorage.setItem('historyList',JSON.stringify(historyListArr));
/*渲染一次*/
render();
$('[type=search]').val('');
});
/*3.点击删除的时候删除对应的历史记录渲染列表*/
$('ul').on('click','a',function () {
var index = $(this).data('index');
historyListArr.splice(index,1);
localStorage.setItem('historyList',JSON.stringify(historyListArr));
render();
});
/*4.点击清空的时候清空历史记录渲染列表*/
$('div a').on('click',function () {
historyListArr = [];
//localStorage.clear();
//localStorage.removeItem('historyList');
localStorage.setItem('historyList','');
render();
});
});
</script>
</body>
</html>

评论列表( 0 )

你可以在登录后,发表评论

搜索帮助

12_float_left_people 12_float_left_close