H5C3 學習(五) ----HTML5-API 網絡狀態,地理位置,web存儲,自定義播放器,文件讀取,拖拽

HTML5-API 

一.網絡狀態

在移動端，我們經常需要檢測設置是在線還是離線，HTML5爲此定義了一個navigator.onLine屬性，這個屬性用於檢測設備是否聯網。navigator.onLine 在不同瀏覽器中有細微的差別。

1.網絡狀態

navigator.onLine返回用戶當前的網絡狀況，是一個布爾值
1. 如果瀏覽器連不上網(包括局域網)，就是離線狀態，也就是脫機狀態，會返回false
2. 否則就是在線狀態，返回true

注意：返回true不一定就是說一定能訪問互聯網，因爲有可能連接的是局域網。但是返回false則表示一定連不上網。

2.監聽網絡變化

爲了更好的確定網絡是否連接，HTML5還定義了兩個事件，用於監聽網絡狀態的變化。

//網絡連接時會被調用
window.addEventListener("online", function () {
    alert("online");
});
//網絡斷開時會被調用
window.addEventListener("offline", function () {
    alert("offline");
});

二.地理位置

在HTML規範中，增加了獲取用戶地理信息的API，這樣使得我們可以基於用戶位置開發互聯網應用，即基於位置服務LBS(Location Base Service)

1.隱私

HTML5規範提供了一套保護用戶隱私的機制。必須先得到用戶明確許可，才能獲取用戶的位置信息。在獲取地理位置之前，會詢問用戶，只有在獲得許可之後，才能獲取到用戶的位置信息。

2.相關的方法

//successCallback:獲取成功後會調用,並返回一個position對象，裏面包含了地理位置信息
//獲取失敗了會調用，並返回error對象，裏面包含了錯誤信息。
//獲取當前的地理位置信息
navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
//重複的獲取當前的地理位置信息
navigator.geolocation.watchPosition(successCallback, errorCallback)

實例：

navigator.geolocation.getCurrentPosition(function(position){
    // 定位成功會調用該方法
    // position.coords.latitude 緯度
    // position.coords.longitude 經度
    // position.coords.accuracy 精度
    // position.coords.altitude 海拔高度
}, function(error){
    // 定位失敗會調用該方法
    // error 是錯誤信息
});

在iOS 10中，蘋果對webkit定位權限進行了修改，所有定位請求的頁面必須是https協議的。

3.百度地圖

僅僅獲取到經緯度對於用戶來說意義並不大，因爲用戶也不知道經度和緯度表示的是地球上的哪一個地方，因爲我們可以結合百度地圖，準確的將用戶的位置顯示出來。

百度地圖官網：http://lbsyun.baidu.com/

1. 在開發中，找到javascript API
2. 直接查看示例demo
3. 複製相應的代碼，替換掉祕鑰就行，祕鑰只需創建一個新的應用就可以了。

三.web存儲

在代碼執行的時候，數據都是存儲在內存中的，當頁面關閉或者瀏覽器關閉的時候，內存就被釋放掉了。數據只有存儲在硬盤上，纔不會被釋放。

//存儲在內存中，會被釋放
    var str = "hello world";
    console.log(str);
​
    //存儲在硬盤上，不會被釋放
    localStorage.setItem("name", "張三");
    console.log(localStorage.getItem("name"));

1.cookie(瞭解)

傳統方式，我們以document.cookie進行存儲，但是存儲起來特別麻煩，並且，存儲大小隻有4k，常用來做自動登錄，即存儲用戶的賬號和密碼信息。每次請求都會帶上cookie

【02-cookie存儲.html】cookie是以字符串形式存在的，這個字符串有固定的格式：key=value;key1=value1;

在獲取cookie內容時，一般需要通過正則或者字符串的方法進行處理，轉換成對象，最終得到數據。

document.cookie = "name=zhangsan";
document.cookie = "age=18";
document.cookie = "sex=23";
​
//讀取cookie
var result = document.cookie;
console.log(result);

