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

最新推荐文章于 2024-10-31 14:57:43 发布
最新推荐文章于 2024-10-31 14:57:43 发布
阅读量566 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qiao903498225/article/details/80292530
本文介绍H5离线缓存的具体实现步骤，包括manifest文件配置及使用sessionStorage缓存接口数据的方法。文章还提供了示例代码，并强调了注意事项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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）

                

        

    

    
  



    

      

        

            

              
                
                  qiao903498225
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
网页离线缓存 Service Worke

				
			

			

				

					
				

				

					08-07
					
					596
					
				

			

		

		

			
				
随着 Web 技术的飞速发展，用户对网站的要求越来越高，为了达到用户期望，开发者使出了浑身解数来做性能优化，包括 CDN 内容分发、图片合并、资源文件压缩、异步加载等等手段，这些手段绝大部分都是在干一件事情，那就是加快资源的加载速度，尽量减少白屏时间。而 service worker 的出现不仅能使页面达到秒开的效果，还能让网站在弱网甚至无网的情况下依然能做出很好的响应。让从前只有原生 APP 才可以做到的离线使用功能。在web页面上也能实现。

			
		

	



                

            
              



	

		

			

				
					
写一个离线页面

				
			

			

				

					a378313814的博客
				

				

					01-29
					
					311
					
				

			

		

		

			
				
