_DOMSnap - Offline web pages by persist DOM to IndexedDB/WebSQL_github.com unbug/DOMSnap DOMSnap Offline web pages by persisting DOM to IndexedDB/WebSQL. Please try the . demo How it works HTML5 provides LocalStorage, IndexedDB, and to build offline web apps. But all of , we can’t miss local database. DOMSnap takes full advantage of . Storing HTML to local IndexedDB/WebSQL and resumeing when you’re offline. With DOMSnap, web pages can resume to their last state with less request to the server and less template render. Think offline is a long way out, why not just give DOMSnap a try? window.caches these technologies offline technologies Usage 1.Include file in your HTML [dist/DOMSnap.min.js](https://github.com/unbug/DOMSnap/tree/master/dist) <script src="DOMSnap.min.js"></script> 2.Or insttall the package npm install --save domsnap and require it in your files var DOMSnap = require('domsnap'); Examples //init DOMSnapvar DS = DOMSnap({onReady: function(){console.log('DOMSnap is ready');}}); //capture snapshot html of #mainDS.capture('#main');//capture with specified capture idDS.capture('#main', {id: 'my_id'}); //set the html of #main by it's captured snapshot htmlDS.resume('#main');//set by specified capture idDS.resume('#main',{id: 'my_id'}); APIs DOMSnap(config) Initialize DOMSnap Parameters object [optional] config function will be called when DOMSnap is ready config.onReady number Version control, Nonzero. Update is required if web app has been updated. Default is 1 config.version string "host|path|or any string value". "host": location.host; "path": location.host+location.pathname; default is "path" config.scope string Data store to use. "IndexedDB" or "WebSQL", if not defined, use "WebSQL" for iOS and "IndexedDB" for others. config.storeType number Milliseconds of how long every snapshot will expires, default is 1 week. Note, new snapshots will never expires until the page reload. config.expires Returns object {{capture: capture, resume: resume, get: get, getAll: getAll, remove: remove, clear: clear}|*} .capture(selector, options) capture snapshot html of the element matches the selector and store the result with a capture id Parameters string selector of the element selector object [optional] options string or function capture id, if html is not null set id to null to store html as the default snapshot options.id string or function snapshot html, set id to null to store html as the default snapshot options.html number Milliseconds of how long the snapshot will expires. Same value as initialize DOMSnap if it's not specified. options.expires Returns DOMSnap .resume(selector, options) set the html of the element matches the selector [and capture id] by it’s captured snapshot html Parameters string selector of the element selector object [optional] options string or function capture id, if html is not null set id to null to store html as the default snapshot options.id function a callback function, will be called if no snapshot matched options.fallback Returns DOMSnap .watch(selector, options) watch and auto capture the element matches the selector Parameters string or array selector[s] of the element[s] selector object [optional] options string or function capture id options.id string or function snapshot html options.html Examples //e.g.1DS.watch('#main'); //e.g.2DS.watch('#main',{id: 'my_capture_id',//capture idhtml: 'my_snapshot_html'//snapshot html}); //e.g.3DS.watch('#main',{id: function(selector){ return 'generated_capture_id_for_'+selector;}, //return capture idhtml: function(selector){ return 'generated_snapshot_html_for_'+selector;} //return snapshot html}); //e.g.4DS.watch(['#main', '#another']);//watch multi elements Returns DOMSnap .get(selector, id) retrun the captured snapshot html of the element matches the selector and capture id Parameters string selector of the element selector string [optional]capture id, the result be the default snapshot if it's not specified id Returns string html .getAll(selector) retrun all the captured snapshots html of the element matches the selector Parameters string selector of the element selector Returns object all snapshots as object — e.g. {DEFAULT_CAPTURE_ID: ‘html of DEFAULT_CAPTURE’, my_id: ‘html of my_id’} .remove(selector, id) remove the captured snapshot html of the element matches the selector [and capture id] Parameters string selector of the element selector string [optional]capture id, will empty all snapshots if it's not specified id Returns DOMSnap .clear(version) clear all captured snapshots Parameters number [optional]Same value as initialize DOMSnap if it's not specified. version Returns DOMSnap is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

Facebook

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Offline web pages by persisting DOM to IndexedDB/WebSQL.

Too Long; Didn't Read

Company Mentioned

unbug

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Offline web pages by persisting DOM to IndexedDB/WebSQL.

Too Long; Didn't Read

Company Mentioned

unbug

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES