用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)。

這樣一個簡單的信息錄入系統就完成了，更多詳細的功能咱們之後再介紹吧。