重拾前端（study1）

最新推荐文章于 2024-06-17 02:46:14 发布

doubicheng

最新推荐文章于 2024-06-17 02:46:14 发布

阅读量186

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/doubicheng/article/details/106849455

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

H5缓存

sessionStorage

<body>
#描述
sessionStorage的使用,存储数据到本地,存储的容量5mb左右
1.这个数据本质是存储在当前页面的内存中
2.它的生命周期为关闭当前页面,关闭页面,数据会自动清除
#语法
setItem(key,value):存储数据,以键值对方式存储
getItem(key):获取数据,通过指定名称的key获取对应的value值
removeItem(key):删除数据,通过指定名称的key删除对应的value值
clear():清空所有存储的内容
<input type="text" id="userName"/></br>
<input type="button" value="设置数据" id="setData"/></br>
<input type="button" value="获取数据" id="getData"/></br>
<input type="button" value="删除数据" id="removeData"/></br>
<script>
//存储数据
document.querySelector("#setData").onclick = function(){
  //获取用户名
  var name = document.querySelect("#userName").value;
  //存储数据
  window.sessionStorage.setItem("userName",name);
}
//获取数据
document.querySelector("#getData").onclick = function(){
  //如果找不到对应名称的key,那么就会获取null
  var name = window.sessionStorage.getItem("userName");
  alert(name);
}
//删除数据
document.querySelector("#removeData").onclick = funciton(){
  //在删除的时候如果key值错误,不会报错,但是也不会删除数据
  window.sessionStorage.removeItem("userName1");
}
</script>
</body>

localStorage

<body>
#描述
localStorage的使用,存储数据到本地,存储的容量20mb左右
1.不同的浏览器不能共享数据,但是在同一个浏览器的不同窗口中可以共享数据
2.永久生效,它的数据是存储在硬盘上,并不会随着页面或者浏览器关闭而清除,如果想清除,必须手动清除
#语法
setItem(key,value):存储数据,以键值对方式存储
getItem(key):获取数据,通过指定名称的key获取对应的value值
removeItem(key):删除数据,通过指定名称的key删除对应的value值
clear():清空所有存储的内容
<input type="text" id="userName"/></br>
<input type="button" value="设置数据" id="setData"/></br>
<input type="button" value="获取数据" id="getData"/></br>
<input type="button" value="删除数据" id="removeData"/></br>
<script>
//存储数据
document.querySelector("#setData").onclick = function(){
  //获取用户名
  var name = document.querySelect("#userName").value;
  //存储数据
  window.localStorage.setItem("userName",name);
}
//获取数据
document.querySelector("#getData").onclick = function(){
  //如果找不到对应名称的key,那么就会获取null
  var name = window.localStorage.getItem("userName");
  alert(name);
}
//删除数据
document.querySelector("#removeData").onclick = funciton(){
  //在删除的时候如果key值错误,不会报错,但是也不会删除数据
  window.localStorage.removeItem("userName1");
}
</script>
</body>

二者使用及优势

a) 可配置需要缓存的资源
b) 网络无连接应用仍可用
c) 本地读取缓存资源，提升访问速度，增强用户体验
d) 减少请求，缓解服务器负担

想使用应用缓存，我们就需要
1.创建应用缓存清单
2.让页面去使用，加载缓存清单文件

使用过程

1.添加缓存清单文件的引用

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

注意：建议扩展名是appcache
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）

2.创建并设置缓存清单文件，意味着我们需要确定那些文件需要缓存，那些文件每次都会服务器获取

CACHE MANIFEST
#第一句必须是CACHE MANIFEST

#CACHE:写在这个下面的文件默认都会被缓存
CACHE:
../images/l1.jpg
../images/l2.jpg
#  *:代表所有文件

#NETWORK:写在这上下面的文件默认每次都需要从服务器重新获取
NETWORK:
../images/l3.jpg


#FALLBACK:写在这个下面的文件，如果找不到资源，则使用指定的资源进行替换
FALLBACK:
../images/l4.jpg banner_1.jpg
#  /:代表任意的文件

3.添加mime类型：
manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest".必须在 web 服务器上进行配置

H5的离线缓存技术

什么是Manifest：

Manifest（清单）是一个简单的文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。

Manifest 的特点：

离线浏览：即当网络断开时，可以继续访问你的页面。
访问速度快：将文件缓存到本地，不需每次都从网络上请求。
稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存。

manifest属性，可以用来指定当前页面的manifest文件。

创建一个和html同名的manifest文件，比如页面为index.html，那么可以建一个cache.manifest的文件，然后给index.html的html标签添加如下属性即可：

1、manifest 的引入可以使用绝对路径/相对路径，如果是绝对路径，manifest文件必须和当前站点挂在同一个域名下。

2、manifest文件可以保存为任意的扩展名，但mime-type 必须是 text/cache-manifest。

mime-type(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型

<html lang="en" manifest="index.manifest"> 或 <html lang="en" manifest="index.cache"> 在服务器上部署时需要在服务器上添加相应的mime-type

3、manifest 标签应该包含到你需要缓存资源的页面，当第一次打开该页面时，浏览器会解析该页面中的mainfest，并缓存里面列举的资源，同时该页面也会自动会被浏览器缓存，即使该页面没有在Manifest中列出。

如果page-url 页面中包含了 Manifest 属性则浏览器会将该页面中列举出来的资源分别保存，所以Manifest最好使用在SPA（单页应用）项目中。

如何更新缓存
如下三种方式，可以更新缓存：

更新manifest文件
通过javascript操作
清除浏览器缓存
给manifest添加或删除文件，都可更新缓存，如果更改了js而没有新增或删除，可通过版本号，来更新manifest文件。

html5中引入了js操作离线缓存的方法，可以通过js代码手动更新本地缓存。

window.applicationCache.update();
如果用户清除了浏览器缓存（手动或用其他一些工具）会重新下载文件。

可使用代码手动更新manifest缓存，一旦webapp源码更新，会自动更新本地manifest缓存，使用户始终访问到最新的源码。

webapp
使用HTML5编写的移动Web应用，一个webapp几乎可以不加修改的运行在PC/Android/iOS等。
优势：一套代码到处运行
劣势：某些底层功能缺失，运行速度不如原生的App
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache .swapCache(); //交换缓存成功拿到新的缓存，在新的缓存中交换
if (confirm('A new version of this site is available. Load it?'))
window.location.reload(); //重新加载页面---刷新页面
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false); 异步加载

doubicheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
重拾前端（study1）

H5缓存 sessionStorage<body>#描述sessionStorage的使用,存储数据到本地,存储的容量5mb左右1.这个数据本质是存储在当前页面的内存中2.它的生命周期为关闭当前页面,关闭页面,数据会自动清除#语法setItem(key,value):存储数据,以键值对方式存储getItem(key):获取数据,通过指定名称的key获取对应的value值removeItem(key):删除数据,通过指定名称的key删除对应的value值clear(..
复制链接

扫一扫