阿富

web前端

导航

【html5】应用缓存、Web存储 

======
====== 应用缓存：applicationCache ======
======

                        index.html
<html manifest="manifest.appcache">



                        服务端（IIS）
添加MIME类型：.appcache text/cache-manifest
也许可用的后缀：.manifest | .application



                        manifest.appcache
CACHE MANIFEST
# 2016-07-12 v1

CACHE:
/jquery/jquery-3.1.1.min.js
img/xxx.jpg

NETWORK:
*

FALLBACK:
/html/ /html/offline.html
img/ /img/offline.png




                        javascript

//离线检测
navigator.onLine = true || false //是否在线
window.addEventListener( 'online', function(){} ); //从离线转为在线时触发
window.addEventListener( 'offline', function(){} ); //从在线转为离线时触发

//applicationCache属性
status：状态码
    0：没有应用缓存
    1：应用缓存无更新
    2：正在下载描述文件并检查更新
    3：正在下载资源
    4：所有资源都已下载完毕 （此状态时可调用swapCache方法）
    5：描述文件不存在
//applicationCache事件
checking：检查更新时触发（1次）
obsolete：检查更新发现描述文件不存在时触发（0|1次）
noupdate：检查更新发现无变化时触发 （0|1次）
error：检查更新或下载资源期间发生错误时触发 （0|1次）
downloading：开始下载资源时触发 （0|1次）
progress：下载资源的过程中持续不断地触发 （0|N次）
updateready：所有资源都已下载完毕时触发 （0|1次）
cached：初始化应用缓存成功时触发 （0|1次）
//applicationCache方法
update()：检查更新
swapCache()：在updateready事件中启用新的缓存

//reload处理
applicationCache.addEventListener('updateready', function() {
    if (this.status === 4) {
        this.swapCache();
        if (confirm("loading new?")) {
            location.reload();
        }
    }
});



======
====== Web存储：localStorage、sessionStorage、document.cookie ======
======

                        localStorage、sessionStorage

if(localStorage){
    localStorage.key = value;
    localStorage.setItem(key,value);
    localStorage.key;
    localStorage.getItem(key);
    localStorage.removeItem(key);
    localStorage.clear();
    localStorage.key(index);

    localStorage.key = JSON.stringify({data:5});
    var data = JSON.parse(localStorage.key);

    var 剩余空间 = 5 - encodeURIComponent(JSON.stringify(localStorage)).length / 1024 / 1024;
}



                        cookie

新增|修改：document.cookie="name=value; expires=UTC|GMT; path=/";
删除：document.cookie="name=; expires=过期的UTC|GMT";
访问：document.cookie

function setCookie(name, val, exdays) {
    if (typeof name === 'string' && name !== '') {
        var text = name + "=" + val;
        if (typeof exdays === 'number') {
            var _d = new Date();
            _d.setTime(_d.getTime() + exdays * 24 * 60 * 60 * 1000);
            text += '; expires=' + _d.toGMTString();
        }
        return (document.cookie = text);
    }
    return '';
}

function getCookie(name) {
    name += '=';
    var arr = document.cookie.split('; ');
    for (var _item, i = 0; i < arr.length; i++) {
        _item = arr[i];
        if (_item.indexOf(name) === 0) {
            return _item.slice(name.length);
        }
    }
    return '';
}

 

posted on 2016-07-14 22:18  阿富  阅读(114)  评论(0)    收藏  举报