离线缓存与客户端存储总结

最新推荐文章于 2024-08-07 08:37:47 发布

自由2017

最新推荐文章于 2024-08-07 08:37:47 发布

阅读量7k

点赞数 1

分类专栏： js HTML5 文章标签： HTML5 缓存本地存储

本文链接：https://blog.csdn.net/liujie19901217/article/details/50965838

版权

本文详细介绍了HTML5的离线缓存机制，包括如何搭建离线应用程序，离线缓存的优缺点及其适用场景。此外，还讨论了数据存储，如cookie、sessionStorage和localStorage的区别，以及如何在客户端进行数据管理和删除。最后，探讨了本地数据库在客户端存储中的重要性。

摘要由CSDN通过智能技术生成

离线检测

可以使用navigator.onLine属性来检测

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>判断设备是否能上网</title>
    </head>
    <body>
    <script type="text/javascript">
        if(navigator.onLine){
            console.log(navigator.onLine);//true  表示设备可以上网
            alert("可以上网");
        }else{
            console.log(navigator.onLine);//false   表示设备不可以上网
            alert("不可以上网");
        }
    </script>
    </body>
</html>

除了navigator.onLine之外，还可以使用HTML5中的online和offline事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>online和offline</title>
    </head>
    <body>
    <script type="text/javascript" src="EventUtil.js"></script>
    <script type="text/javascript">
    /*
    当网络从离线变为在线或者从在线变为离线时，分别触发这两个事件
     */
        EventUtil.addHandler(window,"online",function(){
    
            alert("Online");
        });
        EventUtil.addHandler(window,"offline",function(){
    
            alert("Offline");
        });
    </script>
    </body>
</html>

应用缓存

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

搭建离线应用程序

①服务器设置头信息 (在apache的conf文件夹中mime.types文件中添加下面的代码):
text/cache-manifest appcache
② html标签加 :
manifest=”xxxxx.manifest”
③写manifest文件 : 离线的清单列表

CACHE MANIFEST
#version n.n
#应用程序更新，修改manifest文件才能拉取更新，我们通过修改版本号就可以达到这个目的
CACHE:
#需要缓存的文件
./css.css
./big1.jpg
./big2.jpg
NETWORK:
#每次需要重新拉取的文件(除了上面cache指定的文件之外)
#*代表的就是除了上面cache指定的文件之外，其他文件都需要重新拉取
*
FALLBACK:
#离线状况下代替文件
/ offline.html

HTML5的应用缓存(application cache)，或者简称为appcache，是专门为开发离线Web应用而设计的。Appcache就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以使用一个描述文件(manifest file)，列出要下载和缓存的资源。
manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

描述文件实例：

CACHE MANIFEST
# 2016-03-10 v1.1.6
./css.css
./big1.jpg
./big2.jpg
NETWORK:
*

第一行，CACHE MANIFEST，是必需的：
CACHE MANIFEST
./css.css
./big1.jpg
./big2.jpg
上面的 manifest 文件列出了三个资源：一个 CSS 文件，两张图片。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。
NETWORK
下面的 NETWORK 小节规定文件 “login.php” 永远不会被缓存，且离线时是不可用的：
NETWORK:
login.php
当然可以使用星号来指示所有其他其他资源/文件都需要因特网连接：
NETWORK:
*
FALLBACK
下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 “offline.html” 替代 /html5/ 目录中的所有文件：
FALLBACK:
/html5/ /offline.html
注意: 第一个 URI 是资源，第二个是替补。

如需启用应用程序缓存，请在文档的标签中包含 manifest 属性：

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

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：”.appcache”。
注意：manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web服务器上进行配置。

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

虽然应用程序缓存的意图是确保离线时资源可用，但也有相应的javascriptAPI让你知道它都在做什么。这个API的核心是applicationCache对象，这个对象有一个status属性，属性的值是常量，表示应用缓存的如下当前状态。
status属性：

0:无缓存即没有与页面相关的应用缓存
1:闲置即应用缓存未得到更新
2：检查中即正在下载描述文件并检查更新
3：下载中即应用缓存正在下载描述文件中指定的资源
4：更新完成，表示应用缓存已经更新了资源，而且所有资源都已经下载完毕，可以通过swapCache()来使用了
5：废弃即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存了
应用缓存相关事件：表示其状态的改变
checking:在浏览器为应用缓存查找更新时触发
error:在检查更新或下载资源期间发生错误时触发
noupdate:在检查描述文件发现文件无变化时触发
downloading:在开始下载应用缓存资源时触发
process:在文件下载应用缓存的过程中持续不断地触发
updateready事件在页面新的应用缓存下载完毕且可以通过swapCache()使用时触发
cached:在应用缓存完整可用时触发
Dmeo

<!DOCTYPE html>
<html lang="en" manifest="demo.appcache" >
    <head>

最低0.47元/天解锁文章

自由2017

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录