一、整體流程設計

流程細節如下：

（1）WebSQL用於儲存本地資料。

（2）LocalStroage用於暫存需要同步資料。

（3）XML用於儲存所有操作過程和數操作據。

（4）將localStroage的資料同步伺服器（資料衝突手動操作）。

（5）通過XML將伺服器資料同步本地。

（6）本地沒有資料直接同步伺服器。

（7）伺服器沒有資料直接同步本地。

二、資料結構設計

WebSQL：資料庫表。格式：items(id,name,num,user)

localStroage：Json陣列物件。格式：

    [  {id:(new Date()).getTime(),table:'items',op:"insert",name:' ',num:' ',user:' '},

    {id:(new Date()).getTime(),table:'items',op:"update",name:' ',num:' ',user:' '},

    {id:(new Date()).getTime(),table:'items',op:"delete",name:' ',num:' ',user:' '}}    ……]

     其中，josns[0]代表同步資料的起點，josns[josns.length-1]代表資料同步的終點

XML：

    <store dtatbase="Item">
    <op id="0"/>
    <op id="1366526718040" table="items" action="insert">
        <data name="name">測試2   </data>
        <data name="user">    </data>
        <data name="num"> 測試2</data>
        <data name="spell">T</data>
   </op>
  <op id="1366526728408" table="items" action="update">
     <data name="name">測試3</data>
   </op>
</store>

三、同步順序圖

分析說明：

（1）LastSynTime：標識使用者使用情況

  -1：表示使用者在該瀏覽器中第一次使用。然後獲取伺服器是否有該使用者資訊，如果有則直接將伺服器的資料更新到本地資料庫。

不等於-1：表示使用者已經操作過該瀏覽器。然後對syndata進行判斷。

（2）syndata：表示需要同步的資料

-1：表示使用者當前在該瀏覽器中沒有同步資料。然後獲取伺服器是否有該使用者資訊，如果有則直接將伺服器的資料更新到本地資料庫。

不等於-1：表示使用者在該瀏覽器中有同步資料。然後在進一步判斷。

（3）id_start:：為syndata[0].id，表示需要同步資料中第一個資料的操作時間戳。

id_end：為syndata[syndata.length-1],表示需要同步資料中最後一個數據的操作時間戳。

ID_END：為XML中最後一個操作資料的時間戳。

（1）若ID_End<id_start,，則將本地同步資料更新伺服器資料庫。

（2）若ID_End>id_end，則提取上一次同步運算元的最後一個操作時間戳id_end，從伺服器獲取id_end到ID_End的資料操作並更新到瀏覽器的webBD資料庫。

（3）若id_start<ID_END<id_end,則id_start到ID_END為衝突資料需要使用者手工矯正，並將ID_END到id_end更新伺服器。

四、系統結構

五、使用者介面

六、程式碼設計

1、服務端

1）、XML解析（dom4j）

（1）、獲取XM儲存的最後一個操作資料的時間戳(ID_END)

Element opElement = (Element) document.selectSingleNode("/store/op[last()]");
return opElement.attributeValue("id");

（2）、將JSON陣列轉化為XML：CretateOpXml(String json, String op, String table,String ID,String user)

        Element rootElement = dom.getRootElement();
Element opElement = rootElement.addElement("op");
opElement.addAttribute("id", ID);
opElement.addAttribute("table", table);
if (op != "delete") {
if (op == "insert") {
opElement.addAttribute("action", "insert");
} else if (op == "update") {
opElement.addAttribute("action", "update");
}
String[] items = json.split(",");
for (String item : items) {
Element dataElement = opElement.addElement("data");
String[] content = item.split(":");
dataElement.addAttribute("name", content[0]);
dataElement.setText(content[1]);
}
} else {
opElement.addAttribute("action", "delete");
Element dataElement = opElement.addElement("data");
String[] content = json.split(":");
dataElement.addAttribute("name", content[0]);
dataElement.setText(content[1]);
}

