利用浏览器存储历史数据,localStorage存取操作
<!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="js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*1.使用json数据存储搜索历史记录*/
/*2.预设一个key historyList */
/*3.数据格式列表 存的是json格式的数组*/
/*4. [电脑,手机,。。。。]*/
//1.默认根据搜索记录添加历史
var historyJson =window.localStorage.getItem('aaa') || '[]';
var historyArr = JSON.parse(historyJson);
var render = function() {
html = '';
//遍历historyArr
historyArr.forEach(function(item, index) {
html += '<li><span>' + item + '</span><a data-index href="javascript:;">删除</a></li>'
});
html = html || '<li>没有搜索记录</li>';
$('ul').html(html);
};
//2.点击搜索的时候更新历史记录渲染列表
$('[type=button]').on('click',function(){
var key=$.trim($('[type=search]').val());
historyArr.push(key);
localStorage.setItem('aaa',JSON.stringify(historyArr));
render();
$('[type=search]').val('');
})
//3.点击删除的时候删除对应的历史记录渲染列表
$('ul').on('click','a',function(){
var index=$('a').data('index');
//删除
historyArr.splice(index,1);
//保存
localStorage.setItem('aaa',JSON.stringify(historyArr));
//渲染
render()
})
/*4.点击清空的时候清空历史记录渲染列表*/
$('div a').on('click',function(){
//清空
historyArr=[];
localStorage.removeItem('historyList');
render();
})
})
</script>
</body>
</html>