梦想之都-俊月星空 › 门户 ›站长分享› 前端开发 › 查看内容

使用Node实现HTML5离线存储的方法

2024-11-2 22:15| 发布者: 8b79| 查看: 110| 评论: 0

摘要: 前言支持离线Web应用开发是HTML5的一个重点。离线Web应用就是在装备不能上网的时间仍旧可以运行的应用。开发离线Web应用需要几个步调，其中一个就是离线下必须能访问一定的资源（图像 JS css等） HTML5引入了应用步

前言

支持离线Web应用开发是HTML5的一个重点。离线Web应用就是在装备不能上网的时间仍旧可以运行的应用。开发离线Web应用需要几个步调，其中一个就是离线下必须能访问一定的资源（图像 JS css等）

HTML5引入了应用步调缓存，这意味着 web 应用可举行缓存，并可在离线时举行访问。

:pushpin:应用步调缓存为应用带来三个优势：

离线欣赏 – 用户可在应用离线时使用它们
速率 – 已缓存资源加载得更快
镌汰服务器负载 – 欣赏器将只从服务器下载更新过或更改过的资源。

原理和环境

在线的环境下，当欣赏器渲染到 [code]<html manifest="test.manifest">[/code] 时，会发出一个请求，请求获取 [code]test.manifest[/code] 文件，如果是第一次访问，那么欣赏器就会根据形貌文件（manifest 文件）中（CACHE MANIFEST）的内容下载相应的资源并且举行离线存储。如果已经访问过并且资源已经离线存储了，那么欣赏器就会使用离线的资源加载页面，然后欣赏器会对比新的 [code]manifest[/code] 文件与旧的 [code]manifest[/code] 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并举行离线存储。
:triangular_flag_on_post: 【注】 这个demo演示是为了更深的了解这个原理
离线的环境下，欣赏器就直接使用离线存储的资源
就像cookie一样，HTML5的离线存储也需要服务器环境，这个demo中服务端基于Node.js、Express框架和art-tmplate开发

形貌文件

要想在缓存中保存数据，需要使用形貌文件manifest 文件，列出要下载和缓存的资源

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在初次下载后举行缓存
NETWORK - 在此标题下列出的文件需要与服务器的毗连，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（好比 404 页面）
在线的环境下,用户署理每次访问页面，都会去读一次manifest.如果发现其改变, 则重新加载全部清单中的资源

结构

:triangular_flag_on_post: 【注意】 全部的你想让欣赏器缓存的资源放在public静态资源文件夹中

服务端环境的搭建

[code] npm init //天生package.json阐明书文件 npm i express //安装express包 npm i --save art-template express-art-template //使用art-tmplate // 入口文件app.js var express = require("express"); var app = express(); app.use('/public/', express.static('./public/')) app.engine('html', require('express-art-template')); app.get('/', function (req, res) { res.render('index.html'); }); app.listen(3000, function () { console.log("app is running at port 3000."); });[/code]

别的

offline.appcache形貌文件

[code] CACHE MANIFEST #v01 /public/image/01.jpg //缓存第一张图片 NETWORK: * FALLBACK: /[/code]

index.html

[code] <!DOCTYPE html> <html lang="en" manifest="../public/offline.appcache"> <head> <meta charset="UTF-8"> <title>HTML5离线存储</title> <link rel="stylesheet" href="../public/index.css"> </head> <body> <img src="../public/image/01.jpg" alt=""> <img src="../public/image/02.jpg" alt=""> </body> </html>[/code]

效果

开启服务端后：

关闭服务端后：

改变 [code]manifest[/code] 后再次毗连服务器

[code] CACHE MANIFEST #v01 /public/image/01.jpg /public/index.css NETWORK: * FALLBACK: /[/code]

:triangular_flag_on_post: 【注】 看图右边控制端的输出，由于改变了manifest文件，欣赏器会对比新的 manifest 文件与旧的 manifest 文件，发现文件改变了，那么就会重新下载文件中的资源并举行离线存储

再次关闭服务端后：

到此这篇关于使用Node实现HTML5离线存储的文章就先容到这了,更多相干HTML5离线存储内容请搜索脚本之家以前的文章或继承欣赏下面的相干文章，盼望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/748571.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：HTML+CSS+JavaScript实现图片3D展览的示例代码下一篇：利用HTML5做的导航条具体步骤

账号		自动登录	找回密码
密码			立即注册

使用Node实现HTML5离线存储的方法

相关分类

站长推荐 /6