前端-历史管理&Web存储&应用缓存

最新推荐文章于 2022-08-30 14:20:20 发布

weixin_33750452

最新推荐文章于 2022-08-30 14:20:20 发布

阅读量86

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/PaddyWang/p/5278569.html

版权

1、历史管理

history对象

 -  `history.back();`     *// 后退*

 -  `history.forward();`  *// 前进* 

 -  `history.go(n);`     *// 前进/后退n步*

 -  `history.length;`     *// 历史条数*

 -  `pushState(data,title,url);`  *// 追加一条历史记录*

 -  `onpopstate`  *// 当前进/后退时触发  调用者 window  （浏览器上的按钮）*

example：

      var btn = document.getElementById('btn');     
       btn.onclick = function(){
           history.pushState({name:'haha'},'title','demo.html');
       }
       window.onpopstate = function(e){
           console.log(e.state);    // Object {name: "haha"}
       }

2、Web存储

document.cookie // 存储数据上限4K
sessionStorage // 5M

window.sessionStorage.setItem(key,val); //设置值
window.sessionStorage.getItem(key); //读取值
window.sessionStorage.removeItem(key); //删除值
window.sessionStorage.clear(); //清空值
// 生命周期为：关闭页面

// 数据共享仅限于本页面使用
localStorage // 20M

// 用法同上session

// 永久生效除非手动清除

// 数据跨页面共享使用

example：

    // 设置
    document.querySelector('.set').onclick = function(){
        window.sessionStorage.setItem(this.parentNode.querySelector('.key').value,this.parentNode.querySelector('.val').value);
    }
    // 获取
    document.querySelector('.get').onclick = function(){
        this.parentNode.querySelector('.val').value = window.sessionStorage.getItem(this.parentNode.querySelector('.key').value);
    }
    // 删除
    document.querySelector('.remove').onclick = function(){
        window.sessionStorage.removeItem(this.parentNode.querySelector('.key').value);
    }
    // 清空
    document.querySelector('.clear').onclick = function(){
        window.sessionStorage.clear();
    }

3、应用缓存

H5轻松创建离线应用只需要添加一个.appcache文件即可

第一步
缓存清单：文件后缀 => .appcache

第二步
文件顶行 => CACHE MANIFEST

第三步
CACHE: # 列出需要缓存的内容
NETWORK: # 指定需要在线访问的资源
FALLBACK: # 当缓存的资源找不到时进行替换

第四步应用
在将要缓存的页面添加 => <html manifest="src" >

第五步更新
version 1.0.1

# 自定义版本号通过改变注释里的内容重新缓存

example：

CACHE MANIFEST

#通过改变活注释内容，达到缓存清单内容发生更改，进而重新缓存资源
# version 1.0.7

#指定需要在线访问的资源
NETWORK:

./js/main.js

#列出需要缓存的内容
CACHE:

./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg
./images/img5.jpg

#指定需要在线访问的资源
NETWORK:

./js/main1.js

# 当缓存的资源找不到的情况，会自动替换FALLBACK里的内容
# 如 ./online.html找不到了，则会替换成 ./offline.html
FALLBACK:

./css/online.css ./css/offline.css
./online.html ./offline.html

转载于:https://www.cnblogs.com/PaddyWang/p/5278569.html

weixin_33750452

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端-历史管理&Web存储&应用缓存

1、历史管理history对象 - `history.back();` *// 后退* - `history.forward();` *// 前进* - `history.go(n);` *// 前进/后退n步* - `history.length;` *// 历史条数* - `pushState(data,title,url);` ...
复制链接

扫一扫