{"id":18060329,"url":"https://github.com/unbug/domsnap","last_synced_at":"2025-10-15T19:44:24.742Z","repository":{"id":57215050,"uuid":"54616844","full_name":"unbug/DOMSnap","owner":"unbug","description":"Offline web pages by persist DOM to IndexedDB/WebSQL","archived":false,"fork":false,"pushed_at":"2016-04-23T13:15:33.000Z","size":183,"stargazers_count":75,"open_issues_count":0,"forks_count":7,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-25T08:38:18.471Z","etag":null,"topics":["indexeddb","offline","virtual-dom","websql"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unbug.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-24T05:26:17.000Z","updated_at":"2024-07-09T09:49:25.000Z","dependencies_parsed_at":"2022-08-24T21:41:49.487Z","dependency_job_id":null,"html_url":"https://github.com/unbug/DOMSnap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unbug%2FDOMSnap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unbug%2FDOMSnap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unbug%2FDOMSnap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unbug%2FDOMSnap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unbug","download_url":"https://codeload.github.com/unbug/DOMSnap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248398722,"owners_count":21097294,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["indexeddb","offline","virtual-dom","websql"],"created_at":"2024-10-31T04:07:45.439Z","updated_at":"2025-10-15T19:44:19.689Z","avatar_url":"https://github.com/unbug.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM](https://nodei.co/npm/domsnap.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/domsnap/)\n\nDOMSnap\n=================\nOffline web pages by persisting DOM to IndexedDB/WebSQL.\nPlease try the [demo](http://unbug.github.io/DOMSnap/).\n\nHow it works\n============= \nHTML5 provides LocalStorage, IndexedDB, and [window.caches](https://googlechrome.github.io/samples/service-worker/window-caches/) to build offline web apps.\nBut all of [these technologies](http://www.html5rocks.com/en/features/offline), we can't miss local database.\nDOMSnap takes full advantage of [offline technologies](http://www.html5rocks.com/en/features/offline).\nStoring HTML to local IndexedDB/WebSQL and resumeing when you're offline.\nWith DOMSnap, web pages can resume to their last state with less request to the server and less template render.\nThink offline is a long way out, why not just give DOMSnap a try?\n\n\nUsage\n=========\n1.Include [`dist/DOMSnap.min.js`](https://github.com/unbug/DOMSnap/tree/master/dist) file in your HTML\n```\n\u003cscript src=\"DOMSnap.min.js\"\u003e\u003c/script\u003e\n\n```\n\n2.Or insttall the package\n```\nnpm install --save domsnap\n```\nand require it in your files\n```\nvar DOMSnap = require('domsnap');\n```\n\n**Examples**\n\n```javascript\n//init DOMSnap\nvar DS = DOMSnap({\n  onReady: function(){\n    console.log('DOMSnap is ready');\n  }\n});\n\n//capture snapshot html of #main\nDS.capture('#main');\n//capture with specified capture id\nDS.capture('#main', {id: 'my_id'});\n\n//set the html of #main by it's captured snapshot html\nDS.resume('#main');\n//set by specified capture id\nDS.resume('#main',{id: 'my_id'});\n```\n\n\n![domsnap](https://cloud.githubusercontent.com/assets/799578/14100241/a6c6174e-f5be-11e5-94a5-409fcba78bc3.gif)\n\nAPIs\n=========\n### DOMSnap(config)\n\nInitialize DOMSnap\n\n**Parameters**\n\n-   `config` **object** [optional]\n    -   `config.onReady` **function** will be called when DOMSnap is ready\n    -   `config.version` **number** Version control, Nonzero. Update is required if web app has been updated. Default is 1\n    -   `config.scope` **string** \"host|path|or any string value\".  \"host\": location.host; \"path\": location.host+location.pathname; default is \"path\"\n    -   `config.storeType` **string** Data store to use. \"IndexedDB\" or \"WebSQL\", if not defined, use \"WebSQL\" for iOS and \"IndexedDB\" for others.\n    -   `config.expires` **number** Milliseconds of how long every snapshot will expires, default is 1 week. Note, new snapshots will never expires until the page reload.\n\nReturns **object** {{capture: capture, resume: resume, get: get, getAll: getAll, remove: remove, clear: clear}|*}\n\n### .capture(selector, options)\n\ncapture snapshot html of the element matches the selector and store the result with a capture id\n\n**Parameters**\n\n-   `selector` **string** selector of the element\n-   `options` **object** [optional]\n    -   `options.id` **string or function** capture id, if html is not null set id to null to store html as the default snapshot\n    -   `options.html` **string or function** snapshot html, set id to null to store html as the default snapshot\n    -   `options.expires` **number** Milliseconds of how long the snapshot will expires. Same value as initialize DOMSnap if it's not specified.\n\nReturns **DOMSnap** \n\n### .resume(selector, options)\n\nset the html of the element matches the selector [and capture id] by it's captured snapshot html\n\n**Parameters**\n\n-   `selector` **string** selector of the element\n-   `options` **object** [optional]\n    -   `options.id` **string or function** capture id, if html is not null set id to null to store html as the default snapshot\n    -   `options.fallback` **function** a callback function, will be called if no snapshot matched\n\nReturns **DOMSnap** \n\n### .watch(selector, options)\n\nwatch and auto capture the element matches the selector\n\n**Parameters**\n\n-   `selector` **string or array** selector[s] of the element[s]\n-   `options` **object** [optional]\n    -   `options.id` **string or function** capture id\n    -   `options.html` **string or function** snapshot html\n\n**Examples**\n\n```javascript\n//e.g.1\nDS.watch('#main');\n\n//e.g.2\nDS.watch('#main',{\n  id: 'my_capture_id',//capture id\n  html: 'my_snapshot_html'//snapshot html\n});\n\n//e.g.3\nDS.watch('#main',{\n  id: function(selector){ return 'generated_capture_id_for_'+selector;}, //return capture id\n  html: function(selector){ return 'generated_snapshot_html_for_'+selector;} //return snapshot html\n});\n\n//e.g.4\nDS.watch(['#main', '#another']);//watch multi elements\n```\n\nReturns **DOMSnap** \n\n### .get(selector, id)\n\nretrun the captured snapshot html of the element matches the selector and capture id\n\n**Parameters**\n\n-   `selector` **string** selector of the element\n-   `id` **string** [optional]capture id, the result be the default snapshot if it's not specified\n\nReturns **string** html\n\n### .getAll(selector)\n\nretrun all the captured snapshots html of the element matches the selector\n\n**Parameters**\n\n-   `selector` **string** selector of the element\n\nReturns **object** all snapshots as object - e.g. {DEFAULT_CAPTURE_ID: 'html of DEFAULT_CAPTURE', my_id: 'html of my_id'}\n\n### .remove(selector, id)\n\nremove the captured snapshot html of the element matches the selector [and capture id]\n\n**Parameters**\n\n-   `selector` **string** selector of the element\n-   `id` **string** [optional]capture id, will empty all snapshots if it's not specified\n\nReturns **DOMSnap** \n\n### .clear(version)\n\nclear all captured snapshots\n\n**Parameters**\n\n-   `version` **number** [optional]Same value as initialize DOMSnap if it's not specified.\n\nReturns **DOMSnap** \n\nRoadmap \u0026 Make contributions\n==============\n - **on-going** Auto watch and auto resume.\n - Capture and resume script and css link.\n - Resume with DOM diff.\n - **on-going** Events(ready, before resume, after resume, before capture, after capture)\n\nBuild\n==============\n1. install requirements run ```npm install```\n2. build and watch run ```gulp```\n\nFind me\n=================\n  * Twitter [@unbug](https://twitter.com/unbug)\n  * 微博 [@听奏](http://weibo.com/unbug)\n  \n  \nLICENSE\n=========\nThe MIT License (MIT)\n\nCopyright (c) \u003c2016\u003e \u003cunbug\u003e\n\n[MIT](http://opensource.org/licenses/mit-license.php)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funbug%2Fdomsnap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funbug%2Fdomsnap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funbug%2Fdomsnap/lists"}