html5本地存储及表单

一、htm5 form表单


html5 的form表单不同于html4，input标签写在form标签下面而不是内部。通过form的id="myForm" 和input的form="myForm"关联。


1.<input type="date"> -- 日期


2.<input type=time> -- 时间


3.<input type=month> -- 月份


4.<input type=week> --周


5.<input type="number" max=10 min=0 step=2 value="5"/> -- 显示数字，最大值10，最小值0，每次加减2，默认5。


6.<input placeholder="点击我会以清除"> -- placeholder输入框设置默认提示文本。


7.<input id=placeholder name=require1 required="required" form="myForm"> -- required 属性规定必需在提交之前填写输入字段。


8.<input name=require2 pattern="^[1-9]\d{5}$" form="myForm"> -- 自定义验证。


9.maxLength--属性设置输入框最大输入长度。


10.<input oninvalid="setCustomValidity('请输入')"/> -- oninvalid属性可设置自定义文字提示。


11.autofocus="true" -- 设置文本框自动获取焦点，一般用在第一个文本框。




二、ajax基础及执行流程


  流程：--判断浏览器的兼容问题
     --获取ajax核心对象
     --打开一个新的请求--数据：分别为请求方式、请求路径、请求类别：同步为false,异步为true
     --添加监听--监听器---ajax核心对象状态xhr.onreadystatechange=function(){}
     --//状态码来监听--xhr.status---服务器响应状态 ---200为响应正常，304为使用缓存，404为余姚访问的缓存未找到，500代表服务器遇到内部错误  
xhr.readyState---ajax状态码 4为响应结束，0表示还没发送请求，1表示开始发送，2表示请求完成，3表示开始读取服务器响应
    -- 响应成功返回数据，但返回的是Obj类型
    -- 需要使用eval()函数转化为字符串
    -- 最后xhr.send()发送请求。


//判断兼容
    function getXMLHttpRequest(){
        var xhr = null;
        if((typeof XMLHttpRequest) != 'undefined'){
            xhr = new XMLHttpRequest;
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHttp');
        }
        return xhr;
    }
    function func1() {
        //获取ajax核心对象
        var xhr = getXMLHttpRequest();
        //打开一个新的请求
        xhr.open('get','students.json',true);//分别为请求方式、请求路径，请求类别：同步为false,异步为true
        //添加一个监听器
         //监听器---ajax核心对象状态
        xhr.onreadystatechange=function(){
            //状态码来监听
            //xhr.status---服务器响应状态 ---200   xhr.readyState---ajax状态码 4
            if(xhr.status==200 && xhr.readyState==4){
                //响应成功
                var data=xhr.responseText;//返回的是OBj
                var stus=eval(data);//通过eval()函数，将Obj转化为字符串
                alert(stus[1].age);
            }
        }
        //发送请求
        xhr.send(null);
    }


三、cookie及localStorage的赋值、增、删、改


1、cookie
首先判断兼容

if(window.localStorage){
  alert('这个浏览器支持本地存储');
}else{
    alert('这个浏览器不支持本地存储');
}
赋值：document.cookie="userId=828 "
增加：document.cookie="userName=hulk"
修改：document.cookie="userName=aaa"通过新赋值覆盖前面的值
删除：为了删除一个cookie，可以将其过期时间设定为一个过去的时间
//获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-1000);
//将userId这个cookie删除   重置
document.cookie="userId=828; expire="+date.toGMTString();


取值：var cookies = document.cookie;cookies将取得全部的cookie的所有值，返回一个数组，通过遍历并通过split("")截取所需的值


设置cookie的过期时间：//获取当前时间
var date=new Date();
var expireDays=30;  //当用户再次登录刷新时间
//将date设置为10天以后的时间
date.setTime(date.getTime()+expireDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; expires="+date.toGMTString();




2.localStorage




 localStorage.removeItem("a")


赋值：localStorage.a = 3 ;//localStorage.setItem("b","isaac");
增加：localStorage.c = 3 ;
删除：localStorage.removeItem("c");//清楚c的值
修改： localStorage["a"] = "sfsf";将覆盖前面a的值
取值：var a1 = localStorage["a"];//获取a的值 || var a2 = localStorage.a;//获取a的值


localStorage.key(i)---取出所有key   localStorage.getItem( localStorage.key(i))--通过key取出所有value