Html5离线存储和数据同步

一、整体流程设计

流程细节如下：

（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") {