利用浏览器存储历史数据，localStorage存取操作

最新推荐文章于 2022-11-11 00:28:41 发布

qq_42524930

最新推荐文章于 2022-11-11 00:28:41 发布

阅读量307

点赞数

分类专栏： H5-API 文章标签： H5新API-localStorage方法

本文链接：https://blog.csdn.net/qq_42524930/article/details/83049391

版权

H5-API 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用浏览器存储历史数据，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>

qq_42524930

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用浏览器存储历史数据，localStorage存取操作

利用浏览器存储历史数据，localStorage存取操作&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;首页&lt;/title&gt; &lt;style&gt; * { m
复制链接

扫一扫