webStorage，离线缓存

时间 2019-11-16

标签 webstorage 离线缓存繁體版

原文原文链接

1、webStorage

一、目标

  一、了解cookie的不足之处，引入webstorage的概念
  二、学习而且掌握webstorage有哪两种
  三、学习而且掌握sessionStorage
  四、学习而且掌握localStorage
  五、反复练习localStorage的用法
  六、掌握离线存储技术
  七、掌握多媒体标签的一些基本属性
  八、自主开发出一个自定义视频播放器的控件
  九、熟悉使用webwoker
  十、了解webSocket的原理javascript

一、HTML5中的本地存储概念是什么？

不少时候咱们会存储用户本地信息到电脑上，例如：比方说用户有一个填充了一半的长表格，而后忽然网络链接断开了，这样用户但愿你能存储这些信息到本地，当网络恢复的时候，他想获取这些信息而后发送到服务器进行存储现代浏览器拥有的存储被叫作“LocalStorage”,你能够存储这些信息css

二、本地存储的生命周期是什么？

本地存储没有生命周期，它将保留知道用户从浏览器清除或者使用Javascript代码移除html

二、本地存储和cookies之间的区别

三、webStorage

在H5中webStorage其实就是在web上存储数据，分为两种：

sessionStorage 在浏览器关闭时存储的数据将消失---临时存储
localStorage 能够一直存在 --- 永久存储

注：webStorage致命的缺点没有到期时间，

四、webStorage写法

注：webStorage中存储的内容全为字符串

一、储存：localStorage.setItem(key,value);
    localStorage.key = value;//key、value为键值对形式，key做为惟一标识，value作位置，不建议使用这一种，可是别不认识
    注：若是key存在时，更新value
  二、获取数据：localStorage.getItem(key);
    localStorage.key //不建议使用这一种，可是别不认识
    注：若是key不存在返回null
  三、删除：localStorage.removeItem(key);
    注：一旦删除，key对应的数据将会所有删除
  四、所有清除：localStorage.clear();
    注：某些时候使用removeItem逐个删除太麻烦，可使用clear,执行的后果是会清除全部localStorage对象保存的数据
  五、遍历localStorage存储的key
    .length 数据总量，例：localStorage.length
    .key(index) 经过索引获取key值，从0开始；例：var key=localStorage.key(index);

六、存储JSON格式数据

与cookie类似，JSON.stringfy 与JSON.parse
七、StorageEvent对象会包含下列的属性。

window.addEventListener("storage", handle_storage, false);

function handle_storage(e) {
if (!e) { e = window.event; }
}

StorageEvent 对象
属性	类型	描述
`key`	string	被修改的键。
`oldValue`	any	修改前的值（若是是增长新的键值，则该属性为null）
`newValue`	any	修改后的值（若是是删除键值，则该属性为null）
`url`*	string	触发当前存储事件的页面的url
* 注意: `url` 属性早期的规范中为uri`属性。`有些浏览器发布较早，没有包含这一变动。为兼容性考虑，使用url属性前，你应该先检查它是否存在，若是没有url属性，则应该使用uri属性

要注意一点，在存储事件的处理函数中是不能取消这个存储动做的。存储事件只是浏览器在数据变化发生以后给你的一个通知。

总结：若是须要判断是否支持本地存储，能够经过window.sessionStorage或者window.localStorage去判断。前端

sessionStorage会话结束后即清空，且同一窗口不一样标签下的页面sessionStorage不共用java

dom操做：jquery

五、离线缓存

以appache服务器为例：

index.html-------

<html lang="zh-hans" manifest="offline.appcache">

注：manifest 设置后全部文件资源都优先走离线缓存，默认离线缓存当前页面。

第一次从服务器加载离线文件，第二次再读离线文件所以加载页面后需再刷新一次页面

注：fe 前端开发工程师（Front Engineer）

offline.appcache 是在appache中配置mime.types中增长

text/cache-manifest         manifest
text/cache-manifest         appcache

传图

建立 offline.appcache 文件，这里放在index.html同级目录下

offline.appcache----

CACHE MANIFEST

# v1

#offline.appcache 所引用的页面默认自动缓存
#这里通常离线缓存长期不变的内容
CACHE:

