h5 重要新特性熟知如何使用在H5之前我们的浏览器存储只有cookie，但是cookie明显不能满足我们对浏览器存储

存储

浏览器的存储可以说是在web端非常重要的一环，以前也有了解过这方面的相关知识，但是还是不够细致，今天空下时间来好好看看这一块，那我们开始吧：
在H5之前我们的浏览器存储只有cookie，但是cookie明显不能满足我们对浏览器存储缓存这一块的需求，因为cookie的劣势很明显，它只有4K的大小，并且每一次向服务器请求文件的时候都会被请求头携带，主domain被污染。
cookie的主要的作用就是：购物车，客户登录。
虽然对于IE浏览器有UserData，大小是64k,但是只有IE浏览器支持。
那么来到我们今天的主角H5，在H5中我们增加了浏览器缓存方式：
首先先介绍一下，在最新版的chrome浏览器中取消了resources，官方解释是将它添加到了application下，结果打开application后可以清楚的看到左面菜单栏中有storage缓存信息以及所有这一块内容的文件如mainfest等方便我们查看.

1.本地存储localstorage

存储方式：
以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。
大小：
每个域名5M
检测方法：
可以在控制器中打印 window.localstorage查看
常用的API：
getItem //取记录
setIten//设置记录
removeItem//移除记录
key//取key所对应的值
clear//清除记录
存储的内容：
数组，图片，json，样式，脚本。。。（只要是能序列化成字符串的内容都可以存储）

2.浏览器存储sessionstorage

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存，所以sessionstorage的用法在这里就不做过多赘述。

3.离线缓存（application cache）

本地缓存应用所需的文件
使用方法：
①配置manifest文件
页面上：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Manifest 文件：
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
①CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
②NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
③FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
完整demo：

CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js

NETWORK:
login.jsp

FALLBACK:
/html/ /offline.html

服务器上：manifest文件需要配置正确的MIME-type，即 "text/cache-manifest"。
如Tomcat:

<mime-mapping>
 <extension>manifest</extension>
 <mime-type>text/cache-manifest</mime-type>
</mime-mapping>

常用API：
核心是applicationCache对象，有个status属性，表示应用缓存的当前状态：
0（UNCACHED） : 无缓存，即没有与页面相关的应用缓存
1（IDLE） : 闲置，即应用缓存未得到更新
2 （CHECKING） : 检查中，即正在下载描述文件并检查更新
3 （DOWNLOADING） : 下载中，即应用缓存正在下载描述文件中指定的资源
4 （UPDATEREADY） : 更新完成，所有资源都已下载完毕
5 （IDLE） : 废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存
相关的事件：
表示应用缓存状态的改变：
checking : 在浏览器为应用缓存查找更新时触发
error : 在检查更新或下载资源期间发送错误时触发
noupdate : 在检查描述文件发现文件无变化时触发
downloading : 在开始下载应用缓存资源时触发
progress：在文件下载应用缓存的过程中持续不断地下载地触发
updateready : 在页面新的应用缓存下载完毕触发
cached : 在应用缓存完整可用时触发
Application Cache的三个优势：
① 离线浏览
② 提升页面载入速度
③ 降低服务器压力
注意事项：

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）
如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
引用manifest的html必须与manifest文件同源，在同一个域下
浏览器会自动缓存引用manifest文件的HTML文件，这就导致如果改了HTML内容，也需要更新版本才能做到更新。
manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
FALLBACK中的资源必须和manifest文件同源
更新完版本后，必须刷新一次才会启动新版本（会出现重刷一次页面的情况），需要添加监听版本事件。
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
当manifest文件发生改变时，资源请求本身也会触发更新
离线缓存与传统浏览器缓存区别：
离线缓存是针对整个应用，浏览器缓存是单个文件
离线缓存断网了还是可以打开页面，浏览器缓存不行
离线缓存可以主动通知浏览器更新资源

多媒体API

这部分最有常用到的是
多媒体API是HTML5非常重要的特性之一，用户可以直接通过代码<video src="xyz.ogv" type=video/ogg"> 来插入一个video，而在传统的HTML4中需要写一长串代码。
上一段代码做一个简单的介绍，一个Audio播放，暂停控制的例子：

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="styles.css">
  <title>Audio cue</title>

  <audio id="clickSound">
    <source src="johann_sebastian_bach_air.ogg">
    <source src="johann_sebastian_bach_air.mp3">
  </audio>

  <button id="toggle" onclick="toggleSound()">Play</button>

  <script type="text/javascript">
    function toggleSound() {
        var music = document.getElementById("clickSound");
        var toggle = document.getElementById("toggle");

        if (music.paused) {
          music.play();
          toggle.innerHTML = "Pause";
        }
        else {
          music.pause();
          toggle.innerHTML ="Play";
        }
    }
  </script>

</html>

其中加重字即为对多媒体api的的暂停播放的操作。

通信

首先要先介绍下通信事件，就是message事件。
该事件包含5个只读属性：
data包含任意字符串数据，由原始脚本发送origin一个字符串，包含原始文档的方案、域名以及端口(如：domain.example:80)lastEventId一个字符串，包含了当前的消息事件的唯一标识符。source原始文件的窗口的引用。更确切地说，它是一个WindowProxy对象。ports一个数组，包含任何MessagePort对象发送消息。
在跨文档通信和通道通信中，lastEventId的值一般是个空字符串；lastEventId应用在服务器端发送事件上。发送信息中如果没有ports, 则ports属性值就是个长度为0的数组。
MessageEvent继承DOM事件接口，且属性共享。然而，通信事件并没有冒泡，不能取消，也没有默认行为。
一个简单的两个iframe之间发送接收的例子：
左侧iframe JS代码：

var eleForm = document.querySelector("form");
eleForm.onsubmit = function() {
    var message = document.querySelector("input[type='text']").value;
    // 这里是关键，发送信息
    window.parent.frames[1].postMessage(message, '*');
    return false;    
}

右侧iframe JS代码：

var eleBox = document.querySelector("#message");
var messageHandle = function(e) {
    eleBox.innerHTML = '接受到的信息是：' + e.data;
};
if (window.addEventListener) {
    // 接受信息
    window.addEventListener("message", messageHandle, false);
} else if (window.attachEvent) {
    // 接受信息，兼顾IE8之流
    window.attachEvent('onmessage', messageHandle);
}

效果如下

history以及它的pushState和replaceState方法

我们在使用ajax通过回掉接口的时候，会破坏掉浏览器的history机制，在h5中出现了pushState和replaceState方法来帮助我们实现ajax的history功能。

history.pushState
用法举例：
history.pushState({}, "页面标题", "xxx.html");
history.pushStatehistory.replaceState
用法举例：
history.replaceState(null, "页面标题", "xxx.html");
window.onpopstate
用法举例：
window.addEventListener("popstate", function() {
var currentState = history.state;
/*
- 该干嘛干嘛
  */
  });

h5 重要新特性 熟知如何使用

存储

1.本地存储localstorage

2.浏览器存储sessionstorage

3.离线缓存（application cache）

多媒体API

通信

h5 重要新特性熟知如何使用