javascript
javascript中本地储存、离线缓存、地理定位、网络状态
本地儲存：
實際開發(fā)中某些內(nèi)容是不需要放到服務(wù)器中，而是放到了瀏覽器中，需要的時候可以快速的訪問，甚至頁面刷新也可能不會丟失數(shù)據(jù)，容量較大；這里介紹兩種數(shù)據(jù)存儲方式：sessionStorage約5M大小、localStorage約20M大小。其缺點是只能儲存字符串，因此要使用JSON.stringify()編譯后儲存。
1.window.sessionStrage：關(guān)閉瀏覽器窗口為一個生命周期，在同一個頁面下任何地方可以訪問此數(shù)據(jù)，以鍵值對的方式存儲數(shù)據(jù)。sessionStorage.setItem(key,value)存儲數(shù)據(jù)；sessionStorage.getItem(key)獲取某個鍵的值；sessionStorage.removeItem(key)移除某個鍵和值；sessionStorage.clear()清空所有的鍵值對，如：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><input type="text" placeholder='輸入key'><input type="text" placeholder='輸入value'><input type="button" value='儲存'><input type="button" value='刪除'><input type="button" value='清空'><p></p></body><script>var inputs = document.querySelectorAll('input');var p = document.querySelector('p');function getvalue() {p.innerHTML = sessionStorage.getItem(inputs[0].value);};inputs[2].addEventListener('click', function() {sessionStorage.setItem(inputs[0].value, inputs[1].value);getvalue();});inputs[3].addEventListener('click', function() {sessionStorage.removeItem(inputs[0].value);});inputs[4].addEventListener('click', function() {sessionStorage.clear();});</script></html>2.window.localStorage:生命周期永久（除非手動刪除），可以在多個頁面使用（同一瀏覽器下），以鍵值對形式儲存，localStorage.setItem(key,value)存儲數(shù)據(jù)；localStorage.getItem(key)獲取某個鍵的值；localStorage.removeItem(key)移除某個鍵和值；localStorage.clear()清空所有的鍵值對，如：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><input type="text" placeholder='輸入key'><input type="text" placeholder='輸入value'><input type="button" value='儲存'><input type="button" value='刪除'><input type="button" value='清空'><p></p></body><script>var inputs = document.querySelectorAll('input');var p = document.querySelector('p');function getvalue() {p.innerHTML = localStorage.getItem(inputs[0].value);};inputs[2].addEventListener('click', function() {localStorage.setItem(inputs[0].value, inputs[1].value);getvalue();});inputs[3].addEventListener('click', function() {localStorage.removeItem(inputs[0].value);});inputs[4].addEventListener('click', function() {localStorage.clear();});</script></html>離線緩存：
在html5中可以構(gòu)建一個離線應(yīng)用，其方法是創(chuàng)建一個cache manifest文件即可。其作用是將需要無網(wǎng)絡(luò)情況加載的資源緩存下來供離線使用，同時提升訪問速度來增加用戶體驗，減少請求提高性能。
緩存清單：一個以.appcache為后綴名的文件，用來配置緩存資源的，其文件格式如下：
1.頂行輸入： CACHE MANIFEST
2.CACHE： 此命令輸入后換行配置需要緩存的靜態(tài)資源，如圖片，代碼文件等，此命令可以省略，但是需要將資源寫在CACHE MANIFEST，同時可以指定多個CACHE。
3.NETWORK： 此命令輸入后換行配置需要在線訪問的資源。
4.FALLBACK： 此命令輸入后換行配置當(dāng)緩存的文件找不到時備用的資源。
CACHE MANIFEST#下面是配置需要緩存的資源：CACHE:./images/1.jpg./images/3.jpg./images/4.jpg./images/5.jpg#下面是配置需要網(wǎng)絡(luò)才可以加載的資源：NETWORK:./images/1.jpg./images/3.jpg#下面是當(dāng)資源請求失敗時需要替換的資源，前面是原資源 空格 需要替換的資源FALLBACK:./images/1.PNG ./images/2.PNG引入appcache文件：將appcache文件通過html標(biāo)簽配置到文件：
<html manifest="appcache文件的URL"></html>調(diào)試是否配置成功：chrome 可以通過chrome://appcache-internals/工具和離線（offline）模式來調(diào)試管理應(yīng)用緩存；在appache文件中#表示注釋，當(dāng)appache文件內(nèi)容發(fā)生改變或手動清除時，才會重新緩存。
geolocation地理定位：
在html5中增加了獲取地理定位的API，即基于位置的服務(wù)（Location Base Service）,由于國內(nèi)政策的影響，geolocation在使用的過程中會發(fā)生網(wǎng)絡(luò)阻塞，這個是無法避免的；
geolocation是navigator導(dǎo)航的一個屬性，若想要獲取定位，那么就得通過navigator調(diào)用geolocation屬性，geolocation屬性下面有兩個方法：getCurrentPosition()一次獲取當(dāng)前定位信息、watchPositionget(callback,callback)重復(fù)獲取定位信息；
這兩個方法都可以傳相同的三個參數(shù)，前兩個是回調(diào)函數(shù)作為參數(shù)，第一個回調(diào)函數(shù)表示獲取定位信息成功，第二個回調(diào)函數(shù)表示獲取地理位置失敗，第三個參數(shù)是一個可選的對象{timeout:10000,enableHighAccuracy:false,maximumAge:0}，timeout設(shè)置請求超時時間，enableHighAccuracy瀏覽器獲取高精度的位置，maximumAge在重復(fù)獲取地理位置是允許多久重新獲取一次，一般情況下都是不用考慮的。
注意：使用 watchPosition，瀏覽器多次調(diào)用請求成功的回調(diào)函數(shù)以便傳遞最新的位置。該函數(shù)返回一個watchID值，使用navigator.geolocation.clearWatch(watchId值)可以清除此次回調(diào)，使用不帶參數(shù)的navigator.geolocation.clearWatch()清除所有watchPosition回調(diào)
<script>if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(function(position) {// 獲取定位成功后執(zhí)行的回調(diào)函數(shù)：參數(shù)position為定位信息對象，其屬性coords為坐標(biāo)，coords有兩個屬性用來獲取經(jīng)緯度：var latitude = position.coords.latitude; //維度var longitude = position.coords.longitude; //經(jīng)度var accuracy = position.coords.accuracy; //精確度var altitude = position.coords.altitude; //高度var altitudeAccuracy = position.coords.altitudeAccuracy; //高度的精確度var heading = position.coords.heading; //相對于正北方運動的方向var speed = position.coords.speed; //運動的速度// 可以在下面調(diào)用定位運營商API，即下一節(jié)內(nèi)容：}, function(err) {// 獲取定位失敗后執(zhí)行的回調(diào)函數(shù)：switch (err.code) {case err.PERMISSION_DENIED:alert("獲取定位請求被拒絕");break;case err.POSITION_UNAVAILABLE:alert("無法獲取當(dāng)前位置");break;case err.TIMEOUT:alert("請求地理位置超時");break;case err.UNKNOWN_ERROR:alert("未知錯誤");break;};});}</script>在百度地圖上顯示定位：
通過上面的方法只能獲取到當(dāng)前位置的定位，若要想在某地圖上面顯示，還需要對某地圖進行配置，這里介紹百度地圖，如：
<script src="http://api.map.baidu.com/api?v=2.0&ak= 0A5bc3c4fb543c8f9bc54b77bc155724"></script><!-- 引入百度地圖javascript API --><script>var map = new BMap.Map("container"); // 創(chuàng)建百度地圖對象，里面的參數(shù)表示把此地圖創(chuàng)建到哪個容器var point = new BMap.Point(116.225350, 40.16999); // 創(chuàng)建百度地圖上面的目標(biāo)對象，并把經(jīng)度緯度傳給此對象map.centerAndZoom(point, 10); //默認(rèn)的比例，地圖的比例map.enableScrollWheelZoom(); //添加鼠標(biāo)滾動縮放// 以上代碼可以實現(xiàn)地圖定位效果，但是為了更清晰和實用可以添加一個圖標(biāo)在目標(biāo)位置、點擊獲取點擊處經(jīng)緯度var Icon = new BMap.Icon("1.png", new BMap.Size(128, 128)); // 定義一個圖標(biāo)var markers = new BMap.Marker(point, { // 將圖標(biāo)定位到目標(biāo)位置icon: Icon});map.addOverlay(markers);//點擊地圖打印坐標(biāo)：map.addEventListener("click", function(e) {// console.log(e);//這里的參數(shù)e是一個對象，里面包含很多相關(guān)屬性和方法console.log("經(jīng)度坐標(biāo)：" + e.point.lng + " 緯度坐標(biāo)：" + e.point.lat);});</script>文件讀取：
通過input輸入框type屬性為file的input輸入框可以拿到文件，此時需要通過變量接收這個文件，之后通過onchange事件觸發(fā)事件處理函數(shù)，事件處理函數(shù)中國可以new FileReader()實例化一個文件對象，其方法readAsDataURL()為加載文件，括號里面?zhèn)魅氲氖俏募?#xff0c;如下案例：
<script>var img = document.querySelector('img');var inputs = document.querySelector('input');// 當(dāng)選擇框有文件被選中時觸發(fā)事件函數(shù)：inputs.onchange = function() {var files = new FileReader(); //創(chuàng)建一個文件對象// 給這個對象傳入一個文件：files.readAsDataURL(this.files[0]); //這里this指files這個對象，files屬性是所有拿到的文件，通過下標(biāo)可以拿到具體的文件// 當(dāng)文件加載完成時執(zhí)行的函數(shù)：files.onload = function() {img.src = this.result; //this.result是一個讀取完成后的base64位的數(shù)據(jù)};};</script>網(wǎng)絡(luò)狀態(tài)：
window.navigator.onLine可以返回一個布爾值表示當(dāng)前網(wǎng)絡(luò)的狀態(tài)；window有兩個關(guān)于網(wǎng)絡(luò)的事件：online表示在線，offline表示離線，這兩個事件監(jiān)聽的是網(wǎng)線連接或斷開的狀態(tài)。
<script>console.log(window.navigator.onLine);//true,以布爾值的方式表示網(wǎng)絡(luò)狀態(tài)，true表示聯(lián)網(wǎng)，false表示斷網(wǎng)window.online = function() {console.log('在線')};window.offline = function() {console.log('離線')};</script>提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。
筆者：苦海
總結(jié)
以上是生活随笔為你收集整理的javascript中本地储存、离线缓存、地理定位、网络状态的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript中BOM介绍、屏幕尺
- 下一篇： Linux6.8 ssh开启,CentO