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源生代码“增删改查”之增
原文地址：http://www.cnblogs.com/junwuyao/p/7501205.html