../js/jquery-2.0.min.js
../css/bootstrap.css


#页面其余其余资源，*表示除了缓存（CACHE）的资源，其余资源都走线上
#若不配置，则除CACHE外其余资源不会被加载
NETWORK:

*

#当服务器挂了（或请求资源不存在时），a连接资源请求失败了，采用“替补"方式
FALLBACK:

gallery-1.html offline.html

images/ images/offline.png

删除离线缓存

一、清除浏览器缓存记录中的文件

二、

//在谷歌浏览器地址栏输入
chrome://appcache-internals

一些问题：

由更新机制来讲，首次更新manifest时，由于页面加载已经开始甚至已经完成，缓存更新还没有完成，浏览器仍然会使用过时的资源；浏览器是当Application Cache有更新时，该次不会使用新资源，第二次才会使用。所以在 实际应用中咱们须要在这个时候update事件中执行window.reload事件。详解（http://developer.51cto.com/art/201502/465095.htm）

window.applicationCache.addEventListener("updateready", function(){
    window.location.reload()
});

由上例能够知道，缓存的不仅是显示定义的文件，好比上例中的 applicationcache/时便会默认保存index.html为映射的数据，而且包含offline.appcache文件，不少时候会遇到一次文件更新线上总是不更新，这个时候随便在manifest配置文件中作一点修改便可更新。

这个时候若是不作offline.appcache的更新的话，缓存将不会更新，缘由是index.html被缓存了，检测的仍然是原manifest清单各个页面统一管理本身的manifest清单，意思是a页面配置了common.js，b页面也配置了common.js，意思是a页面更新后，b页面的manifest不更改的话，b页面依旧读取的是老版本的文件，这个有必定道理却也有必定浪费，须要公共页面作处理。

错误：Application Cache Error event: Failed to commit new cache to storage, would exceed quota

重启浏览器就行了..

查看浏览器版本，手机端或pc端等信息

=> navigator.userAgent

=> "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36"

侦测用户是否在线（网络是否畅通）

navigation.onLine = true|false

// 监测用户是否在线
function onlineStatus() {
  if (navigator.onLine) {
    var status = document.getElementById('online-status')
    status.innerHTML = '在线'
    status.className = 'badge success'
  } else {
    status.innerHTML = '离线'
    status.className = 'badge'
  }
}
window.addEventListener('online', onlineStatus, false)
window.addEventListener('offline', onlineStatus, false)

一、应用场景：

a）、离线浏览--缓存数据（新闻、阅读、视频）
b）、本地保存用户的操做数据（邮箱软件----离线编辑、在线发送）web

二、HTML5提供的数据持久化技术：

a）、Application Cache     本地缓存所应用的文件
  b）、WEB SQL     关系型数据库，经过SQL数据访问
  c）、IndexDB     索引数据库chrome

三、Application Cache

a）、Manifest文件
  b）、Application Cache文件
  c）、特色
    Manifest文件必须有变化才更新
    一次必须更新Manifest文件中的全部文件
    下次才生效数据库

七、webwoker

案例：计算随机的100个数能被3整除的输出（原来 webwoker ）

Web Workers 是在HTML5中新增的，用来在web应用程序中实现后台处理的一种技术
在HTML4中，js建立的程序都是单线程的，若是花费时间比较长的话web界面就会长时间没有响应，最恶劣的状况还会跳出一个脚本提示框：提示脚本运行时间过长，是否继续。。。。因而就引出了本文的主角：Web Workers APIbootstrap

postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

onmessage() 方法 - 收数据，数据为e.data。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

咱们能够作什么： 1.能够加载一个JS进行大量的复杂计算而不挂起主进程，并经过postMessage，onmessage进行通讯 2.能够在worker中经过importScripts(url)加载另外的脚本文件 3.可使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval() 4.可使用XMLHttpRequest来发送请求 5.能够访问navigator的部分属性有那些局限性： 1.不能跨域加载JS 2.worker内代码不能访问DOM 3.各个浏览器对Worker的实现不大一致，例如FF里容许worker中建立新的worker,而Chrome中就不行 4.不是每一个浏览器都支持这个新特性