2020/12/28-每日三题第4弹：cookie-曲奇饼干？，HTML5的离线存储你真的懂了吗？？？

本文链接：https://blog.csdn.net/weixin_44586544/article/details/111834810

前言：

我仔细想了想，今天好像没有啥说的(靓仔语塞)，嗯~~~其实这都是我特意安排的，故意跟前面的风格不一样(绝对不是因为我辞藻匮乏了)😁😁😁
每日三题

好了，话不多说，上题目！！！😍😍😍

题目：

(题目1) HTML5 的离线储存怎么使用，工作原理能不能解释一下？

(题目2) 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？

(题目3) 请描述一下 cookie ， sessionStorage 和 localStorage 的区别？

倒计时10min，开始计时，看看自己能做对几道题😎😎😎？参考解析在下面，但不要直接看解析哦，这样子没什么效果的！！！

每日三题

参考解析：

题目1：

1.在⽤户没有与因特⽹连接时，可以正常访问站点或应⽤，在⽤户与因特⽹连接时，更新⽤
  户机器上的缓存⽂件
2.原理： HTML5 的离线存储是基于⼀个新建的 .appcache ⽂件的缓存机制(不是存储技
  术)，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下
  来。之后当⽹络在处于离线状态下时，浏览器会通过被离线存储的数据进⾏⻚⾯展示
3.如何使⽤：
	1）⻚⾯头部像下⾯⼀样加⼊⼀个 manifest 的属性；
	2）在 cache.manifest ⽂件中编写离线存储的资源
	3）在离线状态时，操作 window.applicationCache 进⾏需求实现
	
	CACHE MANIFEST
	#v0.11
	CACHE:
	js/app.js
	css/style.css
	NETWORK:
	resourse/logo.png
	FALLBACK:
	/offline.html

题目2：

1.在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest ⽂件，如
  果是第⼀次访问 app ，那么浏览器就会根据manifest⽂件的内容下载相应的资源并且进⾏
  离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使⽤离线的资
  源加载⻚⾯，然后浏览器会对⽐新的 manifest ⽂件与旧的 manifest ⽂件，如果⽂件没
  有发⽣改变，就不做任何操作，如果⽂件改变了，那么就会重新下载⽂件中的资源并进⾏
  离线存储。
2.离线的情况下，浏览器就直接使⽤离线存储的资源。

题目3：

1.cookie 是⽹站为了标示⽤户身份⽽储存在⽤户本地终端（Client Side）上的数据（通常
  经过加密）
2.cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回
  传递
3.sessionStorage 和 localStorage 不会⾃动把数据发给服务器，仅在本地保存
4.存储⼤⼩：
	1）cookie 数据⼤⼩不能超过4k
	2）sessionStorage 和 localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得
	   多，可以达到5M或更⼤
5.有期时间：
	1）localStorage 持久存储数据，浏览器关闭后数据不丢失除⾮主动删除数据
	2）sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除
	3）cookie 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