用JS制作一個信息管理平臺
首先，介紹一些需要用到的基本知識。
【JSON】
JSON是數據交互中，最常用的一種數據格式。
由於各種語言的語法都不相同，在傳遞數據時，可以將自己語言中的數組、對象等轉換為JSON字符串。 傳遞之後，可以將JSON字符串，再解析為JSON對象。
JSON對象的使用與JS中的對象基本相同，唯一需要區別的是，JSON中的鍵，必須是字符串。
比如：
var jsonObj = {
"name":"zhangsan",
"age":"12"
}
還有兩個特別常用的函數。
* 將JS中的對象、數組，傳化為JSON字符串。
*/
var str1 = JSON.stringify
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的數據存儲]
eg ：localStorage.username = "張三";
2、常用的函數
保存數據：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="註 冊" 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)。
這樣一個簡單的信息錄入系統就完成了，更多詳細的功能我們以後再介紹吧。
用JS制作一個信息管理平臺