javascript - webApp怎么实现下载文章离线看这种功能？

Question

类似知乎、推酷这种下载文章与图片后，可以离线看，不过这里不是原生app,而是用web app来实现

---

使用manifest的话，我不确定是缓存哪张图片啊，怎么解决？

Answer 1

HTML5 的缓存机制：Cache Manifest （http://www.w3school.com.cn/ht...）；当然数据层面的缓存，还要配合 HTML5 的本地存储 LocalStorage（http://www.w3school.com.cn/ht...） 来做。

---

如果要用户点击之后再确定要不要缓存的话，那就具体点说哈：

1. 前端样式，离线处理的 Js，Js-HTML 模板 等肯定是要缓存起来的，这一类资源使用 Manifest；

2. 动态内容，用户点击缓存之后再缓存的，那就要使用 localStorage 了，文字内容没问题，都是字符串，至于图片，暂时能想到的是转为 base64 来缓存。

3. 然后我们就要考虑 localStorage 的大小限制问题了，记得一些浏览器是 5M，图片多了估计还是不够用，那就考虑另一个方案了；

4. HTML5 的 本地数据库：WebSql (刚找到的 http://www.ibm.com/developerw... ) ，确实需要的话，自己 Bing 了解下哈。

5. 上一个 Chrome 的控制台关于 Resource 或者说新版的 Application 的截图，就很明了了：