2010-02-24 5 views
9

मैं http://www.w3.org/TR/offline-webapps/navigator.onLine

में पाया अधूरा उदाहरण के साथ खेल रहा हूँ लेकिन मैं इसे में टिप्पणियों को देखने के व्यथित हूँ की तरह है:

"renders the note somewhere", and 
"report error", and 
"// …" 

तो, किसी की मदद कृपया मुझे एक वैध लिखेंगे उदाहरण? यहाँ मैं अब तक क्या कर लिया है:

<!DOCTYPE HTML> 
<html manifest="cache-manifest"> 
<head> 
<script> 
var db = openDatabase("notes", "", "The Example Notes App!", 1048576); 

function renderNote(row) { 
    // renders the note somewhere 
} 
function reportError(source, message) { 
    // report error 
} 

function renderNotes() { 
    db.transaction(function(tx) { 
    tx.executeSql('CREATE TABLE IF NOT EXISTS Notes(title TEXT, body TEXT)', 
     []); 
    tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) { 
     for(var i = 0; i < rs.rows.length; i++) { 
     renderNote(rs.rows[i]); 
     } 
    }); 
    }); 
} 

function insertNote(title, text) { 
    db.transaction(function(tx) { 
    tx.executeSql('INSERT INTO Notes VALUES(?, ?)', [ title, text ], 
     function(tx, rs) { 
     // … 
     }, 
     function(tx, error) { 
     reportError('sql', error.message); 
     }); 
    }); 
} 


</script> 
<style> 
label { 
    display:block; 
} 
</style> 
</head> 
<body> 
<form> 
<label for="mytitle">Title:</label> 
<input name="mytitle"> 
<label for="mytext">Text:</label> 
<textarea name="mytext"></textarea> 
<!-- There is no submit button because I want to save the info on every keystroke --> 
</form> 
</body> 
</html> 

मैं भी जानता हूँ कि मैं वहाँ कहीं में इसे शामिल करने के लिए है कि:

if (navigator.onLine) { 
    // Send data using XMLHttpRequest 
} else { 
    // Queue data locally to send later 
} 

लेकिन मुझे यकीन है यहां तक ​​कि मुझे लगता है कि बहुत टाई क्या नहीं कर रहा हूँ।

+6

मैं प्रत्येक कीस्ट्रोक पर डीबी को बचाने के खिलाफ सलाह दूंगा। उपयोगकर्ता ने अपने टाइपिंग को रोक दिए जाने के बाद * * * सेकंड को बचाने के लिए setTimeout का उपयोग करें। अन्यथा नेटवर्क विलंबता एक दुःस्वप्न टाइपिंग करेगा। खुद, मैं प्रत्येक इनपुट के लिए एक ऑनलर हैंडलर में सहेजता हूं। टिप्पणी के लिए – Robusto

+0

धन्यवाद रोबस्टो। –

उत्तर

10

यह मेरे लिए लगता है कि आप

function save() { 
    if (navigator.onLine) { 
     // Send data using XMLHttpRequest 
    } else { 
     // Queue data locally to send later 
    } 
} 

<textarea name="mytext" onkeyup="save();"></textarea> 
की तर्ज पर कुछ के बाद कर रहे हैं

हालांकि, रोबस्टो जैसे एक टाइमआउट का उपयोग करें (जो मुझे लगता है, जीमेल भी चीजें करता है)।

यदि यह "कहीं भी रेंडर नोट" इत्यादि है, तो आप इसके बारे में चिंतित हैं, वह हिस्सा आपके लिए भरना है। आपको डेटाबेस से डेटा का चयन करके इसे भरना होगा, और फिर इसे भरना होगा आपके पृष्ठ पर एक तत्व।

function renderNote(row) { 
    $('notes').innerHtml = $('notes').innerHtml + row.body; 
} 

यह सबसे अच्छा है कि मैं से कल्पना वर्तमान में क्या कहते हैं काम कर सकते हैं - ध्यान दें, तथापि, कि कल्पना वर्तमान अधूरा है और आप w3 पर यह का अंतिम संस्करण को खोजने के लिए सक्षम नहीं होगा साइट अभी तक।

यदि आप स्थानीय स्तर पर डेटा को कतारबद्ध करने के बारे में उत्सुक हैं, तो इसके लिए एक सरणी भी करनी चाहिए। सरणी के अंत में प्रत्येक स्थानीय अनुरोध को पुश करें (और संभवतः इसे एक ही समय में स्थानीय रूप से सहेजें) और एक सक्रिय इंटरनेट कनेक्शन के लिए समय-समय पर जांचें। यदि इंटरनेट कनेक्शन उपलब्ध है, तो सरणी से शीर्ष तत्व को बार-बार पॉप करें और सरणी खाली होने तक इसे नेट पर भेजें।

1

अगर नेविगेटर.ऑनलाइन आप अपने स्थानीय डीबी को ऑनलाइन भंडार के साथ सिंक कर सकते हैं, तो आपको शायद 'अन्य' की आवश्यकता नहीं होगी क्योंकि आप पहले से ही स्थानीय रूप से संग्रहीत कर रहे हैं। यह बेहतर हो सकता है कि इसके बजाय 'ऑफ़लाइन' और 'ऑनलाइन' ईवेंट के लिए ईवेंटलिस्टर्स (विंडो ऑब्जेक्ट पर) जोड़ें और उन ईवेंट का उपयोग करके सिंक्रनाइज़ करें (और रद्द करें)।

ऑनलाइन/ऑफ़लाइन राज्य on this hacks.mozilla.org page और हैंडलिंग के उदाहरण की जांच this ajaxian article about the webkit stickynotes html5-implementation को देखो (जो जब ऑनलाइन समकालित नहीं होता, हालांकि)

+0

हैक.मोज़िला पेज केवल मैनिफेस्ट फ़ाइल का उपयोग करके विवरण, ऑफलाइन स्टोरेज के लिए पूर्ण एसक्यूएल डेटाबेस नहीं है। –

+0

वास्तव में, यह स्थानीय स्टोरेज का उपयोग वेब डीबी (स्थानीय एसक्यूएल डीबी) के बजाय स्थानीय तारीख को स्टोर करने के लिए करता है क्योंकि फ़ायरफ़ॉक्स नहीं करता है और शायद कभी नहीं होगा (http://blog.futtta.be/2009/11/18/chrome-opera- टू-सपोर्ट-एचटीएमएल 5-वेबडीबी-एफएफ-याम-वॉन /) वेब डीबी का समर्थन करें। – futtta