离线存储（了解）

作者: 刘宏儿 | 来源:发表于2019-01-11 19:15 被阅读0次

离线存储（了解）
HTML5离线缓存相关文章
离线存储
离线存储
HTML 5 多线程与离线存储
App/uni-app离线本地存储方案
前端面试备考（基础题）
JavaScript高级编程笔记(5)
关于本地存储
离线存储manifest

离线存储就是在离线状态也可以访问之前访问过的页面

流程：

图片.png

分析：当有网的情况下，浏览器会访问离线缓存的内容，同时会潜在的向服务器发送一个请求，看版本号是否更新，如果更新就会将新的内容返回到缓存中，但是此时，浏览器拿到的是之前的缓存内容，并不会拿到新的更新后的数据，只有再次刷新页面才会拿到新的上次更新后的数据。在没有网的情况下，它拿到的还是缓存里的，就算发送请求，也是请求失败的。

我们需要放在服务器环境下才会生效，用服务器的开启和停止来模拟有网和断网。

过程：在html文件中的<html>标签中

<html lang="en" manifest="manifest.manifest">

在html同级新建一个文件manifest.manifist

CACHE MANIFEST
#version 1.1124
CACHE:
    index.css
    index2.css
    images/a.png
NETWORK:
    *

实际开发过程中，后端会用工具自动生成manifest文件
当前页面需要缓存的资源写到CACHE下
只要内容变了，版本号变，缓存的内容才会变，不然不会变

这样得刷新两次，所以可以用js解决这个问题，原理就是要通过监听updateReady，看是否有更新，如果更新，就将原缓存换成新缓存，用reload()重新刷新页面.
代码如下：

<script>
window.addEventListener('load', function(e) {
        window.applicationCache.addEventListener('updateready', function(e) {
           if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
               // 调用applicationCache.swapCache()即可将原缓存换成新缓存。
               window.applicationCache.swapCache();
               window.location.reload();
           }
       }, false);
}, false);

这样就不用刷新两次了，正常操作，改版本号就可以啦。

图片的话，浏览器会默认缓存，如果要设置的话，就在maifest文件里CATCH下写图片路径就好了比如：image/a.png