h5离线缓存+sessionstroage做离线网页

2024-05-18 17:51:45

1.h5离线缓存实现步骤：

a. 在html 标签中添加manifest，例子：<html lang="en" manifest="cache.appcache">

b. 新建一个文件后缀为appcache，文件中存放要缓存的文件，及哪些需要在线请求的文件，该文件需要放在服务器上。

格式如下：

CACHE MANIFEST
#V1.1.24

      #存放需要缓存的文件名称
        bootstrap/css/bootstrap.css
        css/index-pc.css
        js/index.js
        bootstrap/js/bootstrap.js

NETWORK: #使用星号来指示所有其他资源/文件都需要因特网连接

*

FALLBACK:

#无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件
test.html

c. 声明manifest的mime类型，apache下可以在httpd.conf中加上

AddType text/cache-manifest manifest AddType text/cache-manifest .appcache

2.sessionstroage,将接口数据缓存在sessionstroage中，需要注意的是json对象的存储。

将result这个json对象转换为字符串存储在缓存中。例子：

goLibrary=JSON.stringify(result); sessionStorage.setItem('goLibrary',goLibrary);

取缓存数据的时候，将字符串再转换为对象。

goLibrary=sessionStorage.getItem('goLibrary'); goLibrary=JSON.parse(goLibrary);

注意事项：

1.一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。

2.浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）

h5离线缓存+sessionstroage做离线网页相关推荐

使用MitmProxy离线缓存360度全景网页
前端性能优化之“离线缓存manifest”
在本专栏的这一篇文章中,给各位引出了一个"不同寻常的"性能体验优化方式 -- 离线缓存,并介绍了它的简单用法,本文来详细说说! 啥是离线缓存离线缓存又叫"App ...
html5 客户端数据缓存机制,深入理解HTML5离线缓存机制
TML5提供了一种离线应用缓存机制,使得网页应用可以离线使用,这种机制在移动端浏览器上支持度非常广,所有版本的android和ios浏览器都能很好的支持.我们可以放心的使用该特性来加速移动端页面的访问 ...
hybird架构之离线缓存
hybird架构的优缺点现在越来越多的移动应用采用hybird架构进行开发了,主要是H5有以下几个优点: 1. H5开发效率高.跨平台.低成本 2. H5从业务开发上讲,没有版本问题,有BUG能及时 ...
android h5 离线缓存,H5 应用程序缓存(离线缓存)
离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest manifest,作用是为了让服务器识别该 ...
iOS原生App与H5页面交互离线缓存笔记
//webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法- (BOOL)webView:(UIWebView*)webView shouldStartLoadW ...
h5离线缓存与浏览器缓存的区别
离线缓存允许我们在没网的时候通过读取离线文件进行站点的访问,而浏览器缓存即使浏览器又对资源文件的缓存也必须在有网的情况下读取缓存文件以提高文件加载速度,没网的时候依然显示网络断开的错误. 转载于:ht ...
离线缓存占内存吗_彻底弄懂浏览器缓存策略
浏览器缓存策略对于前端开发同学来说不陌生,大家都有一定的了解,但如果没有系统的归纳总结,可能三言两语很难说明白,甚至说错,尤其在面试过程中感触颇深,很多候选人对这类基础知识竟然都是一知半解,说出几个概 ...
HTML5（3） -- 离线缓存与客户端存储总结
1.离线检测可以使用navigator.onLine属性来检测 <!DOCTYPE html> <html lang="en"><head>& ...
CentOS7安装Nextcloud+ocDownloader+aria2使用Nextcloud网盘做离线下载服务器
需求:做离线下载直接保存到网盘,需多用户在线播放视频,在线office文档预览编辑,能分享文件链接,既能做个人网盘,又能做离线下载服务器. 环境:CentOS-7-x86_64-Minimal-181 ...

最新文章

热门文章