摘要：数据管理平台在当今社会中运用十分广泛，我们在应用过程中，要对数据进行存储，管理，以及删除查询等操作，而我们在实际设计的时候，大牛们大多用到的是JQuery，而小白对jq理解也较困难，为了让大家回顾一下原生js，也为了让初学者对js熟练掌握，我们利用js进行设计，里面涉及到函数，事件，对象，已经存储，代码如下
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????.tr:hover { ???????????????background-color: #ccc; ???????????} ???????</style> ???</head> ???<body> ???????别名(key):<input type="" name="" id="name" value="" /><br /> 网站名： ???????<input type="" id="Webname" /><br /> 网址： ???????<input type="" id="Web" /><br /> ???????<input type="button" name="" id="" value="点击提交信息" onclick="func1()" /> ???????<br /> ???????<h4>网站登录</h4> 网站名： ???????<input type="" id="loginName" /><br /> 网址： 网址 <input type="" id="loginPwd" /><br /> ???????<button onclick="login()">登录</button> ???????<h1>已经储存的网站</h1> ???????<input type="button" value="删除网站" onclick="delSite()" /><br /> ???????<input type="text" placeholder="别名" id="search1" /> ???????<input type="text" placeholder="网站名" id="search2" /> ???????<input type="text" placeholder="网址" id="search3" /> ???????<input type="button" name="" id="" value="查询网站" onclick="searchSite()" /> ???????<table style="width: 500px;border-collapse: collapse;" border="1" id="table"> ???????????<thead> ???????????????<tr> ???????????????????<th> ???????????????????????<input type="checkbox" id="checkAll" onclick="checkAll()" /> ???????????????????</th> ???????????????????<th>序号</th> ???????????????????<th>别名</th> ???????????????????<th>网站名</th> ???????????????????<th>网站</th> ???????????????</tr> ???????????</thead> ???????????<tbody id="tbody"></tbody> ???????</table> ???????<!--<div style="width: 100vw;height: 100vh;background-color: blue;position: absolute; top: 0px;left: 0px;"> ???????????<div id="" ??style="width: 300px;height: 200px;background-color: red;"> ???????????????????</div> ???????</div> ???????????--> ???????别名(key):<input type="" name="" id="name1" value="" /><br /> 网站名： ???????<input type="" id="Webname1" /><br /> 网址： ???????<input type="" id="Web1" /><br /> ???????<input type="button" name="" id="" value="修改确定" onclick="dateSites1()" /> ???????<script type="text/javascript" src="js/菜鸟教程.js"> ???????</script> ???</body></html>//注册function func1() { ???var name = document.getElementById("name").value; ???var Webname = document.getElementById("Webname").value; ???var Web = document.getElementById("Web").value; ???var site = { ???????name: name, ???????Webname: Webname, ???????Web: Web ???} ???if(localStorage.sites == undefined) { ???????var arr = []; ???} else { ???????var str = localStorage.sites; ???????var arr = JSON.parse(str); ???} ???for(var i = 0; i < arr.length; i++) { ???????if(arr[i].name == name) { ???????????alert("姓名已经注册"); ???????????return; ???????} ???} ???arr.push(site); ???var str = JSON.stringify(arr); ???localStorage.sites = str; ???alert("储存完毕"); ???showAllSite();}//展示function showAllSite() { ???if(localStorage.sites == undefined) { ???????return; ???} ???var str = localStorage.sites; ???var arr = JSON.parse(str); ???var html = ""; ???arr.forEach(function(item, index) { ???????html += "<tr class=‘tr‘ onclick=‘chooseInput(" + index + ")‘ ??ondblclick=‘dateSites(" + index + ")‘><td><input type=‘checkbox‘ value=‘" + index + "‘ class=‘checkbox‘/></td><td>" + (index + 1) + "</td><td>" + item.name + "</td><td>" + item.Webname + "</td><td>" + item.Web + "</td></tr>"; ???}); ???var tbody = document.getElementById("tbody"); ???tbody.innerHTML = html;}//进来刷新window.onload = function() { ???showAllSite();}//登录function login() { ???var loginName = document.getElementById("loginName").value; ???var loginPwd = document.getElementById("loginPwd").value; ???var str = localStorage.sites ? localStorage.sites : "[]"; ???var arr = JSON.parse(str); ???for(var i = 0; i < arr.length; i++) { ???????if(arr[i].Webname == loginName && arr[i].Web == loginPwd) { ???????????alert("登录成功！"); ???????????var loginUser = JSON.stringify(arr[i]); ???????????sessionStorage.loginUser = loginUser; ???????????location = "跳转.html"; ???????????return; ???????} ???} ???alert("登录失败！！！");}/*window.onload = function(){ var div1 = document.getElementById("div11"); div1.onmousedown = function(ev){ var oevent = ev || event; var distanceX = oevent.clientX - div1.offsetLeft; var distanceY = oevent.clientY - div1.offsetTop; document.onmousemove = function(ev){ var oevent = ev || event; div1.style.left = oevent.clientX - distanceX + ‘px‘; div1.style.top = oevent.clientY - distanceY + ‘px‘; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; ???}};*//*单击tr选中tr里面的input*/function chooseInput(index) { ???var checkboxs = document.getElementsByClassName("checkbox")[index]; ???if(checkboxs.checked) { ???????checkboxs.checked = false; ???} else { ???????checkboxs.checked = true; ???}}//点击全选的inputfunction checkAll() { ???var thisInput = document.getElementById("checkAll"); ???var checkboxs = document.getElementsByClassName("checkbox"); ???for(var i = 0; i < checkboxs.length; i++) { ???????if(thisInput.checked) { ???????????checkboxs[i].checked = true; ???????} else { ???????????checkboxs[i].checked = false; ???????} ???}}/*删除*/function delSite() { ???var checkboxs = document.getElementsByClassName("checkbox"); ???var count = 0; ???var str = localStorage.sites; ???var arr = JSON.parse(str); ???for(var i = 0; i < checkboxs.length; i++) { ???????if(checkboxs[i].checked) { ???????????var index = parseInt(checkboxs[i].value) - count; ???????????arr.splice(index, 1); ???????????count++; ???????} ???} ???localStorage.sites = JSON.stringify(arr); ???if(count == 0) { ???????alert("请至少选择一项"); ???} else { ???????alert("删除成功，删除了" + count + "项"); ???????showAllSite(); ???}}/* * 查询网站 */function searchSite() { ???var name = document.getElementById("search1").value; ???var Webname = document.getElementById("search2").value; ???var Web = document.getElementById("search3").value; ???var str = localStorage.sites; ???var arr = JSON.parse(str); ???var newArr = []; //用于装载，符合条件的数据 ???for(var i = 0; i < arr.length; i++) { ???????var isWzm = true, ???????????isBm = true, ???????????isWz = true; ???????if(arr[i].name.indexOf(name) == -1 && name != "") { ???????????isWzm = false; ???????} ???????if(arr[i].Webname.indexOf(Webname) == -1 && Webname != "") { ???????????isBm = false; ???????} ???????if(arr[i].Web != Web && Web != "") { ???????????isWz = false; ???????} ???????if(isWzm && isBm && isWz) { ???????????arr[i].index = i; // 把查询出的数据，在localStorage里面的下标，暂存到新数组的每个对象的index属性上 ???????????newArr.push(arr[i]); ???????} ???} ???var html = ""; ???console.log(newArr); ???newArr.forEach(function(item, index) { ???????html += "<tr class=‘tr‘ onclick=‘chooseInput(" + index + ")‘><td align=‘center‘><input type=‘checkbox‘ value=‘" + item.index + "‘ class=‘checkbox‘ /></td><td>" + (index + 1) + "</td><td>" + item.name + "</td><td>" + item.Webname + "</td><td>" + item.Web + "</td></tr>"; ???}); ???var tbody = document.getElementById("tbody"); ???tbody.innerHTML = html;}//修改网站var updateIndex = 0;function dateSites(index) { ???alert(index); ???var str = localStorage.sites; ???var arr = JSON.parse(str); ???document.getElementById("name1").value = arr[index].name; ???document.getElementById("Webname1").value = arr[index].Webname; ???document.getElementById("Web1").value = arr[index].Web; ???updateIndex = index;}function dateSites1() { ???var str = localStorage.sites; ???var arr = JSON.parse(str); ???var name = document.getElementById("name1").value; ???var Webname = document.getElementById("Webname1").value; ???var Web = document.getElementById("Web1").value; ???for(var i = 0; i < arr.length; i++) { ???????if(arr[i].name == name) { ???????????alert("网站名已经注册，请更换网站名"); ???????????return; ???????} ???} ???var site = { ???????name: name, ???????Webname: Webname, ???????Web: Web, ???}; ???arr.splice(updateIndex, 1, site); ???localStorage.sites = JSON.stringify(arr); ???showAllSite();}代码较长，对于各部分，已经用注释给分开，而css对于功能影响不大，因此我们没有对css进行设置。弄清楚这段代码，初学者会有很大进步。
利用原生js做数据管理平台
原文地址：http://www.cnblogs.com/zhangxinlei/p/7501168.html