用JS制做一个信息管理平台(1)

首先，介绍一些须要用到的基本知识。

【JSON】

JSON是数据交互中，最经常使用的一种数据格式。

因为各类语言的语法都不相同，在传递数据时，能够将本身语言中的数组、对象等转换为JSON字符串。 传递以后，能够将JSON字符串，再解析为JSON对象。

JSON对象的使用与JS中的对象基本相同，惟一须要区别的是，JSON中的键，必须是字符串。

好比：

var jsonObj = {
"name":"zhangsan",
"age":"12"
}

 

还有两个特别经常使用的函数。

将JS中的对象、数组，传化为JSON字符串。

var str1 = JSON.stringify(users);
console.log(str1);

 

 将JSON字符串转化为JSON对象。

var obj = JSON.parse(str1);
console.log(obj);

 

总结一下新增或是删除一条数据的基本方法。

【新增一条数据】
 一、 取到录入的各类信息
 二、 把这些信息封装成一个对象。
 三、 从本地文件中，读取出存储数据的数组字符串。并将字符串，转回数组格式。
 若是本地文件中，没有这个数组，就新建一个数组存放。
 四、 数组中，push进一个新组建的对象。
 五、 将新数组，从新转为字符串。把字符串丢回文件。
 六、 从新读取一边文件，从新加载表格。


 【删除一条数据】
 一、 从文件中，读取出字符串，转回数组格式。
 二、 判断须要删除的是第几条数据。
 三、 删除掉数组对应的数据、splice
 四、 把新数组从新转为字符串，放回文件。
 五、 从新读取一边文件，从新加载表格。

 

 HTML5 新增Web存储方式，主要有两种：
 localStorage 和 sessionStorage，两个对象在使用方式上没有任何区别，惟一的不一样点是存储数据的有效时间
 ① localStorage ： 除非手动删除，不然数据将一直保存在本地文件；
 ② sessionStorage ： 当浏览器关闭时，sessionStorage就被清空。

 [Storage的数据存储]
 一、Storage能够像普通对象同样，使用.追加或者读取最新的数据。
 eg ：localStorage.username = "张三";

 二、经常使用的函数

 保存数据：localStorage.setItem(key,value);
 读取数据：localStorage.getItem(key);
 删除单个数据：localStorage.removeItem(key);
 删除全部数据：localStorage.clear();
 获得某个索引的key：localStorage.key(index);

 

下面经过一个具体的案例详细的介绍一下这些函数的用法。

这是一个信息管理平台，首先咱们须要注册一个帐号。

附上一小部分表单结构的代码：

<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="注&nbsp;册" 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";

 

登录的功能其实跟注册很像，也是从本地中取出数据，与输入的数据进行一一比对，或是有相同的，则登录成功，跳转到主页面。

管理平台的信息录入功能也与注册大同小异，就不每一个举例了。

这里主要说一下信息的展现和删除功能。

首先建立一个函数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='margin-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)。

这样一个简单的信息录入系统就完成了，更多详细的功能咱们之后再介绍吧。