DOMSnap

Offline web pages by persisting DOM to IndexedDB/WebSQL.
Please try the demo.

How it works

HTML5 provides LocalStorage, IndexedDB, and window.caches to build offline web apps.
But all of these technologies, we can’t miss local database.
DOMSnap takes full advantage of offline technologies.
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?

Usage

1.Include dist/DOMSnap.min.js file in your HTML:

<script src="DOMSnap.min.js"></script>

2.Or insttall the package and require it in your files

npm install --save domsnap

then

var DOMSnap = require('domsnap');

Examples

//init DOMSnap
var DS = DOMSnap(function(){
  console.log('DOMSnap is ready');
});

//capture snapshot html of #main
DS.capture('#main');
//capture with specified capture id
DS.capture('#main','my_id');

//set the html of #main by it's captured snapshot html
DS.resume('#main');
//set by specified capture id
DS.resume('#main','my_id');

APIs

DOMSnap

Parameters

• config [optional]
• readyCallback function will be called when DOMSnap is ready

Returns object {{capture: capture, resume: resume, get: get, getAll: getAll, remove: remove, clear: clear}|*}

.capture

capture snapshot html of the element matches the selector and store the result with a capture id

Parameters

• selector string selector of the element
• id string [optional]capture id

Returns object DOMSnap

.resume

set the html of the element matches the selector [and capture id] by it’s captured snapshot html

Parameters

• selector string selector of the element
• id string [optional]capture id, the result will be the default snapshot if it’s not specified
• fallback function [optional]a callback function, will be called if no snapshot matched

Returns object DOMSnap

.get

retrun the captured snapshot html of the element matches the selector and capture id

Parameters

• selector string selector of the element
• id string [optional]capture id, the result be the default snapshot if it’s not specified

Returns string html

.getAll

retrun all the captured snapshots html of the element matches the selector

Parameters

• selector string selector of the element

Returns object all snapshots as object - e.g. {DEFAULT_CAPTURE_ID: ‘html of DEFAULT_CAPTURE’, my_id: ‘html of my_id’}

.remove

remove the captured snapshot html of the element matches the selector [and capture id]

Parameters

• selector string selector of the element
• id string [optional]capture id, will empty all snapshots if it’s not specified

Returns object DOMSnap

.clear

clear all captured snapshots

Returns object DOMSnap

Thanks

• Google Lovefield

Find me

• Twitter @unbug
• 微博 @听奏