运用html5+css3+jq+js实现添加的数据放入本地存储和界面
Posted ironman725
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了运用html5+css3+jq+js实现添加的数据放入本地存储和界面相关的知识，希望对你有一定的参考价值。
<!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 id="text" type="search" placeholder="输入搜索关键字"/> <input id="btn"type="button" value="搜索"/> <div><a class="link" href="javascript:;">清空搜索记录</a></div> <ul></ul> <script src="js/jquery.min.js"></script> <script> //先获取存入数据的值 var historyList = localStorage.getItem("list") || "[]"; //转化成json数组格式 var listArr = JSON.parse(historyList); function render() var html = ""; //遍历获取里面值创建添加 $(listArr).each(function (index,item) html += "<li><span>"+item+"</span><a href=\\"javascript:;\\" data-index=‘"+index+"‘>删除</a></li>" //把值表示出来 ) html = html || "<li>没有搜索记录</li>"//判断之前有没有存入这个值 $("ul").html(html)//放入ul中 render(); $("#btn").click(function () var val = $(‘#text‘).val(); if(!val) return; console.log(listArr.length); if(listArr.length > 9) listArr.pop(); if(listArr.indexOf(val,0) != -1)return; listArr.unshift(val); localStorage.setItem("list",JSON.stringify(listArr)); $("#text").val(""); render(); ) //点击操作 记得使用on事件 因为要让新添加的a也有点击事件 $("ul").on("click","a",function () var index = $(this).data(‘index‘); listArr.splice(index,1); localStorage.setItem("list",JSON.stringify(listArr)); render(); ) //全部删除 $(".link").click(function () listArr = []; localStorage.removeItem("list"); render(); ) </script> </body> </html>
<!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 id="text" type="search" placeholder="输入搜索关键字"/>
<input id="btn"type="button" value="搜索"/>
<div><a class="link" href="javascript:;">清空搜索记录</a></div>
<ul></ul>
<script src="js/jquery.min.js"></script>
<script>
//先获取存入数据的值
var historyList = localStorage.getItem("list") || "[]";
//转化成json数组格式
var listArr = JSON.parse(historyList);
function render()
var html = "";
//遍历获取里面值创建添加
$(listArr).each(function (index,item)
html += "<li><span>"+item+"</span><a href=\\"javascript:;\\" data-index=‘"+index+"‘>删除</a></li>" //把值表示出来
)
html = html || "<li>没有搜索记录</li>"//判断之前有没有存入这个值
$("ul").html(html)//放入ul中
render();
$("#btn").click(function ()
var val = $(‘#text‘).val();
if(!val) return;
console.log(listArr.length);
if(listArr.length > 9)
listArr.pop();
if(listArr.indexOf(val,0) != -1)return;
listArr.unshift(val);
localStorage.setItem("list",JSON.stringify(listArr));
$("#text").val("");
render();
)
//点击操作 记得使用on事件 因为要让新添加的a也有点击事件
$("ul").on("click","a",function ()
var index = $(this).data(‘index‘);
listArr.splice(index,1);
localStorage.setItem("list",JSON.stringify(listArr));
render();
)
//全部删除
$(".link").click(function ()
listArr = [];
localStorage.removeItem("list");
render();
)
</script>
</body>
</html>
以上是关于运用html5+css3+jq+js实现添加的数据放入本地存储和界面的主要内容，如果未能解决你的问题，请参考以下文章