[html] 第8天简述下html5的离线储存原理，同时说明如何使用？,about haizlin/fe-interview

qhdxwdm commented on May 4, 2024 4

原理：

HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

①　页面头部像下面一样加入一个manifest的属性。

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
	...
</html>

在cache.manifest文件的编写离线存储的资源。

CACHE MANIFEST
    	#v0.1
    	CACHE:
   	 		js/index.js
    		css/index.css
    	NETWORK:
    		images/logo.png
    	FALLBACK:
    		*.html /404.html /* / /404.html 或 /html/ /404.html 也可*/

以#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更新manifest以实现浏览器重新下载新的文件，可以是版本号，时间戳或md5码等。

离线存储的manifest一般由三个部分组成：

①　CACHE：必选，表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。

②　NETWORK：可选，可以使用通配符，表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。

③　FALLBACK：可选，表示如果访问第一个资源失败，那么就使用第二个资源来替换他，如/html/ /404.html表示用 “404.html” 替代 /html/ 目录中的所有文件，/ /404.html表示用 “404.html” 替代当前目录中的所有文件，*.html /404.html表示用 “404.html” 替代所有html文件。

原文链接：https://blog.csdn.net/zhouziyu2011/article/details/58588546

from fe-interview.

randing89 commented on May 4, 2024 2

appcache 已经被 service worker 替代了 https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

from fe-interview.

Konata9 commented on May 4, 2024

请问一下，这一题是不是和第四天的是一样的？

from fe-interview.

haizhilin2013 commented on May 4, 2024

@Konata9 是有些类似 #10

from fe-interview.

giggleCYT commented on May 4, 2024

https://www.cnblogs.com/zhangym118/archive/2016/09/22/5897056.html

from fe-interview.

buuug7 commented on May 4, 2024

#10 ，跟html第四天是同一个问题，建议关闭，参考我的回答，#10 (comment)

from fe-interview.

amikly commented on May 4, 2024

Service worker

使用

原理

应用程序缓存（Application Cache）

###　使用

引用清单文件

要启用某个应用的应用缓存，请在文档的 html 标记中添加 manifest 属性：

<html manifest="example.appcache">
  ...
</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）

manifest 文件的建议的文件扩展名是：".appcache"

注意：manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"，必须在 web 服务器上进行配置

清单文件结构

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

简单的清单格式如下：

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

原理

基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

from fe-interview.

xiaoxiaozhiya commented on May 4, 2024

H5离线缓存有两种

应用程序缓存(Application Cache)
本地缓存（localSotorage）

应用程序缓存

可以在没有网页的情况下，通过cache manifest文件,创建离线应用，一般适用于静态页面的缓存
优势：离线缓存，页面载入速度快，降低了服务器的负载

用法：

在浏览器端的html文件中添加属性manifest
在.appcache文件中写清单文件结构，包含三部分内容
在服务器添加配置正确的 MIME-type，即 "text/cache-manifest"

本地缓存

通常用于AJAX缓存，存储池非关键的ajax数据
本地缓存会永远存放在浏览器，除非自己手动删除
大小约为10kb
可以跨页面，但是不能跨域
存储在客户端

用法：

在html文件中，localStorage.setItem("key","value")设置
localStorage.getItem("key")
localStorage.removeItem("key")
具体可以参考这篇文章
[](http:// www.php.cn/html5-tutorial-485134.html)

闲谈

sessionStorage

也是一种缓存的技术，可以缓存5kb
使用方法和sessionStorage像孪生兄弟
使用仅限于一次会话
存储在浏览器

cookie

也是可以在浏览器端缓存数据
缓存4kb
使用document.cookie()，过期时间等都要自己设置，设置较为麻烦
当客户端第一次向服务器发起请求时，就会返回设置的cookie，保存在浏览器，以后每次向服务器发起请求，就会在http的首部行加上cookie，会加重负载

所以，session又是什么鬼？

session是服务器为保护用户状态而创建的一个对象
它保存在服务器端
当客户端第一次向服务器发送一个请求时，会在服务器端创建一个session对象，包括sessionID等，
在http响应中，将SessionID以cookie返回
当客户端再次访问时，会把这个sessionID传给服务器端，比对用户信息
这样的话，sessionID被修改了怎么办？
不要担心，服务器会给sessionID签名滴，别人获取它也没多大的意义嘞~

Token又是什么鬼东西？

因为如果一段时间内有大量用户访问服务器，服务器就要存储好多好多的session对象，这样是不是就优点浪费资源了呢？、
于是乎，JSON web token就出现了鸭
当客户端向服务器端发起请求时，就会在服务器端生成一个JWT，这次服务器变聪明了，他只保存JWT签名的密文，然后就把JWT发送到客户端，以cookie/storage存储

from fe-interview.

Iambecauseyouare commented on May 4, 2024

原理：

HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

①　页面头部像下面一样加入一个manifest的属性。

...

在cache.manifest文件的编写离线存储的资源。

CACHE MANIFEST
#v0.1
CACHE:
js/index.js
css/index.css
NETWORK:
images/logo.png
FALLBACK:
.html /404.html / / /404.html 或 /html/ /404.html 也可*/

以#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更新manifest以实现浏览器重新下载新的文件，可以是版本号，时间戳或md5码等。

离线存储的manifest一般由三个部分组成：

①　CACHE：必选，表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。

②　NETWORK：可选，可以使用通配符，表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。

③　FALLBACK：可选，表示如果访问第一个资源失败，那么就使用第二个资源来替换他，如/html/ /404.html表示用 “404.html” 替代 /html/ 目录中的所有文件，/ /404.html表示用 “404.html” 替代当前目录中的所有文件，*.html /404.html表示用 “404.html” 替代所有html文件。

from fe-interview.

[html] 第8天简述下html5的离线储存原理，同时说明如何使用？ about fe-interview HOT 9 OPEN

Comments (9)

Service worker

使用

原理

应用程序缓存（Application Cache）

引用清单文件

清单文件结构

原理

H5离线缓存有两种

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs