Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[html] 第8天 简述下html5的离线储存原理，同时说明如何使用？ #22

Open
haizhilin2013 opened this issue Apr 23, 2019 · 9 comments
Open

[html] 第8天 简述下html5的离线储存原理，同时说明如何使用？ #22

haizhilin2013 opened this issue Apr 23, 2019 · 9 comments
Labels
html html

Comments

@haizhilin2013
Copy link
Collaborator

haizhilin2013 commented Apr 23, 2019 •
edited

第8天 简述下html5的离线储存原理，同时说明如何使用？
@haizhilin2013 haizhilin2013 added the html html label Apr 23, 2019
@haizhilin2013 haizhilin2013 changed the title [html] 第8天 简述下html5的离线储存原理，同时如何说明使用？ [html] 第8天 简述下html5的离线储存原理，同时说明如何使用？ Apr 24, 2019
@haizhilin2013 haizhilin2013 pinned this issue Jun 26, 2019
@Konata9
Copy link

Konata9 commented Jul 4, 2019

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

@haizhilin2013
Copy link
Collaborator Author

@Konata9 是有些类似 #10

@haizhilin2013 haizhilin2013 unpinned this issue Jul 5, 2019
@qhdxwdm
Copy link

qhdxwdm commented Sep 6, 2019

原理：

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

@randing89
Copy link

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

@giggleCYT
Copy link

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

@buuug7
Copy link

buuug7 commented Jan 16, 2021

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

@amikly
Copy link

amikly commented Oct 26, 2021

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一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

@xiaoxiaozhiya
Copy link

H5离线缓存有两种

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

应用程序缓存

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

用法：

  1. 在浏览器端的html文件中添加属性manifest
  2. 在.appcache文件中写清单文件结构，包含三部分内容
  3. 在服务器添加配置正确的 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又是什么鬼东西？

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

@Iambecauseyouare
Copy link

原理：

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文件。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
html html
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@randing89 @haizhilin2013 @Konata9 @buuug7 @amikly @qhdxwdm @giggleCYT @Iambecauseyouare @xiaoxiaozhiya