（3）、將XML轉換為SQL語句： String ParseSql(String id,String user)

               StringBuffer sql = new StringBuffer();
Document document = load(fileName+user+".xml");
Element opIdElement = (Element) document.selectSingleNode("/store/op[last()]");
sql.append(opIdElement.attributeValue("id")+"|");
List list = document.selectNodes("/store/op[@id>=" + id + "]");
Iterator iter = list.iterator();
int j=0;
while (iter.hasNext()) {
Element opElement = (Element) iter.next();
String table = opElement.attributeValue("table");
Iterator<Element> dataElement = opElement.elementIterator();
StringBuffer col = new StringBuffer();
StringBuffer val = new StringBuffer();
int i = 0;
while (dataElement.hasNext()) {
Element nameElemnt = (Element) dataElement.next();
if (i == 0) {
col.append(nameElemnt.attributeValue("name"));
val.append("'" + nameElemnt.getText() + "'");
} else {
col.append("," + nameElemnt.attributeValue("name"));
val.append(",'" + nameElemnt.getText() + "'");
}


i++;
}
if (j == 0) {
if (opElement.attributeValue("action").equals("insert")) {
sql.append("incao zuosert into " + table + " (" + col.toString()+ ") values (" + val.toString() + ")");
} else if (opElement.attributeValue("action").equals("update")) {
String[] colSplit= col.toString().split(",");
String[] valSplit= val.toString().split(",");
String idUpdate=null;
StringBuffer update=new StringBuffer();
for(int ii=0;ii<colSplit.length;ii++){
if(ii==1){
update.append(colSplit[ii]+"="+valSplit[ii]);
}else if(ii>1){
update.append(","+colSplit[ii]+"="+valSplit[ii]);
}else{
idUpdate=colSplit[ii]+"="+valSplit[ii];
}
}
sql.append("update "+table+" set " + update.toString()+" where "+idUpdate);
} else {// delete
sql.append("delete from " + table + " where "+ col.toString() + "=" + val.toString());
}
}else{
if (opElement.attributeValue("action").equals("insert")) {
sql.append(";insert into " + table + " (" + col.toString() + ") values (" + val.toString() + ")");
} else if (opElement.attributeValue("action").equals("update")) {
String[] colSplit= col.toString().split(",");
String[] valSplit= val.toString().split(",");
String idUpdate=null;
StringBuffer update=new StringBuffer();
for(int ii=0;ii<colSplit.length;ii++){
if(ii==1){
update.append(colSplit[ii]+"="+valSplit[ii]);
}else if(ii>1){
update.append(","+colSplit[ii]+"="+valSplit[ii]);
}else{
idUpdate=colSplit[ii]+"="+valSplit[ii];
}
}
sql.append(";update "+table+" set " + update.toString()+" where "+idUpdate);
} else {// delete
sql.append(";delete from " + table + " where "+ col.toString() + "=" + val.toString());
}
}
j++;
}
return sql.toString();

2）、服務端資料解析（將ajax傳遞的JSON陣列物件轉換為JSON物件，同時更新資料庫）

