html5学习笔记三

html5 在客户端存贮数据
     有两种方式：
      1.  localStorage 没有时间限制的存储
          示例代码如下：
              <script type="text/javascript">
                   localStorage.lastname="yuezhenhua";
                   document.write(localStorage.lastname);
              <script>
          例如对用户访问页面的次数进行计数
          
     
      2.  sesionStorae 针对一个session数据存储
        <script type="text/javascript">
            if (sessionStorage.pagecount) {
                sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
            }
            else {
                sessionStorage.pagecount = 1;
            }
            document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
        </script>
   


   html5 表单


      html5 input类型
        email
        url
        number
        range
        date pickers
        search
        color
        示例代码如下：
           E-mail: <input type="email" name="user_email" />
 Homepage: <input type="url" name="user_url" />
 Points: <input type="number" name="points" min="1" max="10" />
 Range: <input type="range" name="range" min="1" max="10" />  
 month: <input type="month" name="user_month" />
 week: <input type="week" name="user_week" />
 time: <input type="time" name="user_time" />
 datetime: <input type="datetime" name="user_datetime" />
 datetime-local: <input type="datetime-local" name="user_local" />
 Date: <input type="date" name="user_date" />  
 search: <input type="search" name="search" />
     新的表单元素
       datalist 规定输入域的选项列表 ,option属性必需设置值
        <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>


       keygen    提供一种验证用户的可靠方法
        <form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
       output    用于不同类型的输出
         <output id="result" onforminput="resCalc()"></output>