使用原生js操作cookie太過麻煩，尤其是cookie的獲取和刪除操作，使用jquery.cookie插件，能夠簡化我們的操作。

【03-cookie存儲（jquery插件）.html】

//設置cookie
$.cookie("name", "zs");
//獲取cookie
console.log($.cookie("name"));
//刪除cookie
$.removeCookie("name");

使用cookie：操作太麻煩，最多隻能存儲4k ,每次請求都會帶上cookie，所以用戶名和密碼、還有sessionID會存儲在cookie中

2.sessionStorage與localStorage

HTML5規範提出瞭解決方案，使用sessionStorage和localStorage存儲數據。設置、讀取、刪除操作很方便

window.sessionStorage的特點

1. 聲明週期爲關閉瀏覽器窗口
2. 不能在多個窗口下共享數據。
3. 大小爲5M

window.localStorage的特點

1. 永久生效，除非手動刪除
2. 可以多個窗口共享
3. 大小爲20M

window.sessionStorage與window.localStorage的方法

setItem(key, value) //設置存儲內容
getItem(key) //讀取存儲內容
removeItem(key) //刪除鍵值爲key的存儲內容
clear() //清空所有存儲內容
key(n) //以索引值來獲取存儲內容

【04-sessionStorage與localStorage的用法.html】

【05-案例-換膚效果.html】

面試題：請描述一下cookies，sessionStorage和localStorage的區別？

 

四.自定義播放器

全屏切換API：

video.requestFullScreen()

方法：load()、play()、pause()屬性：

currentTime:當前時間
duration：總長時間
timeupdate:播放進度更改時觸發
volume：控制音量

參考文檔http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

主要目的是練習一下video的屬性和方法，還有之前我們學過的js

推薦網站：https://www.awesomes.cn/

五.文件讀取

通過FileReader對象我們可以讀取本地存儲的文件，可以使用 File 對象來指定所要讀取的文件或數據。其中File對象可以是來自用戶在一個<input>元素上選擇文件後返回的FileList 對象，也可以來自由拖放操作生成的 DataTransfer

1.files

對於file類型的input框，在這個DOM對象中，存在一個files屬性，這個屬性是FileList對象，是一個僞數組，裏面存儲着上傳的所有文件，當input框指定了multiple屬性之後，就可以上傳多個文件了。

也就是說，通過files這個屬性，我們就可以獲取到所有上傳的文件。

2.file對象

File對象中包含了文件的最後修改時間、文件名、文件類型等信息。

3.FileReader對象

FileReader是一個HTML5新增的對象，用於讀取文件。

//創建一個fileReader對象
var fr = new FileReader;
//讀取文件的兩個方法
//readAsText() 以文本的方式讀取文件 ,文本文件
//readAsDataURL() 以DataURL形式讀取文件，圖片，視頻
//文件讀取完成事件：
fr.onload = function(){}
//當文件讀取完成，可以通過result屬性獲取結果
fr.result

參考資料：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc

案例：

var file = document.getElementById("file");
    var box = document.getElementById("box");
​
    file.addEventListener("change", function () {
        console.dir(file);
        
        //files:裏面存儲了所有上傳的文件
        //這個data就是我們上傳的那個文件
        var data = file.files[0]
      
        //1. 創建一個文件讀取器
        var fr = new FileReader();
​
        //2. 讓文件讀取器讀取整個文件
        fr.readAsDataURL(data);
​
        //3. 等待文件讀取完
        //onload：文件讀取完成後，就會觸發
        fr.onload = function () {
            var img = document.createElement("img");
            img.src = fr.result;
            box.innerHTML = "";
            box.appendChild(img);
        }
    });

五.拖拽

在HTML5的規範中，我們可以通過爲元素增加draggable="true"來設置此元素是否可以進行拖拽操作，其中圖片、鏈接默認是開啓的。

1.拖拽元素

頁面中設置了draggable="true"屬性的元素，其中<img>、<a>標籤默認是可以被拖拽的

2.目標元素

頁面中任何一個元素都可以成爲目標元素

3.事件監聽

根據元素類型不同，需要設置不同的事件監聽