cookie：储存在用户本地终端上的数据；
var test=document.cookie; //cookie的获取
document.cookie = "username=909338280@qq.com;expires="+Date.toGMTString();
//cookie的创建 时间使用toGMTString()转化
当浏览器关闭时，cookie存储的内容会被清除。
sessionStorage:针对一个session的数据存储，浏览器不关闭，内容一直存在；
localStorage:没有时间限制的存储；
保存数据：localStorage.setItem('key','value');
读取数据：localStorage.getItem('key');
删除单个数据：localStorage.removeItem('key');
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
HTML5中的video
currentTime:设置属性值或者返回音频视频当前位置；（以秒计）
video自动播放指定位置
var video1;
window.onload = function () {
video1 = document.getElementById("video1");
//计时器
function getTime() {
localStorage.PlayTime = video1.currentTime; //播放时间=指定时间；
}
setInterval(getTime,500);
//打开的时候，获取本地的localStorage 一定确保这个值是存在的
if(localStorage.PlayTime != undefined && localStorage.PlayTime != null){
//在苹果的浏览器，localStorage的字符串给其他带有数字的参数的属性或者方法的时候，用字符串不一定适合.
video1.currentTime = parseInt(localStorage.PlayTime);
}
}
video事件：
video.play() 播放；
video.pause() 停止；
video.load() 重载;
HTML5 DOM知识拓展
document.querySelector("#id .class 标签名")，但只能获取第一个节点；
document.querySelectorAll("#id .class 标签名"),获取一个类型的选择器。
data-*自定义属性
1.第一种获取data自定义属性：
var p1 = document.querySelector("#p1");
var a = p1.getAttribute("data-user");
2.第二种获取data自定义属性方式：
var c = p1.dataset.user
关于canvas画布
标签定义图形，使用脚本来绘制图形。
使用JavaScript在网页上绘制图形。
canvas画布使用方法：
1.在body中定义canvas标签；
2.在JavaScript中获取节点；
3.通过getContext（）获取上下文，一般是getContext("2d");
4.如果需要画图，那么需要重新定义路线。每一个图都需要重新定义路线。ctx.beginPath();
5.如果要定义一个实心矩形：
ctx.fillRect(x,y,width,height);
fillStyle="color";
ctx.fill();
6.空心矩形：
ctx.fillRect(x,y,width,height);
ctx.stroke();
7.直线线条
定义开始路线：ctx.moveTo(50,50);//开始坐标
ctx.lineTo(150,50);//结束坐标
ctx.stroke(); //实现
8.绘制文字
实体文字：
ctx.font="字体大小，字体样式";
ctx.fillText("内容",坐标);
空心文字：
ctx.font="字体大小，字体样式";
ctx.strokeText("内容",坐标);
9.绘制一个圆
cxt.arc(50,50,50,0,Math.PI*2);
cxt.stroke();
10.创建径向渐变
var gar=cxt.createLinearGradient(120,120,120,240,240,250);
gar.addColorStop(0,'pink');
gar.addColorStop(1,'green');
cxt.fillStyle = gar;
cxt.fillRect(120,120,150,80);
11.把图片放在画布上
var img1=document.querySelector("#img1");
cxt.beginPath();
cxt.drawImage(img1,0,0);
12.鼠标在画布上移动
window.onload=function(){
var canvas1=document.querySelector("#canvas1");
var color=document.querySelector("#color");
var btn=document.querySelector("#btn1");
var ctx=canvas1.getContext("2d");
var kaiguan=false;
ctx.strokeStyle="#000000";
canvas1.onmousedown = function(event){
kaiguan = true;
ctx.beginPath();
var x=event.clientX;
var y=event.clientY;
ctx.moveTo(x,y);
}
canvas1.onmousemove=function(event){
if(kaiguan){
var x = event.clientX;
var y = event.clientY;
ctx.lineTo(x,y);
ctx.stroke();
}
}
canvas1.onmouseup = function(){
kaiguan=false;
}
color.onchange = function(){
ctx.strokeStyle=this.value;
}
btn.onclick=function(){
ctx.clearRect(0,0,600,600);
}
}
