HTML5 sessionStorage localStorage缓存和应用缓存

一、sessionStorage的使用

1.存储数据到本地,存储的容量5mb左右

2.这个数据的本质是存储在当前页面的内存中

3.它的生命周期为关闭当前页面,关闭页面数据会自动清除

api:

  1. setItem(key,value):存储数据,以键值对方式存储
  2. getItem(key):获取数据,通过指定名称的key获取对应的value值
  3. removeItme(key):删除数据,通过指定名称的key删除对应的value值
  4. clear():清空所有存储的内容
  window.sessionStorage.setItem('id', 1)
  window.sessionStorage.getItem('id')
  window.sessionStorage.removeItem('id')
  window.sessionStorage.clear()

二、localStorage的使用

1.存储的容量20mb左右

2.在不同浏览器不能共享数据,但是在同一个浏览器的不同窗口可以共享数据

3.永久生效。它的数据存储在硬盘上,并不会随着页面或者浏览器的关闭而清除

api:

  1. setItem(key,value):存储数据,以键值对方式存储
  2. getItem(key):获取数据,通过指定名称的key获取对应的value值
  3. removeItme(key):删除数据,通过指定名称的key删除对应的value值
  4. clear():清空所有存储的内容
  window.localStorage.setItem('id', 1)
  window.localStorage.getItem('id')
  window.localStorage.removeItem('id')
  window.localStorage.clear()

三、应用缓存

1.概念
使用HTML5通过创建cache manifest文件,可以轻松地创建web应用的离线版本

2.优势:

  1. 可配置需要缓存的资源
  2. 网络无连接应用仍可用
  3. 本地读取缓存资源,提升访问速度,增强用户体验
  4. 减少请求,缓存服务器负担

3.Cache Manifest 基础:

  • 如需启用应用程序缓存,请在文档的 标签中包含 manifest 属性:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
  • 每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
  • manifest 文件的建议的文件扩展名是:".appcache"。
  • 注意,manifest 文件需要配置正确的 MIME-type,即 “text/cache-manifest”。必须在 web 服务器上进行配置

4.Manifest 文件:

  1. 概念:manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)
  2. manifest 文件可分为三个部分
  • CACHE MANIFEST – 开始
  • CACHE在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
  1. CACHE MANIFEST说明:
  • CACHE MANIFEST,放置在第一行,是必需的:
CACHE :
/theme.css
/logo.gif
/main.js

上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的
4. NETWORK说明:
NETWORK 小节规定文件 “login.asp” 永远不会被缓存,且离线时是不可用的,如

NETWORK:
login.asp
  1. FALLBACK说明:
    FALLBACK 小节规定如果无法建立因特网连接,就使用指定的资源代替所请求的url的资源,如:
FALLBACK:
/html5/ /404.html

注释:当html5资源在离线状态下无法请求的时候,就使用404.html代替

  1. 其它:
  • CACHE: 可以省略,这种情况下将需要缓存的资源写在CACHE MANIFEST
  • 可以指定多个CACHE: NETWORK: FALLBACK:,无顺序限制
  • #表示注释,只有当demo.appcache文件内容发生改变时或者手动清除缓存后,才会重新缓存。
  • chrome 可以通过chrome://appcache-internals/工具和离线(offline)模式来调试管理应用缓存
  1. 更新缓存:
    一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使修改了服务器上的文件。为了确保浏览器更新缓存,也需要更新 manifest 文件,也就意味着一旦应用被缓存,它就会保持缓存直到发生下列情况:
  2. 用户清空浏览器缓存
  3. manifest 文件被修改(参阅下面的提示)
  4. 由程序来更新应用缓存

说明:更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法

实例 - 完整的 Manifest 文件

CACHE MANIFEST
#上面一句代码是当前文档的第一句
#后面写的是注释

#需要缓存的文件清单列表
CACHE:
../imgs/1.jpg
../imgs/2.jpg
# *:代表所有文件

#配置每一次都需要从服务器获取的文件清单列表
NETWORK:
../imgs/3.jpg

#配置如果文件无法获取则使用指定的文件进行代替
FALLBACK:
../imgs/4.jpg ../imgs/5.jpg
# /:代表所有文件

猜你喜欢

转载自blog.csdn.net/qq_43327305/article/details/103436312