守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 251|回复: 0

[js插件/工具类] DOMSnap - 网页快照离线存储和恢复

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51756
    钢镚
    1422

    开源英雄守望者

    发表于 2016-8-4 10:30:03 | 显示全部楼层 |阅读模式

    来源: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

    domsnap

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-10-22 23:59 , Processed in 0.068330 second(s), 35 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表