使用localStorage实现历史记录搜索功能也就是天猫app历史记录存储方便浏览

得益于H5的API，前端可以很方便的存储数据，除了cookie，新增的sessionStorage、localStorage可以在用户本地存储数据，这可以让前端实现一些，以前只能有数据库存储的功能。

搜索记录可以用前端实现，由于这些数据没有特别安全的要求，用户搜索过的关键词保存在用户本地是完全可以的。这样做也可以减少服务器的压力。

搜索记录应该采用localStorage永久的存储，当用户下次访问的时候，这个数据还在。

下面的例子是手机端网页，布局比较粗糙，功能都正常。

主要思路：在向localStorage存储的时候，以点击搜索的时间戳为key，以搜索的词语为value.最多存储5条数据。当超过5条，会删除最早的记录。

 

	lang="en">
	charset="UTF-8">
	name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	name="apple-mobile-web-app-capable" content="no">
	name="apple-mobile-web-app-status-bar-style" content="black">
	name="format-detection" content="telephone=no">
	class="" id="sec">
	id="search">搜索
	class="current">最近搜索
	class="delete history" style="width: 100%;float: left">
	class="history" id="his-dele">X
	class="Storage" style="width: 100px;height: 100px;margin: 0 auto;">无存储记录

如有同学遇到需要做存储类项目欢迎参考，就是这样粘贴复制。没毛病!老铁。。。。。拿走不谢

转载于:https://www.cnblogs.com/hjptopshow/p/6694467.html