html5学习笔记三

html5 在客户端存贮数据

有两种方式：

1.localStorage没有时间限制的存储

示例代码如下：

<scripttype="text/javascript">

localStorage.lastname="yuezhenhua";

document.write(localStorage.lastname);

<script>

例如对用户访问页面的次数进行计数

2.sesionStorae针对一个session数据存储

<scripttype="text/javascript">

if(sessionStorage.pagecount){

sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;

}

else{

sessionStorage.pagecount=1;

}

document.write("Visits"+sessionStorage.pagecount+"time(s)thissession.");

</script>

html5表单

html5input类型

email

url

number

range

datepickers

search

color

示例代码如下：

E-mail:<inputtype="email"name="user_email"/>

Homepage:<inputtype="url"name="user_url"/>

Points:<inputtype="number"name="points"min="1"max="10"/>

Range:<inputtype="range"name="range"min="1"max="10"/>

month:<inputtype="month"name="user_month"/>

week:<inputtype="week"name="user_week"/>

time:<inputtype="time"name="user_time"/>

datetime:<inputtype="datetime"name="user_datetime"/>

datetime-local:<inputtype="datetime-local"name="user_local"/>

Date:<inputtype="date"name="user_date"/>

search:<inputtype="search"name="search"/>

新的表单元素

datalist规定输入域的选项列表,option属性必需设置值

<inputtype="url"list="url_list"name="link"/>

<datalistid="url_list">

<optionlabel="W3School"value="http://www.W3School.com.cn"/>

<optionlabel="Google"value="http://www.google.com"/>

<optionlabel="Microsoft"value="http://www.microsoft.com"/>

</datalist>

keygen提供一种验证用户的可靠方法

<formaction="demo_form.asp"method="get">

Username:<inputtype="text"name="usr_name"/>

Encryption:<keygenname="security"/>

<inputtype="submit"/>

output用于不同类型的输出

<outputid="result"onforminput="resCalc()"></output>