用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 結尾 |
對於一個簡單的信息管理平臺來說，這樣的功能就基本滿足使用了。
當然我們可以更完善一下，比如修改密碼，比如註銷功能，都是必不可少的。
而當我們完成上述內容的時候，這些其余功能就沒有什麽新意了，相信大家順手就可以完成，我就不多詳述了。
大家實現功能的同時，也可以添加一些自己喜歡的樣式，讓我們的系統更加美觀呦~
希望這篇文章能對大家有所幫助，歡迎批評指正~
用JS制作一個信息管理平臺完整版