一、webStorage
1、目标
1、了解cookie的不足之处，引入webstorage的概念
2、学习并且掌握webstorage有哪两种
3、学习并且掌握sessionStorage
4、学习并且掌握localStorage
5、反复练习localStorage的用法
6、掌握离线存储技术
7、掌握多媒体标签的一些基本属性
8、自主开发出一个自定义视频播放器的控件
9、熟悉使用webwoker
10、了解webSocket的原理
1、HTML5中的本地存储概念是什么？
很多时候我们会存储用户本地信息到电脑上，例如：比方说用户有一个填充了一半的长表格，然后突然网络连接断开了，这样用户希望你能存储这些信息到本地，当网络恢复的时候，他想获取这些信息然后发送到服务器进行存储 现代浏览器拥有的存储被叫做“LocalStorage”,你可以存储这些信息
2、本地存储的生命周期是什么？
本地存储没有生命周期，它将保留知道用户从浏览器清除或者使用Javascript代码移除
2、本地存储和cookies之间的区别
3、webStorage
sessionStorage 在浏览器关闭时存储的数据将消失---临时存储
localStorage 可以一直存在 --- 永久存储
4、webStorage写法
localStorage.key = value;//key、value为键值对形式，key作为唯一标识，value做位置，不建议使用 这一种，但是别不认识
注：如果key存在时，更新value
2、获取数据：localStorage.getItem(key);
localStorage.key //不建议使用这一种，但是别不认识
注：如果key不存在返回null
3、删除：localStorage.removeItem(key);
注：一旦删除，key对应的数据将会全部删除
4、全部清除：localStorage.clear();
注：某些时候使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
5、遍历localStorage存储的key
.length 数据总量，例：localStorage.length
.key(index) 通过索引获取key值，从0开始； 例：var key=localStorage.key(index);
6、存储JSON格式数据
7、StorageEvent对象会包含下列的属性。
if (!e) { e = window.event; }
}
| 属性 | 类型 | 描述 |
|---|---|---|
key |
string | 被修改的键。 |
oldValue |
any | 修改前的值（如果是增加新的键值，则该属性为null） |
newValue |
any | 修改后的值（如果是删除键值，则该属性为null） |
url* |
string | 触发当前存储事件的页面的url |
* 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早，没有包含这一变更。为兼容性考虑，使用url属性前，你应该先检查它是否存在，如果没有url属性，则应该使用uri属性 |
||
总结：如果需要判断是否支持本地存储，可以通过window.sessionStorage或者window.localStorage去判断。
sessionStorage会话结束后即清空，且同一窗口不同标签下的页面sessionStorage不共用
dom操作：
5、离线缓存
<html lang="zh-hans" manifest="offline.appcache">
text/cache-manifest manifest text/cache-manifest 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
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页面依旧读取的是老版本的文件，这个有一定道理却也有一定浪费，需要公共页面做处理。
// 监测用户是否在线
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)1、应用场景：
a）、离线浏览--缓存数据（新闻、阅读、视频）
b）、本地保存用户的操作数据（邮箱软件----离线编辑、在线发送）
2、HTML5提供的数据持久化技术：
a）、Application Cache 本地缓存所应用的文件
b）、WEB SQL 关系型数据库，通过SQL数据访问
c）、IndexDB 索引数据库
3、Application Cache
a）、Manifest文件
b）、Application Cache文件
c）、特点
Manifest文件必须有变化才更新
一次必须更新Manifest文件中的所有文件
下次才生效
7、webwoker
Web Workers 是在HTML5中新增的，用来在web应用程序中实现后台处理的一种技术
在HTML4中，js创建的程序都是单线程的，如果花费时间比较长的话web界面就会长时间没有响应，最恶劣的情况还会跳出一个脚本提示框： 提示脚本运行时间过长，是否继续。。。。于是就引出了本文的主角：Web Workers API
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.不是每个浏览器都支持这个新特性