application cache和localstorage的区别

Posted 2020-11-23 LINYBO

第一部分：Application Cache

1.Application Cache介绍

  html5提供的一种应用缓存机制，使得基于web的应用程序可以离线运行。优点有如下几点：

 离线浏览: 用户可以在离线状态下浏览网站内容。

 更快的速度: 因为数据被存储在本地，所以速度会更快。

 减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。

   

 

2.如何使用ApplicationCache？

   2.1开启应用缓存:在html标签制定manifest，manifest特性与 缓存清单(cache manifest) 文件关联，这个文件包含了浏览器需要为你的应用缓存的资源(文件)列表。

    

    2.2:编写缓存清单文件

    

 

 CACHE:

  这是缓存文件中记录所属的默认段落。在 CACHE: 段落标题后(或直接跟在 CACHE MANIFEST 行后)列出的文件会在它们第一次下载完毕后缓存起来。

  NETWORK:

在 NETWORK: 需要与服务器连接的白名单资源。所有类似资源的请求都会绕过缓存，即使用户处于离线状态。可以使用通配符“*”代表除以上指定之外全部需要从服务器拉取。

  FALLBACK:

FALLBACK: 段指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。该段落的每条记录都列出两个 URI—第一个表示资源，第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符，类似404.html。

 

   CACHE， NETWORK， 和 FALLBACK 段落可以以任意顺序出现在缓存清单文件中，并且每个段落可以在同一清单文件中出现多次。

3.下面详细描述Application Cache的流程：

3.1.当浏览器访问一个包含 manifest 特性的文档时，如果应用缓存不存在，浏览器会加载文档，然后获取所有在清单文件中列出的文件，生成应用缓存的第一个版本。

3.2.对该文档的后续访问会使浏览器直接从应用缓存(而不是服务器)中加载文档与其他在清单文件中列出的资源。此外，浏览器还会向 window.applicationCache 对象发送一个 checking 事件，在遵循合适的 HTTP 缓存规则前提下，获取清单文件。如果当前缓存的清单副本是最新的，浏览器将向 applicationCache 对象发送一个 noupdate 事件，到此，更新过程结束。

       

 

3.3.如果清单文件已经改变，文件中列出的所有文件—也包括通过调用 applicationCache.add() 方法添加到缓存中的那些文件—会被获取并放到一个临时缓存中，遵循适当的 HTTP 缓存规则。对于每个加入到临时缓存中的文件，浏览器会向 applicationCache 对象发送一个 progress 事件。如果出现任何错误，浏览器会发送一个 error 事件，并暂停更新。

      

 

3.4.一旦所有文件都获取成功，它们会自动移送到真正的离线缓存中，并向  applicationCache 对象发送一个 cached 事件。.

4.Application Cache的坑

41如果你在服务器修改了任何缓存资源，同时也应该修改清单文件，这样浏览器才能知道它需要重新获取资源。

4.2鉴于文档早已经被从缓存加载到浏览器中，所以更新后的文档不会重新渲染，也就是说你更新清单之后的第一次访问不是最新 数据，直到页面重新加载(可以手动或通过程序)。

4.3指定了“manifest”的页面不需要再清单里再指定，他是默认被缓存的。

4.4清单里的文件只要有一个文件缓存失败，就会放弃全部缓存，类似数据库“事务”机制。

 

第二部分：Localstorage

1.不同于sessionstorage：localstorage提供永久存储，而sessionstorage是会话存储，关闭会话随即清除。

 

2.不同于cookies：localstorage提供更大容量的存储，并且不会随http传输到服务器端

 

3.代码解释：正常的localstorage访问以及存储非常简单，只需要localstorage.getItem(key)和localstorage.setItem(key,value)即可

该代码定义prekey是为了给key增加前缀，以防止key冲突.return 块是暴露方法，让外部函数可以访问到。

 

以上所用实例代码是一个简单的webApp在线阅读器，是在学习过程中的练习代码，较为简单，但比较有代表意义;

演示地址：http://www.olivewind.com/cases/demo09_onlinereader/

源代码：https://github.com/olivewind/webAppOnlineReader

 

*************转摘：https://blog.csdn.net/kingliguo/article/details/52637087