商品搜索历史记录的功能

1、添加搜索记录根据输入输入框内容点击搜索添加到本地存储中而且要把每次都是的内容都加进去(使用一个数组的方式 追加)

1.1 给搜索按钮添加点击事件

1.2 获取当前文本输入的内容 判断如果用户没有输入提示请输入

1.3 获取本地存储中已经存储的数据 并且转成一个数组 如果有值就使用JSON.parse转换成数组 如果没有值 使用空数组

1.4 把当前输入文本的内容 往前插入到数组中

1.4.1 去数组查询一下当前搜索的内容是否存在 存在删除 再往前追加

1.4.2 调用删除的方法删掉当前索引的值 删1个

1.4.3 删掉了之后再往数组的前面追加

1.5 把数组保存到本地存储中 往本地存储存储值的时候也要转成字符串存储

1.6 添加完成调用查询的方法查询历史记录

1.7 添加完成后清空输入框

2、查询搜索记录查询本地存储中的搜索记录 渲染搜索历史列表

2.1 获取本地存储中已经存储的数据 并且转成一个数组

2.2 调用历史记录的模板 传入当前的搜索历史的数据 但是数据是一个数组 不是一个对象 把数组转成一个对象再传入模板函数里面

3、删除搜索记录
点击x删除当前搜索记录 获取当前点击搜索内容去数组中删除删除完成后保存到本地存储中

3.1 给所有的删除x添加点击 tap

3.2 获取当前点击x的删除的索引

3.3 获取本地存储中已经存储的数据 并且转成一个数组

3.4 把数组中当前要删除的索引的元素删掉

3.5 删除完成后要把数组重新保存到本地存储中

3.6 删除完成后要重新查询刷新页面

4、清空搜索记录把整个本地存储的键清空

4.1 给清空按钮添加点击事件

4.2 把整个本地存储的键清空removeItem 不要使用clear  “clear”会把本地其他存储的值都清空

4.3 清空完成后重新刷新页面

html结构

<!--搜索历史-->
		<div class="search-history">
			<div class="title mui-clearfix">
				<span>搜索历史</span>
				<a href="#" class="fa fa-trash mui-pull-right btn-clear">清空记录</a>
			</div>
			<div class="mui-card">
				<div class="mui-card-content search-history">
					<ul class="mui-table-view">
						<!--历史纪录-->
						<li class="mui-table-view-cell">Item 1
							<!--删除按钮-->
							<span class="fa fa-close mui-badge"></span>
						</li>
						<li class="mui-table-view-cell">Item 2
							<span class="fa fa-close mui-badge"></span>
						</li>
					</ul>
				</div>
			</div>
		</div>

模板引擎渲染

<!--准备模板-->
	<script id="historyListTpl" type="text/html">
		{{if rows.length > 0}}
			{{each rows value index}}
				<li class="mui-table-view-cell">{{value}}
					<span class="fa fa-close mui-badge btn-delete" data-index="{{index}}"></span>
				</li>
			{{/each}}
		{{else}}
			<li class="mui-table-view-cell">没有更多的记录要显示啦!</li>
		{{/if}}
	</script>

js 完成需求

• 原生版

