# H5 一些新特性

1. 充满全屏

• webkitRequestFullScreen()
• 取消全屏： webkitCancelFullScreen()

注意：1).全屏操作是需要用户去触发的，自己不会触发，在火狐上全屏是：mozRequestFullScreen();
2).取消全屏是加给document的：document.webkitCancelFullScreen();

2. 帧动画 window.RequestAnimationFrame(fn)

简单实例：

<script>
    //获取元素和上下文对象
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    //创建小球对象
    var ball = {
        x: 50,
        y: 50,
        r: 30,
        speedX: 5,
        speedY: 3,
        draw: function () {
            ctx.beginPath();
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
            ctx.closePath();
            ctx.fillStyle = 'red';
            ctx.fill();
        },
        move: function () {
            this.x += this.speedX;
            this.y += this.speedY;

            if(this.x >= 500 - this.r || this.x <= this.r){this.speedX *= -1};
            if(this.y >= 500 - this.r || this.y <= this.r){this.speedY *= -1};
        }
    };
    // ball.draw();
    //通过定时器让小球移动 
    // setInterval(function () {
    //  ctx.clearRect(0,0,500,500);
    //  //移动小球，然后绘制
    //  ball.move();
    //  ball.draw();
    // },10);
    
    // 通过延时定时器让小球移动
    // function gameloop() {
    //  ctx.clearRect(0,0,500,500);
    //  ball.move();
    //  ball.draw();
    //  //使用timeout实现interval的功能，实际上就是自己调用自己
    //  setTimeout(gameloop, 10);
    // }
    // gameloop();

    var a = null;
    var n = 0;
    function animation() {
        // n++;
        // if(n % 5 == 0){
        // 每隔5帧执行一次
            ctx.clearRect(0,0,500,500);
            ball.move();
            ball.draw();
        // }
        // 
        console.log(ball.x);
        
        //设置帧动画
        //requestAnimationFrame 使用帧，进行动画效果，保证每隔一帧执行一次
        //两次执行中间的时间间隔不确定，由电脑性能来决定
        //如果使用帧动画，需要注意：利用取余运算，进行时间的选取，称为 每隔多少帧执行一次
        //取消动画的方式和interval、timeout一样，都有单独的方法，都有把返回值做参数
        a = window.requestAnimationFrame(animation);
    }
    // 先调用一次启动动画
    animation();
    var n = false;
    document.onclick = function () {
        //取消帧动画
        if (n == false) {
            n = true;
            window.cancelAnimationFrame(a);
        } else {
            n = false;
            a = window.requestAnimationFrame(animation);
        }
        
    }
</script>

3. cookie (这不是H5新特性，老早就有了，最多能存4k 的)

直接上封装的代码

;(function () {

    // 存储cookie
    function setCookie(key, value, day) {
        // 如果date存在，则需要设置过期时间
        // 如果不存在，则直接存储
        if (day == undefined) {
            document.cookie = (key + "=" + value);
        } else {
            // 需要处理过期时间
            var date = new Date();
            date.setDate(date.getDate() + day);
            document.cookie = (key +"="+ value +"; expires=" + date.toUTCString());
        }
    }


    // 取出cookie
    function getCookie(key) {
        // 创建空对象，目的是存储所有的键值对
        var obj = {};

        var cookies = document.cookie.split("; ");
        for (var item of cookies) {
            // 把每个元素根据 = 进行分割
            item = item.split('=');
            // 取出key值和value值分别赋值给obj对象
            obj[item[0]] = item[1];
        }

        return (key ? obj[key] : obj);
    }


    // 删除cookie
    function removeCookie(key) {
        setCookie(key, '', -1);
    }

    //清除
    function clearCookie(){
        for(var key in getCookie()){
            setCookie(key,'',-1);
        }
    }

    // 把局部函数交给window
    // 提升作用域
    window.setCookie = setCookie;
    window.getCookie = getCookie;
    window.removeCookie = removeCookie;
    window.clearCookie = clearCookie;

})();

4. 本地储存 sessionStorage 和 localStorage

• sessionStorage 定义：用户浏览某个网站的时候，进入网站到浏览器关闭所经过的时间，也就是用户在浏览这个网站所话费的时间； sessionStorage 为临时保存，如果新打开一个页面，或者关闭浏览器，那么这个sessionStorage 就消失了； 5M大小

• localStorage 定义：将数据保存在客户端本地的硬件设备中； 即使浏览器关闭，该数据仍然存在，下次打开浏览器访问网站时，仍然可以使用； localStorage 为永久保存； 5M大小。

优势：1).跨浏览器、解决请求头常带储存信息的问题、解决了4k大小的问题、解决了关系型储存的问题;
2).储存的内容：数组、json数据、图片、脚本、样式文件;

• 语法（这两个的语法差不多一样）

// 储存
sessionStorage.setItem(key, value);
localStorage.setItem(key,value);
// 读取
sessionStorage.getItem(key);
localStorage.getItem(key);
// 移除
sessionStorage.removeItem(key);
localStorage.removeItem(key);
// 清除
sessionStorage.clear();
localStorage.clear();

5. 离线缓存 manifest

• manifest 是一个同名后缀为manifest的文件，在文件中定义那些需要缓存的文件，支持manifest的浏览器，将会按照manifest文件的规则进行保存数据，从而在没有网络的情况下，也可以访问。

• 当第一次正确配置app cache后，再次访问该应用时，浏览器会首先检查manifest是否有变动，如果有变动，则把响应的变化更新下来，同时改变浏览器的app cache，如果没有变动，就会直接把app cache的资源返回。

• 使用：

1）、首先在html标签中增加一个manifest属性。用来指定当前页面的manifest文件。

<html manifest="manifest.manifest">
// manifest=后加manifest文件的地址。

2）、创建一个和html同名的manifest，然后给index.html文件添加属性，
3）、html文件设置完成后，后面去操作后缀为 manifest 文件
后缀为manifest文件中的写法示例： CACHE MANIFEST
#version 1.01
css/index.css
js/index.js
index.html