html5本地存储功能(利用Node实现HTML5离线存储的方法)
类别:Web前端 浏览量:2459
时间:2021-10-22 07:47:31 html5本地存储功能
利用Node实现HTML5离线存储的方法前言
支持离线Web应用开发是HTML5的一个重点。离线Web应用就是在设备不能上网的时候仍然可以运行的应用。开发离线Web应用需要几个步骤,其中一个就是离线下必须能访问一定的资源(图像 JS css等)
HTML5引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在离线时进行访问。
:pushpin:应用程序缓存为应用带来三个优势:
- 离线浏览 – 用户可在应用离线时使用它们
- 速度 – 已缓存资源加载得更快
- 减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。
原理和环境
- 在线的情况下, 当浏览器渲染到
<html manifest="test.manifest">
时,会发出一个请求,请求获取test.manifest
文件 ,如果是第一次访问,那么浏览器就会根据 描述文件(manifest 文件)中(CACHE MANIFEST)的内容下载相应的资源并且进行离线存储。如果已经访问过并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest
文件与旧的manifest
文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。 - :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静态资源文件夹中
服务端环境的搭建
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."); });
其它
offline.appcache描述文件
CACHE MANIFEST #v01 /public/image/01.jpg" alt="html5本地存储功能(利用Node实现HTML5离线存储的方法)" border="0" />
index.html
<!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="html5本地存储功能(利用Node实现HTML5离线存储的方法)" border="0" />
结果
开启服务端后:
关闭服务端后:
改变 manifest
后 再次连接服务器
CACHE MANIFEST #v01 /public/image/01.jpg" alt="html5本地存储功能(利用Node实现HTML5离线存储的方法)" border="0" />
:triangular_flag_on_post: 【注】 看图右边控制端的输出,因为改变了manifest文件,浏览器会对比新的 manifest 文件与旧的 manifest 文件,发现文件改变了,那么就会重新下载文件中的资源并进行离线存储
再次关闭服务端后:
到此这篇关于利用Node实现HTML5离线存储的文章就介绍到这了,更多相关HTML5离线存储内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- nodejs格式化教程(nodejs利用readline提示输入内容实例代码)
- html元素和属性的区别(HTML5 HTMLCollection和NodeList的区别详解)
- nodejs数据采集(nodejs获取表单数据的三种方法实例)
- nodejsweb服务(Nodejs实现内网穿透服务)
- nodejs启动web服务器(使用NODE.JS创建一个WEBSERVER服务器的步骤)
- nodejs游戏服务端框架(如何写Node.JS版本小游戏)
- nodejs怎么查看对象的全部属性(浅谈nodejs中创建cluster)
- docker node 分阶段构建(Docker安装、创建镜像、加载并运行NodeJS程序的详细过程)
- nodejs实现websocket服务端(Node.js+express+socket实现在线实时多人聊天室)
- node中如何用import(分析node事件循环和消息队列)
- nodejs如何识别接口(Node实现搜索框进行模糊查询)
- node.js express 上线(node+express实现分页效果)
- node中使用token(浅谈node使用jwt生成的token应该存在哪里)
- nodejs部署上传文件(node.js使用express-fileupload中间件实现文件上传)
- nodejs架构解析(详解NodeJS模块化)
- nodejs json文件读写(nodejs将JSON字符串转化为JSON对象报错的解决)
- 乔欣首演古装大女主,颜值演技双在线(乔欣首演古装大女主)
- 于正又推女性古装大剧 杨蓉乔欣演女配,两位女主成 重头戏(于正又推女性古装大剧)
- 乔欣古装女主戏获热度 作为女主,却没吃到红利(乔欣古装女主戏获热度)
- 爱情是什么(爱情是什么最经典的话)
- 乔欣 古装剧中的高颜值(古装剧中的高颜值)
- 怎么才可以财富自由(如何让自己实现财富自由)
热门推荐
- php面向对象final怎么设置(PHP面向对象程序设计中的self、static、parent关键字用法分析)
- 服务异常处理方案(网站出现Service Unavailable提示怎么解决?)
- 云服务器无法访问网站(网站放在香港云服务器上,出现卡顿怎么解决?)
- python使用aes加密解密(python实现AES和RSA加解密的方法)
- dedecms数据库优化(dedecms 安全设置终极技巧补充idc)
- python零基础实战项目(十个Python练手的实战项目,学会这些Python就基本没问题了推荐)
- jspromise原理(JavaScript使用promise处理多重复请求)
- 织梦列表页分页怎么用(织梦首页和列表页怎么调用自定义字段)
- 阿里云服务器加载镜像操作手册(阿里云、腾讯云、小鸟云服务器中安装wdcp图文教程)
- html中hr标签
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9