1. 程式人生 > >html5地理資訊與本地儲存

html5地理資訊與本地儲存

l地理位置

    •經度  :   南北極的連線線

    •緯度  :   東西連線的線

l位置資訊從何而來

    •IP地址

    •GPS全球定位系統

    •Wi-Fi無線網路

    •基站

l地理位置物件

    •navigator.geolocation

    – 單次定位請求  :getCurrentPosition

(請求成功,請求失敗,資料收集方式)

    –請求成功函式

    »經度 coords.longitude

    »緯度 coords.latitude

    »準確度 coords.accuracy

    »海拔 coords.altitude

    »海拔準確度 coords.altitudeAcuracy

    »行進方向

coords.heading

    »地面速度 coords.speed

    »時間戳 : new Date(position.timestamp)

l地理位置物件_2

    •navigator.geolocation

    – 請求失敗函式

    »失敗編號  :code

    »0  :  不包括其他錯誤編號中的錯誤

    »1  :  使用者拒絕瀏覽器獲取位置資訊

    »2  :  嘗試獲取使用者資訊,但失敗了

    »3  :   設定了timeout值,獲取位置超時了

    –資料收集 json的形式

    »enableHighAcuracy  :  更精確的查詢,預設false

    »timeout  :  獲取位置允許最長時間,預設infinity

    »maximumAge位置可以快取的最大時間,預設0

l地理位置物件_3

    •navigator.geolocation

    –多次定位請求  watchPosition(setInterval)

    »移動裝置有用,位置改變才會觸發

    »配置引數:frequency 更新的頻率

    –關閉更新請求  clearWatch(clearInterval)

l百度地圖API

    •<script src="http://api.map.baidu.com/api?v=1.3"></script>

    •建立基於地圖的應用

 

 

lCookie

    •資料儲存到計算機中,通過瀏覽器控制新增與刪除資料

lCookie的特點

    •儲存限制

    –域名100cookie,每組值大小4KB

    •客戶端、伺服器端,都會請求伺服器(頭資訊)

    •頁面間的cookie是共享

lStorage

    •sessionStorage

         –session臨時回話,從頁面開啟到頁面關閉的時間段

         –視窗的臨時儲存,頁面關閉,本地儲存消失

    •localStorage

        –永久儲存(可以手動刪除資料)

lStorage的特點

        •儲存量限制 ( 5M )

        •客戶端完成,不會請求伺服器處理

        •sessionStorage資料是不共享、 localStorage共享

lStorage API

    •setItem():

        –設定資料,key\value型別,型別都是字串

         –可以用獲取屬性的形式操作

    •getItem():

        –獲取資料,通過key來獲取到相應的value

   •removeItem():

        –刪除資料,通過key來刪除相應的value

    •clear():

        –刪除全部儲存的值

        •例子 儲存註冊資訊

lStorage API

    •儲存事件:

    –當資料有修改或刪除的情況下,就會觸發storage事件

    –在對資料進行改變的視窗物件上是不會觸發的

    –Key : 修改或刪除的key值,如果呼叫clear(),keynull

    –newValue  :  新設定的值,如果呼叫removeStorage(),keynull

     –oldValue呼叫改變前的value

    –storageArea : 當前的storage物件

    –url觸發該指令碼變化的文件的url

    –注:session同窗口才可以,例子:iframe操作

例子 :   同步購物車