<!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;
width: 250px;
position: absolute;
}
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>
</ul>
<script src="jquery.min.js"></script>
<script>
$(function () {
// 根据历史记录渲染历史列表
// 获取localStorage数据数据是json格式
var historyListJson = localStorage.getItem('historyList') || '[]'; //historyList预设的键;
//把json数据转换成数组
var historyListArr = JSON.parse(historyListJson);
// 1渲染数据
function render(){
// 定义一个空html
var html = '';
// 遍历数组
// 方法一
// historyListArr.forEach(function(item,i){ //value == key
// html += '<li><span>'+ item +'</span><a data-index="'+ i +'" href="javascript:;">删除</a></li>';
// });
// 方法二
for(var i=0;i < historyListArr.length;i++){
html += '<li><span>'+ historyListArr[i] +'</span><a data-index="'+ i +'" href="javascript:;">删除</a></li>';
}
// 判断html里面有数据没
html = html||'<li>没有搜索记录</li>';
// 把数据渲染到ul里面
$('ul').html(html);
}
render();
// 2点击搜索的时候更新历史搜索记录、
$('[type="button"]').on('click',function(){
// 获取搜索框的内容
var key = $.trim($('[type="search"]').val());
// console.log(key);
// 判断点击搜索、搜索框内没有内容提示用户
if(!key){
alert('请输入内容');
return false;
}
// 追加数据到historyListArr数组中
historyListArr.push(key);
// 保存更新追加的数据到json数据中
localStorage.setItem('historyList',JSON.stringify(historyListArr));
// 渲染数据/直接调用前面的渲染数据函数
render();
// 清空搜索框
$('[type="search"]').val('');
})
// 3删除数据
// 因为a的id是动态生成的需要冲ul拿到a的id
$('ul').on('click','a',function(){
// 获取点击的a的id
var index = $(this).data('index');
// 删除数组内的指定位置数据
historyListArr.splice(index,1);
// 保存更新追加的数据到json数据中
localStorage.setItem('historyList',JSON.stringify(historyListArr));
// 渲染数据/直接调用前面的渲染数据函数
render();
});
// 清除全部历史记录
$('div a').on('click',function(){
// 清空数据
historyListArr = []; //先把数组设置为空
localStorage.removeItem('historyList'); //再删除空数据
// 渲染数据/直接调用前面的渲染数据函数
render();
});
});
</script>
</body>
</html>
localStorage()历史搜索记录
最新推荐文章于 2023-10-02 18:05:33 发布