if('serviceWorker' in navigator){
   window.addEventListener('load', ()=>{
     navigator.serviceWorker.register('./service-worker.js')
     .then((reg) => console.log('success', reg.scope))
     .catch((err)=>console.log('failure:', err));
   })


			
		

	



              


  
              

                


	

		

			

				
					
利用MetaProducts Inquiry 制作离线版网页chm电子书

				
			

			

				

					无幻
				

				

					09-15
					
					9414
					
				

			

		

		

			
				
系统环境：windows 7软件环境：MetaProducts Inquiry 、EasyChm本次结果：chm电子书格式的离线版网页      近期由于要做个离线版网页的电子书，找了很多软件。对于离线浏览软件，有很多很经典，例如：Teleport Ultra、Website.Extractor等等，自己使用起来很不方便，主要是网页下载不全(对于本次要下载的php网页)，大概是由于自己使用不来

			
		

	





	

		

			

				
					
网页离线缓存

				
			

			

				

					poptxz的博客
				

				

					12-06
					
					3722
					
				

			

		

		

			
				
什么是离线缓存

离线缓存，就是将指定的网页文件（例如css、js）保存到本地，当用户没有网络时，依旧可以通过浏览器使用这些文件。

为何要用离线缓存

从网站所有者的角度来说，增加离线缓存功能，能够让用户更好的使用网站。

离线缓存的设置步骤

1 配置manifest文件

2 通过JS进行缓存的控制

manifest文件的配置

1. 添加manifest属

			
		

	



		

			
		



	

		

			

				
					
HTML5存储--离线存储

				
			

			

				

					weixin_30500105的博客
				

				

					06-12
					
					299
					
				

			

		

		

			
				
离线存储技术
HTML5提出了两大离线存储技术：localstorage与Application Cache，两者各有应用场景；传统还有离线存储技术为Cookie。
经过实践我们认为localstorage应该存储一些非关键性ajax数据，做锦上添花的事情；
Application Cache用于存储静态资源，仍然是干锦上添花的事情；
而cookie只能保存一小段文本（4096字节）；所以...

			
		

	





	

		

			

				
					
android h5 离线缓存,H5 应用程序缓存(离线缓存)

				
			

			

				

					weixin_29421409的博客
				

				

					05-27
					
					1173
					
				

			

		

		

			
				
离线缓存这个功能的实现有以下步骤：1,以nginx做web服务器为例，在mime.types文件中添加一行：text/cache-manifest   manifest,作用是为了让服务器识别该类型文件2,在html文件html标签中添加一行manifest="cache.appcache",告诉浏览器要加载的内容。3.在该目录下新建一个文件cache.appcache，文件内容为：chche...

			
		

	





	

		

			

				
					
鸿蒙5.0开发进阶：H5页面资源离线缓存实现案例

				
			

			

				

					HSMMQAQ的博客
				

				

					10-31
					
					646
					
				

			

		

		

			
				
本文结合内存缓存和磁盘缓存实现了一个H5页面资源离线缓存案例。

			
		

	





	

		

			

				
					
H5离线缓存总结

					
热门推荐

				
			

			

				

					Alin_leeon的博客
				

				

					05-14
					
					1万+
					
				

			

		

		

			
				
看完慕课H5离线缓存的视频以及三天了，由于有事情一直耽误了，今天总结一下，希望对自己的前端学习能有所帮助。
首先关于存储有以下集中方式：1>cache：缓存为了让从DB/磁盘拿出来的东西放到缓存（放于内存）；2>磁盘文件：本地存储的视频，图片，计算机里面的文件；3>数据库：系统项目中的数据存储；4>内存：计算机中所有的程序运行都是在内存中，所以内存对计算机的影响很大。
HTML5缓存可以做到以

			
		

	





	

		

			

				
					
鸿蒙开发进阶（HarmonyOS ）H5应用页面资源离线缓存案例

				
			

			

				

					adaedwa187545的博客
				

				

					10-26
					
					667
					
				

			

		

		

			
				
在移动端 H5 应用中实现资源离线缓存是非常重要的，特别是在网络条件不稳定或用户可能在离线状态下使用应用的情况下：

			
		

	





	

		

			

				
					
HTML5离线缓存技术 附源码.我们知道h5多了很多新技术,其中之一便是可以离线缓存数据,这样当网络断了时,仍然可以浏览网页

				
			

			

				

					01-10
				

			

		

		

			
				
当用户首次访问支持离线缓存的网页时，浏览器会下载清单文件并根据其内容缓存指定的资源。当网络断开时，浏览器会从本地缓存中加载这些资源，从而实现离线访问。  2. **Application Cache API**  Application Cache ...

			
		

	





	

		

			

				
					
【亲测免费】 推荐开源项目：Web-Maker — 离线网页创作利器 

				
			

			

				

					gitblog_00449的博客
				

				

					08-15
					
					1099
					
				

			

		

		

			
				
推荐开源项目：Web-Maker — 离线网页创作利器 ????????
项目介绍
【Web-Maker】是一个专为开发者打造的离线网页实验平台，让你在本地就能快速进行代码实验和网页设计。类似于CodePen或JSFiddle，但速度更快，且支持离线操作，因为整个应用完全运行在你的系统上。
在线体验或扩展安装
你可以直接通过以下方式尝试：

在线应用：立即开启创作（推荐：功能更全，乐趣更多）
Chrome扩展...

			
		

	





	

		

			

				
					
h5离线应用

				
			

			

				

					目尽地平线
				

				

					10-19
					
					4302
					
				

			

		

		

			
				
在没有网络的情况下，网页能否像单机应用一样，依赖本地数据运行？h5提供了application cache，保存网页的离线数据，在断网的情况下，依然能运行。网页应用已经越来越像本地应用了

			
		

	





	

		

			

				
					
如何使用下面的HTML5功能创建离线的网页和应用程序

				
			

			

				

					java教程
				

				

					09-07
					
					2830
					
				

			

		

		

			
				
用户希望他们的网站和应用程序的工作，即使在网络不可用。随着越来越多地存储在云中的数据，开发者想使流体的经验，使对数据的访问时，有没有连接设备时，断开网络连接或当他们遇到死角覆盖。
在这篇文章中，我们将展示如何创建乖巧离线的网页和应用程序使用下面的HTML5功能：

AppCache本地存储文件资源，离线访问它们作为URL索引型数据库存储结构化数据在本地，你可以访问和查询它DOM存储在本地存储

			
		

	





	

		

			

				
					
【亲测免费】 推荐开源项目：断网志 - 离线网页生成器

				
			

			

				

					gitblog_00039的博客
				

				

					04-04
					
					514
					
				

			

		

		

			
				
推荐开源项目：断网志 - 离线网页生成器
项目简介
在数字化世界中，我们经常依赖互联网获取信息和知识，但有时网络不稳定或不可用时，断网志（Duānwǎngzhì）可以成为你的救星。这是一个基于Python的开源工具，能够帮助用户将在线网页、博客甚至是整个网站转换为离线HTML文件，让你在没有网络的情况下也能阅读这些内容。
项目链接：
技术分析
断网志主要利用了以下几个核心技术：

Beautifu...

			
		

	





	

		

			

				
					
H5之sessionStorage(会话存储)和localStorage(本地存储)入门使用

				
			

			

				

					哈哈哈
				

				

					07-31
					
					769
					
				

			

		

		

			
				
Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据，在一次会话中有效。

二者都是通过键值对（key/value）存储值

用sessionStorage存储值（设置值）

//将js

			
		

	





	

		

			

				
					
这个好用的H5动画制作软件，你知道吗?

				
			

			

				

					Lei_xu1的博客
				

				

					07-06
					
					2815
					
				

			

		

		

			
				
什么是H5动画？H5动画是指以网页和动画的形式，通过动画，达成与观看者、使用者之间的动态交互，减少静态死板的场景，以提升使用者的使用体验，一个好的H5动画，对于提升网页的整体效果有显著作用。

而好看的H5动画大多数是UI设计师等非专业编程人员进行制作，对于这些人员，有什么好用的制作软件呢？Mac系统的话，大家可以尝试使用Hype，这是一款时下较为流行好用的动画制作软件了。

一、可离线制作

相比于目前大多数H5制作软件，如凡科、Mugeda、epub360的网页在线制作方式，Hype是一款独立的软件，可

			
		

	





	

		

			

				
					
详细介绍HTML5的离线储存（工作原理+使用场景+真实使用步骤）

				
			

			

				

					weixin_55846296的博客
				

				

					06-05
					
					6299
					
				

			

		

		

			
				
HTML5提供了一种称为离线储存(offline storage)的功能，它允许Web应用程序在浏览器离线时继续访问相关资源，以提高Web应用程序的性能和用户体验。离线储存是通过在客户端(浏览器)中缓存Web应用程序的数据和文件来实现的。一旦缓存，Web应用程序将像普通应用程序一样在离线状态下继续运行。

			
		

	





	

		

			

				
					
HTMLsession临时缓存

				
			

			

				

					qq_42455145的博客
				

				

					03-19
					
					354
					
				

			

		

		

			
				
html5 缓存
1：storage  缓存是针对客户端本地的存储，包含两种不同的存储类型。
localStorage：本地电脑缓存   永久性   除非删除否则没有过期时间
sessionStorage：浏览器客户端缓存   客户端关闭（当前窗口关闭）之后就会自动删除  （临时存储）
一般html5  缓存存储的数据比较大，cookie  存储的数据量比较小。
这两个特别像使用的方法和方式都是一...

			
		

	





	

		

			

				
					
H5新特性之sessionStorage

				
			

			

				

					weixin_43727391的博客
				

				

					11-18
					
					832
					
				

			

		

		

			
				

sessinStorage的使用：存储数据到本地。存储的容量5mb左右。
		这个数据本质是存储在当前页面的内容中
		2.他的生命周期为关闭当前页面，会自动清除
		页面关闭就没了
		setItem(key,value):存储数据，以键值对的方式存储
		getITem(key):获取数据，通过指定名称的key获取对应的value值
		removaItem(key):删除数据，通过指定名称...

			
		

	





	

		

			

				
					
h5断网页面离线缓存

					
最新发布

				
			

			

				

					04-26
				

			

		

		

			
				
好的，我现在需要帮助用户实现H5断网时的离线缓存功能，用户提到了HTML5离线缓存、断网页面、Service Worker或AppCache。首先，我得回顾一下相关的技术点，然后根据用户提供的引用内容来构建解决方案。  根据引用...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值