用JS制作一个信息管理平台完整版
前 言
JRedu
在之前的文章中，介绍了如何用JS制作一个实用的信息管理平台。
但是那样的平台功能过于简陋了，我们今天来继续完善一下。
首先我们回顾一下之前的内容。
| 1、JSON的基础知识 |
1.1 什么是JSON
JSON是数据交互中，最常用的一种数据格式。
由于各种语言的语法都不相同，在传递数据时，可以将自己语言中的数组、对象等转换为JSON字符串。 传递之后，可以将JSON字符串，再解析为JSON对象。
JSON对象的使用与JS中的对象基本相同，唯一需要区别的是，JSON中的键，必须是字符串。
比如：
var jsonObj = {
"name":"zhangsan",
"age":"12"
}
1.2JSON的使用方法
两个特别常用的函数。
将JS中的对象、数组，传化为JSON字符串。
var str1 = JSON.stringify(users); console.log(str1);
将JSON字符串转化为JSON对象。
var obj = JSON.parse(str1); console.log(obj);
总结一下新增或是删除一条数据的基本方法。
【新增一条数据】
1、 取到录入的各种信息
2、 把这些信息封装成一个对象。
3、 从本地文件中，读取出存储数据的数组字符串。并将字符串，转回数组格式。
如果本地文件中，没有这个数组，就新建一个数组存放。
4、 数组中，push进一个新组建的对象。
5、 将新数组，重新转为字符串。把字符串丢回文件。
6、 重新读取一边文件，重新加载表格。
【删除一条数据】
1、 从文件中，读取出字符串，转回数组格式。
2、 判断需要删除的是第几条数据。
3、 删除掉数组对应的数据、splice
4、 把新数组重新转为字符串，放回文件。
5、 重新读取一边文件，重新加载表格。
HTML5 新增Web存储方式，主要有两种：
localStorage 和 sessionStorage，两个对象在使用方式上没有任何区别，唯一的不同点是存储数据的有效时间
① localStorage ： 除非手动删除，否则数据将一直保存在本地文件；
② sessionStorage ： 当浏览器关闭时，sessionStorage就被清空。
[Storage的数据存储]
1、Storage可以像普通对象一样，使用.追加或者读取最新的数据。
eg ：localStorage.username = "张三";
2、常用的函数
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
下面通过一个具体的案例详细的介绍一下这些函数的用法。
| 2、 信息管理平台实例 |
2.1注册功能
下面通过一个具体的案例详细的介绍一下这些函数的用法。
这是一个信息管理平台，首先我们需要注册一个账号。
附上一小部分表单结构的代码：
<div class="right"> <h2> 用户注册 <span>user login</span> </h2> <div class="user"> <input placeholder="3-15位字母数字，开头必须是字母" name="userNo" id="userNo" tabindex="1" class="account" autocomplete="off"> <span id="p1">用户名已注册</span> </div> <div class="pwd"> <input placeholder="4-10位字母数字组成" type="password" id="pwd" name="pwd" tabindex="2" class="passw" autocomplete="off"> <span id="p2">两次密码输入不一致</span> </div> <div class="pwd"> <input placeholder="请再次输入密码" type="password" id="repwd" name="pwd" tabindex="2" class="passw" autocomplete="off"> </div> <input onclick="addAize()" class="denglu" type="submit" value="注 册" tabindex="3"> <p class="zhuce" onclick="denglu()"> 点击返回登录页面>>> </p> </div>
当我们点击注册的时候，会触发一个点击事件，然后触发函数addAize()。
这个时候，我们需要验证密码是否正确，或是输入的格式是否符合要求。
首先，我们先取出我们所输入的内容。
var user = document.getElementById("userNo").value;
var pwd = document.getElementById("pwd").value;
var repwd = document.getElementById("repwd").value;
具体的验证要求通过正则来验证，这里就不详述了。
若是符合要求，将用户名和密码封装成一个对象。
var site = {
user : user,
pwd : pwd
}
若是第一次注册，则在本地存储中新建一个数组arr=[]；
若是已经有数组，则录入这条数据。
if(localStorage.sites == undefined){
var arr = [];
}else{
var str = localStorage.sites;
var arr = JSON.parse(str);
}
验证用户名是否重复或者是两次密码输入是否一致，这里不详述。
当全都通过验证之后，将这条信息存入本地，跳转到登录页。
arr.push(site);
var str = JSON.stringify(arr);
localStorage.sites = str;
alert("注册成功");
location = "登录.html";
登陆的功能其实跟注册很像，也是从本地中取出数据，与输入的数据进行一一比对，或是有相同的，则登陆成功，跳转到主页面。
管理平台的信息录入功能也与注册大同小异，就不每个举例了。
2.2信息的展示和删除功能
首先创建一个函数showAllSite()
每当界面刷新或是信息录入的时候，调用这个函数。
function showAllSite(){
var str = localStorage.sitess;
var arr = JSON.parse(str);
var html = "";
if(localStorage.sitess == undefined){
return;
}
arr.forEach(function(item,index){
html += "<tr class='tr' onclick='chooseInput("+index+")' ondblclick='updateSite("+index+")'><td align='center'><input type='checkbox' onclick='chooseInput("+index+")' value='"+index+"' class='checkbox' style='marg in-top:15px'/></td><td>"+(index+1)+"</td><td>"+item.name+"</td><td>"+item.city+"</td><td>"+item.home+"</td><td style='color:black'>"+item.jingli+"</td><td style='color:black'>"+item.youbian+"</td><td style='color: black'>"+item.iphone+"</td><td style='color:black'>"+item.star+"</td></tr>";
});
var tbody = document.getElementById("tbody");
tbody.innerHTML = html;
}
因为完整代码太多，可能拿出一段并不能完全明白，我大体解释一下思路。
创建一个html变量，先赋值一个空字符串即可。
首先，将本地存储的数据取出来，转化成对象格式。
然后检测这个对象是否存在，也就是本地是否有一条以上的数据。
然后遍历这些数据，把他们加给表格中，附给html变量。
最后用一开始在文件中就创建好的表格中的tbody。通过.innerHTML = html。将数据打印出来。
这样就可以将添加进去的表单通过表格展示出来。
再介绍删除功能，同样是创建一个函数delSite()附到删除按钮的onclick事件上。
需要注意的是，删除功能一定要有一个确认按钮，也就是confirm()。
当结果返回true的时候，执行这个函数
var checkboxs = document.getElementsByClassName("checkbox");
var count = 0;
var str = localStorage.sitess;
var arr = JSON.parse(str);
for(var i=0; i<checkboxs.length; i++){
if(checkboxs[i].checked){
var index = parseInt(checkboxs[i].value)-count;
count++;
arr.splice(index,1);
}
}
localStorage.sitess = JSON.stringify(arr);
if(count==0){
alert("请至少选择一个删除对象");
}else{
alert("删除成功！共删除"+count+"条数据！");
showAllSite();
}
这段代码的核心思想是，给每一个checkbox加上一个value，通过他们的value值，来匹配这一行列表对应的index值。
检测chenkbox是否被选中，将选中的每一个所对应的那一行删除掉。
因为要彻底删除掉，所以一定不能用delete，要用splice(index,1)。
2.3信息的修改功能
我们可以选择制作一个修改按键，绑定每一行。
也可以选择双击每行的信息，直接显示出隐藏的修改框。
本例我们选择后者。
首先，为创建出来的每一行数据绑定一个dblclick事件，创建updateSite()函数。并传入参数index，绑定当前的行数。
为了方便用户直接修改而不是重新输入，我们需要采集当前信息
var updateIndex = 0; function updateSite(index){ var str = localStorage.sitess; var arr = JSON.parse(str); document.getElementById("zhuce1").style.display = "block"; document.getElementById("name1").value = arr[index].name; document.getElementById("city1").value = arr[index].city; document.getElementById("home1").value = arr[index].home; document.getElementById("jingli1").value = arr[index].jingli; document.getElementById("youbian1").value = arr[index].youbian; document.getElementById("iphone1").value = arr[index].iphone; document.getElementById("star1").value = arr[index].star; updateIndex = index; }
这样，我们就把当前采集到的信息全部赋值给了修改栏。
声明一个变量updateIndex的意图在于将当前的index保存起来，以便在下一个函数的作用域也可以使用。
接着，我们给修改栏的提交按钮再绑定一个函数updateSite1().
function updateSite1(){ var name = document.getElementById("name1").value; var city = document.getElementById("city1").value; var home = document.getElementById("home1").value; var jingli = document.getElementById("jingli1").value; var youbian = document.getElementById("youbian1").value; var iphone = document.getElementById("iphone1").value; var star = document.getElementById("star1").value; var str = localStorage.sitess; var arr = JSON.parse(str); for(var i=0; i<arr.length; i++){ if(arr[i].name == name && updateIndex!=i){ alert("网站名已注册！请更换网站名！");return; } } var site = { name : name, city : city, home : home, jingli : jingli, youbian : youbian, iphone : iphone, star : star } arr.splice(updateIndex,1,site); localStorage.sitess = JSON.stringify(arr); showAllSite(); document.getElementById("zhuce1").style.display = "none"; }
将修改后的每一行数据取出来，对本地存储的数据进行修改。
最后将修改栏隐藏，重新展示数据。
2.4信息的查询功能
信息查询的主要思路是，通过一定的规范，将查询栏输入的内容与本地存储的内容进行对应。
可以通过indexOf进行部分匹配，也可以通过等于进行等于匹配，这个可以根据需求进行定义。
本例两种类型都进行一下展示。
首先在查询按钮上绑定一个函数searchSite()
function searchSite(){ var name = document.getElementById("search1").value; var jingli = document.getElementById("search2").value; var star = document.getElementById("search3").value; var str = localStorage.sitess; 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].jingli.indexOf(jingli)==-1 && jingli!="") isWzm=false; if(arr[i].star != star && star!="") isWz=false; if(isWzm&&isBm&&isWz){ arr[i].index = i; newArr.push(arr[i]); } } var html = ""; newArr.forEach(function(item,index){ html += "<tr class='tr' onclick='chooseInput("+index+")' ondblclick='updateSite("+item.index+")'><td align='center'><input type='checkbox' onclick='chooseInput("+index+")' value='"+item.index+"' class='checkbox' /></td><td>"+(index+1)+"</td><td>"+item.name+"</td><td>"+item.city+"</td><td>"+item.home+"</td><td style='color:black'>"+item.jingli+"</td><td style='color:black'>"+item.youbian+"</td><td style='color:black'>"+item.iphone+"</td><td style='color:black'>"+item.star+"</td></tr>"; }); var tbody = document.getElementById("tbody"); tbody.innerHTML = html; }
将与查询内容相符的本地存储信息提取出来，加入到一个新的数组中，然后将新数组的内容遍历打印到html，覆盖掉原来展示的信息，这样搜索的功能就实现了
| 3.1 结尾 |
对于一个简单的信息管理平台来说，这样的功能就基本满足使用了。
当然我们可以更完善一下，比如修改密码，比如注销功能，都是必不可少的。
而当我们完成上述内容的时候，这些其余功能就没有什么新意了，相信大家顺手就可以完成，我就不多详述了。
大家实现功能的同时，也可以添加一些自己喜欢的样式，让我们的系统更加美观呦~
希望这篇文章能对大家有所帮助，欢迎批评指正~
