HTML5本地缓存/无刷新加载

HTML5本地缓存：

 

    本次存储：localStorage、cookie

    缓存：将文件存储到本地

    applicationCache

 

    缓存的优点：

      速度快：读本地文件

      稳定：可以在本地和远程任意切换

      离线浏览：断网

 

    缓存的实现过程：

    html标签上增加一个manifest属性，值设置为*(文件名).manifest(可以加任意扩展名,需要设置mime类型，text/manifest)

 

    manifest文件格式：

    文件头：CACHE MANIFEST

    版本信息：注释内容(不是必须的但最好写上)

    缓存文件：CACHE(必须)指定被缓存的文件,如果没有CACHE关键字，将NETWORK和FALLBACK之外的内容看做缓存清单

    需要联网的文件：NETWORK(可选)

    错误指向：FALLBACK(可选)

 

    执行：

    当读取到manifest属性之后，解析manifest文件，将CACHE下的文件自动缓存，当前页面无论是否在CACHE下指定，都会缓存

 

 

 

 

CACHE MANIFEST#文件头

 

#注释

#v1.00 2021年12月7日11:40:32

 

CACHE:

#规定以下文件需要缓存

 

NETWORK:

#规定以下文件需要网络

 

FALLBACK:

#将不存在的路径指向固定地址(404)

 

 

 

 

无刷新加载

 

ajax,jsonp,iframe

没有前进后退功能，看不到地址变化

 

前进、后退指history记录发生变化

history的记录数量：history.length

 

实现地址变化，但页面不刷新，改变history访问记录

 

history.replaceState(0)替换当前，不产生新的历史记录(当前窗口下的范围记录)

history。pushState(data,null,地址),新增历史记录state操作需要服务器，不支持跨域

 

window.onpopstate事件接受 back,go,forward前进后退，会执行，pushState,replaceState不会触发该事件

 

e.state表示pushState或者replaceState中传递的第一个参数