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 = "張三";

　　基本增加就是這樣啦，等下次來說刪除功能

JS源生代碼“增刪改查”之增