DOMSnap - 网页快照离线存储和恢复

破晓

来源：http://div.io/topic/1652

背景和基本原理

HTML5 提供了 LocalStorage, IndexedDB, 和 window.caches 来帮我们构建可 offline 的 web app. 但 这些技术里我们都忽视了本地数据库. DOMSnap 则将其充分发挥之, 将HTML 快照保存到本地的 IndexedDB/WebSQL,在页面离线或者网络不好时再恢复.通过 DOMSnap, web app可以最大限度的离线页面的状态和减少网络请求和前端模板渲染. 离线的路还很长, 为何不试试 DOMSnap 呢?

DOMSnap GitHub DEMO

目前的特点

• DOMSnap Gzip压缩后不到3kb, API 非常简洁, capture 和resume 分别负责持久化快照和恢复
• 支持同一个元素保存多份快照
• 支持 watch 的方式自动保存快照
• 支持预先快照, 在用户没有产生相应交互之前就离线相应的页面结构以增加交互的流畅性
• 支持自定义快照, 方便 SPA 类 Web App 将快照与路由对应
• 支持作用域, 同一个域名下不同项目不会冲突
• 支持版本控制, 页面改版后不会冲突
• 支持设置过期时间, 每份快照在过期后自动删除

使用方法

方式1. 页面中引入脚本

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

方式2. 安装包

npm install --save domsnap

然后包含到你的模块中

var DOMSnap = require('domsnap');

Examples

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

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

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

DOMSnap GitHub DEMO