摘要：数据管理平台在当今社会中运用十分广泛，我们在应用过程中，要对数据进行存储，管理，以及删除查询等操作，而我们在实际设计的时候，大牛们大多用到的是JQuery，而小白对jq理解也较困难，为了让大家回顾一下原生js，也为了让初学者对js熟练掌握，我们利用js进行设计，里面涉及到函数，事件，对象，已经存储，代码如下
别名(key): 网站名： 网址： 网站登录
网站名： 网址： 网址已经储存的网站
| 序号 | 别名 | 网站名 | 网站 |
|---|
//注册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 += "" + (index + 1) + "" + item.name + "" + item.Webname + "" + item.Web + ""; }); 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 += "" + (index + 1) + "" + item.name + "" + item.Webname + "" + item.Web + ""; }); 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进行设置。弄清楚这段代码，初学者会有很大进步。