51呢最近在做一個管理數據的，第一次接觸到用JS的源代碼去實現一些功能，才知道網頁里的許多功能都是依賴於“增刪改查”完成的，下面的幾張圖片就是對於增的演示：
下面是有關HTML的代碼：這個主要是彈窗部分的HTML代碼
<div id="addDialog"> <div id="div11"> <form action="" id="from"> <table class="bg"> <tr> <td><span>客戶編號</span></td> <td><input type="text" id="clientCount"/></td> </tr> <tr> <td><span>客戶名稱</span></td> <td><input type="text" id="client"/></td> </tr> <tr> <td><span>所在地</span></td> <td><input type="text" id="addressNow"/></td> </tr> <tr> <td><span>地址</span></td> <td><input type="text" id="address"/></td> </tr> <tr> <td><span>客戶經理</span></td> <td><input type="text" id="manager"/></td> </tr> <tr> <td><span>郵政</span></td> <td><input type="text" id="posCcode"/></td> </tr> <tr> <td><span>電話</span></td> <td><input type="text" id="tel"/></td> </tr> <tr> <td><span>客戶星級</span></td> <td> <select name="" class="select" id="star"> <option>---請選擇---</option> <option value="★">★</option> <option value="★★">★★</option> <option value="★★★">★★★</option> <option value="★★★★">★★★★</option> <option value="★★★★★">★★★★★</option> </select> </td> </tr> <tr> <td colspan="2"><input class="set" type="reset"/></td> </tr> <tr> <td colspan="2"><input type="submit" class="set" onclick="addSite()" value="提交"/></td> </tr> <tr> <td colspan="2"><input type="submit" class="set" onclick="closeSite()" value="關閉"/></td> </tr> </table> </form> </div> </div>
這里就是圖片中的加號所對應的HTML代碼
<img src="img/add.png" class="img1" onclick="add()"/>
主要通過這個函數用JS來對彈窗進行隱藏和顯示
這個是顯示，隱藏在添加的函數里面
function add(){ document.getElementById("addDialog").style.display = "block"; }
下面這段是針對添加內容的JS代碼
function addSite(){ var clientCount = document.getElementById("clientCount").value; var client = document.getElementById("client").value; var addressNow = document.getElementById("addressNow").value; var address = document.getElementById("address").value; var manager = document.getElementById("manager").value; var posCcode = document.getElementById("posCcode").value; var tel = document.getElementById("tel").value; var star = document.getElementById("star").value; var site = { clientCount:clientCount, client :client, addressNow :addressNow, address:address, manager :manager, posCcode:posCcode, tel:tel, star:star, } if(localStorage.sites == undefined){ var brr = []; }else{ var dtr = localStorage.sites; var brr = JSON.parse(dtr); } for(var i=0; i<brr.length; i++){ if(brr[i].client == client){ alert("該客戶已添加，請添加其他客戶");return; } } brr.push(site); var dtr = JSON.stringify(brr); localStorage.sites = dtr; showAllSite(); document.getElementById("from").reset(); document.getElementById("addDialog").style.display = "none"; }
通過document.getElementById().value取到所需要添加的值，存入一個數組中，然后判斷一下是都已經有存入的了，如果有則需要重新添加，若沒有則會添加成功，然后彈窗關閉后重新刷新數據。
總結為下面幾條：
1、 取到錄入的各種信息
2、 把這些信息封裝成一個對象。
3、 從本地文件中，讀取出存儲數據的數組字符串。並將字符串，轉回數組格式。
如果本地文件中，沒有這個數組，就新建一個數組存放。
4、 數組中，push進一個新組建的對象。
5、 將新數組，重新轉為字符串。把字符串丟回文件。
6、 重新讀取一邊文件，重新加載表格。
在這其中：
將JS中的對象、數組，傳化為JSON字符串。
var str1 = JSON.stringify(users); console.log(str1);
將JSON字符串轉化為JSON對象。
var obj = JSON.parse(str1); console.log(obj);
HTML5 新增Web存儲方式，主要有兩種：
localStorage 和 sessionStorage，兩個對象在使用方式上沒有任何區別，唯一的不同點是存儲數據的有效時間
① localStorage ： 除非手動刪除，否則數據將一直保存在本地文件；
② sessionStorage ： 當瀏覽器關閉時，sessionStorage就被清空。
[Storage的數據存儲]
Storage可以像普通對象一樣，使用.追加或者讀取最新的數據。
eg ：localStorage.username = "張三";
基本增加就是這樣啦，等下次來說刪除功能