HTML5 离线存储和web存储、web worlker_前端h5离线包和在线包什么区别-CSDN博客

本文链接：https://blog.csdn.net/weixin_46506850/article/details/134535564

localStorage 没有时间限制的存储不去手动清除它是会一直存在的
sessionStorage 针对一个session 进行存储关闭当前页面或浏览器就会去清除存储的信息

什么是web worker

web worke 是运行在后台的 JavaScript 独立于其它脚本
当 HTML 执行的脚本时，是不可响应的状态，在这个过程中你可以做点击选取等操作。是不会影响到脚本执行的。脚本执行结束以后才会变成响应的状态

怎么创建web worker

检查浏览器是否支持 web worker
创建 web worker 文件 (js,回调函数等)
worker.js 文件中编写在 Web Worker 中执行的代码逻辑。注意，Web Worker 是在后台运行的独立线程，无法直接访问 DOM，因此只能使用一些受限的 API 和功能。
例如:

self.addEventListener('message', function(event) {
  var message = event.data;
  // 在这里处理收到的消息
  // 可以通过 postMessage() 方法向主线程发送消息
});

在主线程的 JavaScript 代码中，使用 new Worker() 构造函数创建一个新的 Web Worker 实例，并指定要加载的脚本文件。
例如：

var worker = new Worker('worker.js');

在主线程中，可以使用 worker.postMessage() 方法向 Web Worker 发送消息。
例如：

worker.postMessage('Hello from the main thread!');

在 Web Worker 的脚本中，可以通过监听 message 事件来接收主线程发送的消息，并进行相应的处理。
例如：

self.addEventListener('message', function(event) {
  var message = event.data;
  // 在这里处理收到的消息
  // 可以通过 postMessage() 方法向主线程发送消息
});

在 Web Worker 的脚本中，可以使用 self.postMessage() 方法向主线程发送消息。
例如：

self.postMessage('Hello from the Web Worker!');

这样就可以在主线程和 Web Worker 之间进行消息传递和通信了。
注意，Web Worker 的脚本文件必须与主线程的 JavaScript 文件在同一域中，否则会出现跨域错误。

什么是离线存储？

离线存储是用户没有与网络来连接时可以正常访问应用,在用户连接网络时会自动更新缓存

HTML5离线缓存原理？

离线存储是通过创建一个 .appcache 文件的缓存机制（不是存储技术），通过解析这个文件上的解析清单离线存储资源，这些资源就会像 cookie一样被存储，当网页处于离线状态下时浏览器就会读取存储就行展示

HTML5离线存储使用方法

创建一个跟HTML文件同名的文件 index.manifest 文件
在页面头部新增一个 manifest 属性
<html manifest ="index.manifest" >
在index.manifest文件中编写需要缓存的文件：
CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。
NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
在离线状态时，使用 window.applicationCache 进行离线缓存的操作。