$(function() {
	/*搜索历史功能 使用本地存储技术 把搜索的内容 添加到本地存储中 使用本地存储中数据渲染页面*/
	// 1. 添加搜索记录
	// 	1. 把搜索的内容追加入到本地存储的localstorage中
	// 	2. 使用数组的方式去添加到本地存储中
	// 			1. 第一次加里面的是空的使用空数组添加当前搜的值
	// 			2. 第二次以后加 获取之前的数组 在原来数组的基础上去加
	// 	3. 加完后调用查询刷新页面
	//1.给当前的搜索按钮添加点击事件------------------------------------------------
	$('.search-btn').on('tap', function() {
		//2.获取input框输入的内容
		var search = $('.search-input').val();
		//3.进行非空判断 去掉两端的空格	search.trim()	!false == true	!true == false
		if(!search.trim()) {
			alert('请输入合法内容!');
			return false;
		}
		/*
		 *4.localStorage	获取本地存储中的值进行判断,如果有值就在这个值的基础上添加,
		 * 如果没有值使用空数组添加	如果有数据	使用JSON.parse把字符串转成数组
		 * 如果没有数据	使用后面的空数组
		 */
		var historyData = JSON.parse(localStorage.getItem('historyData') || '[]');
		//		console.log(historyData);
		//5.把当前输入的内容search  添加到searchData中
		//		historyData.push(search);	//往数组后追加
		//		historyData.unshift(search);	往数组前面添加
		//6.添加的时候要去重 indexOf检测当前值是否存在数组中存储,存在就返回当前的索引,不存在就返回 -1
		if(historyData.indexOf(search) != -1) {
			//如果索引表示存在,把当前索引的值删掉	splice删除数组中的元素(第一个参数:要删除的索引,第二个参数往后面删除几个)
			historyData.splice(historyData.indexOf(search), 1);
		}
		//7.确保去重后面再往数组前面追加当前输入的内容
		historyData.unshift(search);
		//		console.log(historyData);
		//8.把数组储存到本地存储中,设置值,只能使用字符串,把数组转换成字符串
		localStorage.setItem('historyData', JSON.stringify(historyData));
		//9.点击搜索后清空input框的value值
		$('.search-input').val('');
		//10.添加完成,调用查询历史记录函数刷新列表
		queryHistory();
	});
	//默认页面加载就调用查询函数
	queryHistory();
	/*
	 * 3.删除搜索记录
	 * 		1.点击 x(也就是删除按钮) 获取当前的点击的索引
	 * 		2.获取当前的整个数组	把当前点击的 x 对应的索引元素删除
	 * 		3.删除完成后重新存储到本地存储中
	 * 		4.调用查询函数刷新列表
	 */
	//1.给所有的 x 添加点击事件  动态添加列表需要委托事件
	$('.search-history ul').on('tap', '.btn-delete', function() {
		//2.获取当前点击按钮的索引
		var index = $(this).data('index');
		//3.获取本地存储的数组
		var historyData = JSON.parse(localStorage.getItem('historyData') || '[]');
		//4.删除当前点击的索引对应的值
		historyData.splice(index, 1);
		//5.将删除后的数组添加到本地存储中
		localStorage.setItem('historyData', JSON.stringify(historyData));
		//6.调用函数刷新当前列表
		queryHistory();
	});
	/*
	 * 4.清空搜索记录
	 * 		1.获取清空记录按钮注册点击事件
	 * 		2.获取本地存储的数组
	 * 		3.进行删除
	 * 		4.调用函数刷新当前列表
	 */
	//1.清空按钮
	$('.btn-clear').on('tap', function() {
		//2.删除整个数组
		localStorage.removeItem('historyData');
		//3.调用函数刷新当前列表
		queryHistory();
	})
})
queryHistory();
//查看历史记录的封装函数
function queryHistory() {
	//1.获取本地存储中的数组
	//2.把数组通过模板引擎渲染到页面历史记录列表
	//1.获取本地储存中的数组
	var historyData = JSON.parse(localStorage.getItem('historyData') || '[]');
	console.log(historyData);
	//2.调用模板,	数据是一个数组不是对象,要用{}包起来
	var html = template('historyListTpl', {'rows': historyData});
	//3.添加到ul里面
	$('.mui-card-content ul').html(html);
}

• 面向对象

$(function() {
	Letao.addHistory(); //添加
	Letao.queryHistory(); //查询
	Letao.deleteHistory(); //删除
	Letao.clearHistory(); //清空
})
var Letao = {
	//添加历史纪录
	addHistory: function() {
		$('.search-btn').on('tap', function() {
			var search = $('.search-input').val();
			if(!search.trim()) {
				alert('请输入合法内容!');
				return false;
			}
			var historyData = JSON.parse(localStorage.getItem('historyData') || '[]');
			if(historyData.indexOf(search) != -1) {
				historyData.splice(historyData.indexOf(search), 1);
			}
			historyData.unshift(search);
			localStorage.setItem('historyData', JSON.stringify(historyData));
			$('.search-input').val('');
			//调用查询历史纪录
			Letao.queryHistory();
		});
	},
	//查询历史纪录
	queryHistory: function() { //模板引擎渲染
		var historyData = JSON.parse(localStorage.getItem('historyData') || '[]');
		var html = template('historyListTpl', {
			'rows': historyData
		});
		$('.mui-card-content ul').html(html);
	},
	//删除历史纪录
	deleteHistory: function() {
		$('.search-history ul').on('tap', '.btn-delete', function() {
			var index = $(this).data('index');
			var historyData = JSON.parse(localStorage.getItem('historyData') || '[]');
			historyData.splice(index, 1);
			localStorage.setItem('historyData', JSON.stringify(historyData));
			Letao.queryHistory();
		});
	},
	//清空历史纪录
	clearHistory: function() {
		$('.btn-clear').on('tap', function() {
			localStorage.removeItem('historyData');
			Letao.queryHistory();
		})
	}
}