String synClientData(String userName){

Long ID=(long) 0;//Long.parseLong(OpStoreService.GetLastTime());
JSONArray array = JSONArray.fromObject(getJsonData());
StringBuffer sql=new StringBuffer();
try {
int j=0;
for (int i = 0; i < array.size(); i++) {
Map o = (Map) array.get(i);
String table=o.get("table").toString();
String clientID=o.get("ID").toString();
if(Long.parseLong(clientID)>ID){
if(o.get("op").equals("insert")){
if(j==0){
sql.append("insert into "+table+" (");
}else{
sql.append(";insert into "+table+" (");
}
Iterator iter = o.entrySet().iterator();
StringBuffer col=new StringBuffer();
StringBuffer val=new StringBuffer();
StringBuffer xml=new StringBuffer();
int k=0;
while (iter.hasNext()) {
Map.Entry<String, String> param = null;
param = (Entry<String, String>) iter.next();
if(param.getKey().equals("ID")||param.getKey().equals("op")||param.getKey().equals("table")){
continue;
}else{
if(k==0){
col.append(param.getKey());
val.append("'"+param.getValue()+"'");
xml.append(param.getKey()+":"+param.getValue());
}else{
col.append(","+param.getKey());
val.append(",'"+param.getValue()+"'");
xml.append(","+param.getKey()+":"+param.getValue());
}
}
k++;
}
j++;
OpStoreService os=new OpStoreService();
os.CretateOpXml(xml.toString(), "insert", table,clientID,userName);
sql.append(col.toString()+") values (" +val.toString()+")");
}else if(o.get("op").equals("update")){
if(j==0){
sql.append("update "+table+" set ");
}else{
sql.append(";update "+table+" set ");
}
Iterator iter = o.entrySet().iterator();
String id=null;
StringBuffer xml=new StringBuffer();
int k=0;
while (iter.hasNext()) {
Map.Entry<String, String> param = null;
param = (Entry<String, String>) iter.next();
if(param.getKey().equals("ID")||param.getKey().equals("op")||param.getKey().equals("table")){
continue;
}else{
if(param.getKey().equals("id"))
{
id=param.getValue().toString();
xml.append("id:"+id);
}else{
xml.append(","+param.getKey()+":"+param.getValue());
if(k==0){
sql.append(param.getKey()+"='"+param.getValue()+"'");
}else{
sql.append(","+param.getKey()+"='"+param.getValue()+"'");
}
k++;
}
}
}
j++;
OpStoreService os=new OpStoreService();
os.CretateOpXml(xml.toString(), "update", table,clientID,userName);
sql.append(" where id='"+id+"'");
}else{
if(j==0){
sql.append("delete from "+table+" where id='"+o.get("id").toString()+"'");
}else{
sql.append(";delete from "+table+" where id='"+o.get("id").toString()+"'");
}
OpStoreService os=new OpStoreService();
os.CretateOpXml("id:"+o.get("id").toString(), "delete", table,clientID,userName);
j++;
}
}
}
}finally{
}
return sql.toString();

}

2、瀏覽器

1）js資料儲存結構localStorage.getItem(item,value)

username:記錄登陸使用者名稱                                       username+"LastSynTime"：該使用者本地操作資料的最後一次時間戳       

username+"Syn"：記錄該使用者需要同步的              username+"LastSyn"：該使用者同步操作資料的最後一次時間戳        

2）使用者點選同步

$("#commitSynData").bind("vclick",function(e){
if(localStorage.getItem("LastSynTime")==null){//無，若伺服器有資料，則獲取全部資料
LoadServAllData();
} else{//有，根據更新時間先後對比伺服器和客戶端，若有資料變化，將此資料傳送伺服器
//判斷本地資料是否變化
SendLastSynTime();
}
});

function SendLastSynTime(){
$.ajax({  
        url:'/DiscreteCourse/DoAction_SendLastSynTime.do',  
        type:'POST',  
        data:{json:LastSynTime()},  
        dataType:'json',  
        success:function (data) {
        if(data.json.trim().length<3){
        }else if(data.json.trim().length==3){
        LoadServAllData();
        }else if(data.json.trim().length==4){
        sendLoalAllData();
        }else if(data.json.trim().length==13){
        sendLocalPartData(data.json.trim());
        }else{
        var sqls=data.json.split('|');
        doSql(sqls[1]);
        upLastTime(sqls[0]);
        }
        }  
    }); 
}

2）webSQL全部更新

function doSql(sql){
var sqlItems=sql.split(";");
try {
localDB.transaction(function(transaction){
            for(var i in sqlItems){
            transaction.executeSql(sqlItems[i]);
            }
            });
        } catch (e) {
            updateStatus("很抱歉，資料庫出錯！");
        }
}

七、存在的不足和優化