来自 Web前端 2019-11-15 00:18 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

HTML5 新增内容

 1. 新增标签

  • 音频

  • 视频

  • 画板

    您的浏览器不支持canvas标签
    

  • 下拉菜单

  • 包含媒介资源的标题

    媒介的标题
    图片 1

  • 标题组

  • 表示标记文字

    我是一段文本标记

  • 拖动条

  • 度量条

    30%
  • 进度条

localStorage.clear();

4. 地理位置

<input type="button" id="btn"/>
<div id="box"></div>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    btn.onclick = function () {
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(success,error,options);
        }else{
            document.write("您的浏览器版本太低");
        }
    }
    function success(position){
        var weidu = position.coords.latitude;
        var jingdu = position.coords.longitude;
        box.innerHTML = "经度:" + jingdu + "纬度:" +weidu;
    }
    function error(error){
        switch (error.code){
            case error.PERMISSION_DENIED:
                box.innerHTML = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                box.innerHTML = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                box.innerHTML = "请求超时."
                break;
            case error.UNKNOWN_ERR:
                box.innerHTML = "An unknown error occurred."
                break;
        }
    }
</script>

 

用途:清除所有的key/value

3. 本地存储

注:cookie大概4k,本地存储大概5M

  • localStorage

    •   储存的值是永久保存,若用户不手动删除将长久存在

      //设置本地数据 localStorage.setItem("name","David"); localStorage.setItem("age",20); //删除一条数据 localStorage.removeItem("age"); //删除所有数据 localStorage.clear(); //获取本地数据 var result = localStorage.getItem("name"); console.log(result);

  • sessionStorage

    •   生命周期只存在浏览器打开时,关闭则失效

      //设置本地数据 sessionStorage.setItem("name","David"); sessionStorage.setItem("age",20); //删除一条数据 sessionStorage.removeItem("age"); //删除所有数据 sessionStorage.clear(); //获取本地数据 var result = sessionStorage.getItem("name"); console.log(result);


2. 音频与视频

  • 音频格式(audio元素支持三种音频格式)
  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis    
MP3    
Wav    
  • 视频格式(video元素支持三种视频格式)
  IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

  • audio 与 video 都有的三个属性
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮
height pixels 设置视频播放器的高度
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放
  • <video>的方法、属性及事件
方法 属性 事件
play() currentSrc play
pause() currentTime pause 
load() videoWidth progress
canPlayType() videoHeight error
  duration timeupdate 
  ended ended 
  error about 
  paused empty 
  muted emptied 
  seeking waiting 
  volume loadedmetadata 
  height  
  width  

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。


用法:.clear()

用途:将value存储到key字段

storage还提供了storage事件,当键值改变或者clear的时候,就可以触发storage事件,如下面的代码就添加了一个storage事件改变的监听:

用法:.getItem(key)

//或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }


用法:.setItem( key, value)

六、storage事件

代码如下:

}

4.clear

三、localStorage和sessionStorage操作


1.setlem

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁,因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

{



var key = storage.key(i);

}

var value = storage.getItem(key);

代码示例:

}

var value = sessionStorage.getItem("key");


web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:

for (var i=0, len = storage.length; i < len; i++)

用法:.removeItem(key)

localStorage.removeItem("site");

{

{

function handle_storage(e){

代码示例:

2.getItem

sessionStorage.clear();

removeItem删除key

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

来自http://www.jb51.net/html5/144597.html

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:HTML5 新增内容

关键词: