離線和在線同步HTML5中的Web應用程序？

我有一個基本的Web應用程序下面有一個SQLite存儲措施實施到它。離線和在線同步HTML5中的Web應用程序？

我希望它能夠在任何時候更新我的mysql服務器，並在連接失敗後存儲數據以推送到數據庫。我希望它能夠使用時間戳比較作爲安全措施，以防服務器上的值有所不同，我們可以對郵票進行檢查以確定它試圖修改的信息是最新的值。（這將從多臺計算機運行，因此需要某種故障安全）。

我認爲這個事務只需要一個方法，值只需要更新服務器，值不需要傳回給應用程序，所以我們可以在技術上在真正完成時銷燬數據庫，或者如果它在某處出現故障，可能會執行回滾。這是一個可行的事情，還是我真的在這裏要求很多？

這是我想用作模型的一個非常基本的應用程序。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Golf score keeper</title> 
    <script src="http://www.google.com/jsapi"></script> 
    <script> 
     google.load("jquery", "1.4.1"); 
    </script> 
    <script> 
     var db = window.openDatabase("scores", "", "Previous Scores", 1024*1000); 

     function insertScore(hole_num, num_strokes, course_id, email) { 
     db.transaction(function(tx) { 
     tx.executeSql('INSERT INTO Strokes (course_id, hole_num, num_strokes, email) VALUES (?, ?, ?, ?)', [course_id, hole_num, num_strokes, email]); 
     }); 
     } 

     function renderResults(tx, rs) { 
    e = $('#previous_scores'); 
    e.html(""); 
    for(var i=0; i < rs.rows.length; i++) { 
     r = rs.rows.item(i); 
     e.html(e.html() + 'id: ' + r['id'] + ', hole_num: ' + r['hole_num'] + ', num_strokes: ' + r['num_strokes'] + ', email: ' + r['email'] + '<br />'); 
    } 
     } 

     function renderScores(email) { 
    db.transaction(function(tx) { 
     if (!(email === undefined)) { 
     tx.executeSql('SELECT * FROM Strokes WHERE email = ?', [email], renderResults); 
     } else { 
     tx.executeSql('SELECT * FROM Strokes', [], renderResults); 
     } 
    }); 
     } 

     $(document).ready(function() { 
    db.transaction(function(tx) { 
     tx.executeSql('CREATE TABLE IF NOT EXISTS Courses(id INTEGER PRIMARY KEY, name TEXT, latitude FLOAT, longitude FLOAT)', []); 
     tx.executeSql('CREATE TABLE IF NOT EXISTS Strokes(id INTEGER PRIMARY KEY, course_id INTEGER, hole_num INTEGER, num_strokes INTEGER, email TEXT)', []); 
    }); 

    $('#score_form').submit(function() { 
    strokes = { 1: $('#hole1').val(), 2: $('#hole2').val() }; 
     for (var hole_num in strokes) { 
     insertScore(hole_num, strokes[hole_num], 1, $('#email').val()); 
     } 

     renderScores(); 
     return false; 
    }); 

    $('#filter_previous_scores_form').submit(function() { 
     e = $('#filter_by_email').val(); 
     renderScores(e); 
     return false; 
    }); 

    renderScores(); 
     }); 
    </script> 
    </head> 
    <body> 
    <form method="get" id="score_form"> 
     <div> 
    <label for="1">Hole 1</label> 
    <input type="number" min="1" value="4" id="hole1" name="hole1" size="2" step="1" /> 
     </div> 
     <div> 
    <label for="2">Hole 2</label> 
    <input type="number" min="1" value="4" id="hole1" name="hole2" size="2" step="1" /> 
     </div> 
     <div> 
    <input type="email" id="email" placeholder="Enter your email address" size="40"/> 
     </div> 
     <div> 
    <input type="submit" value="Upload Score" /> 
     </div> 
    </form> 
    <div> 
     <h2>Previous Scores</h2> 
     <form id="filter_previous_scores_form"> 
    <input type="email" placeholder="Filter scores by email" size="40" id="filter_by_email" /><br /> 
    <input type="submit" value="Filter" /> 
     </form> 
    </div> 
    <div id="previous_scores"> 

    </div> 
    </body> 
</html>

來源

2012-02-08 ehime

您shoulg參加一個setInterval循環看看Ajax。

來源

2012-02-08 08:15:32

當您發現navigator.online = true時，您可以應用設置間隔的邏輯，然後您可以調用ajax。

來源

2014-07-24 13:38:36

離線和在線同步HTML5中的Web應用程序？

回答

相關問題