【重溫基礎】17.WebAPI介紹

pingan8787發表於2019-02-16
WebAPI

本文是 重溫基礎 系列文章的第十七篇。 今日感受：挑戰。

系列目錄：

本章節複習的是JS中的關於WebAPI相關知識，介紹的API比較多。

前置知識：
需要了解 JS 物件 的相關知識。

1.WebAPI介紹

API：應用程式介面，是基於程式語言構建的結構，使開發人員更容易地建立複雜的功能。它們抽象了複雜的程式碼，並提供一些簡單的介面規則直接使用。

客戶端JavaScript提供很多可用的API，他們本身不是JavaScript語言的一部分，卻建立在JavaScript語言核心的頂部，為使用JavaScript程式碼提供額外的超強能力。他們通常分為兩類：

  • 瀏覽器API：
    內建於Web瀏覽器，可以從瀏覽器和電腦周圍環境獲取資料，並用於複雜的操作。例如Geolocation API提供了一些簡單的JavaScript結構來獲取位置資料，這種API通常抽象很多複雜邏輯，我們只要呼叫API即可。

  • 第三方API：
    預設情況下不會內建於瀏覽器，而必須在Wen中某個地方獲取程式碼和資訊，例如Twitter API可以推送最新推文給我們，它提供一系列第三方API讓我們獲取Twitter的服務和資訊。

1.1 API如何工作

那麼，這些API是如何工作的？
不同的JavaScript的API工作內容不同，但具有以下幾個相同點：

  1. 都是基於物件
    API通過使用一個或多個JavaScript物件與我們的程式碼互動，這些物件作為API使用的資料（包含在物件屬性中）的容器，和API提供的功能（包含在物件的方法中）。
    如Geolocation API則是由以下幾個物件組成：
  • Geolocation, 包含三種控制地理資料檢索的方法。
  • Position, 表示在給定的時間的相關裝置的位置。它包含一個當前位置的Coordinates 物件。還包含了一個時間戳,這個時間戳表示獲取到位置的時間。
  • Coordinates,包含有關裝置位置的大量有用資料，包括經緯度，高度，運動速度和運動方向等。

通常這麼使用：

navigator.geolocation.getCurrentPosition(function(options){
    // ... do something
});
複製程式碼
  1. 都有可識別的入口點 即API的入口位置，如Geolocation API的入口在Navigator.geolocation 屬性, 它返回瀏覽器的 Geolocation 物件，所有有用的地理定位方法都可用。
    在**文件物件模型(DOM)**的API入口位置更簡單，常常都掛載在Document物件上，或者HTML元素上：
let a = document.createElement('div');// 建立一個新的div元素
let b = document.querySelector('div');// 獲取一個已經存在的div元素
a.textContent = "hi leo!";  // 給a元素設定文字
b.appendChild(a);           // 將a元素新增到b元素下
// <div>hi leo!</div>
複製程式碼

詳細的後面介紹。

  1. 都使用事件來處理狀態的變化 有些特定的API會包含一些事件，當事件觸發，我們便可以執行函式的處理屬性，做一些不同的操作。例如XMLHttpRequest物件的例項，有很多的事件可以呼叫。
// 簡單寫
const url = "https://www.baidu.com";
const req = new XMLHttpRequest();
req.open('GET', url);
req.responseType = "json";
req.send();
req.onload = function(){
    // ... do something
}
複製程式碼
  1. 都會在適當位置提供額外的安全機制 主要還是處於安全考慮，提供額外的安全機制，比如常見同源策略，一些特定頁面只能在https協議的網頁工作等。

接下來看看這些API都能實現什麼作用。

2.文件API

我們在開發web頁面和應用時，就會經常操作頁面文件的結構，這裡就會大量用到document物件，控制HTML和樣式資訊的文件物件模型（DOM）。
下面貼一張web頁面檢視中的瀏覽器的主要部分（來源MDN）：

瀏覽器

介紹：

  • window：是載入瀏覽器的標籤，JavaScript中用Window物件表示，可以實現很多操作：獲取視窗大小，操作載入視窗的文件，儲存文件資料等。
  • navigator：瀏覽器存在web上的狀態和表示（即使用者代理），JavaScript中用Navigator物件表示，用於獲取物件的一些資訊，如：攝像頭的地理資訊，使用者偏愛的語言等。
  • document：是實際載入視窗的頁面，JavaScript中用Document物件表示，可以實現很多文件操作：獲取DOM元素，修改文字內容，設定新樣式等。

2.1 文件物件模型(DOM)

在瀏覽器標籤中當前載入的文件用文件物件模型(Document Object Model，簡稱DOM)表示。
這是一個由瀏覽器生成的“樹結構”，使得程式語言可以很容易訪問HTML結構，操作等。

下面是基本的DOM操作：

let a = document.createElement('a');// 1. 建立一個新的a元素
let b = document.querySelector('a');// 2. 獲取一個已經存在的a元素
a.textContent = "進入pingan8787部落格";  // 3. 給a元素設定文字
a.href = "http://www.pingan8787.com"; // 4. 給a元素新增跳轉地址
a.style.color = "red";                // 5. 給a元素新增樣式
a.style.backgroundColor = "black";
a.setAttribute("my_class");    // 6. 給a元素新增class類名
b.appendChild(a);              // 7. 將a元素新增到b元素下
複製程式碼

這麼一個簡單的例子，實際可以看出DOM提供的方法很多，下面分類介紹下這些方法：

  1. DOM HTML操作
  • 改變HTML輸出流：
    通過document.write()直接修改HTML輸出流寫內容。
document.write("hello leo");
複製程式碼

**注意：**千萬不要在文件載入之後使用，否則覆蓋文件。

  • 改變HTML內容：
    通過innerHTML屬性來改變HTML元素的內容：
document.getElementById(id).innerHTML = new HTML;
// 通過ID獲取  （getElementById）
// 通過name屬性（getElementsByName）
// 通過標籤名  （getElementsByTagName）
// 通過類名    （getElementsByClassName）
// 獲取html的方法 （document.documentElement）
// 獲取body的方法 （document.body）
// 通過選擇器獲取一個元素（querySelector）
// 通過選擇器獲取一組元素（querySelectorAll）
複製程式碼

例子：

document.getElementById("id1").innerHTML = "hello leo!"
複製程式碼
  • 改變HTML屬性：
    通過attribute屬性來改變元素的屬性：
document.getElementById(id).attribute = new value
複製程式碼

例子：

<img id = "id1" src ="a.jpg">
複製程式碼
document.getElementById("id1").src = "leo.png";
複製程式碼

詳細的文件可以檢視HTML DOM Document 物件

  1. DOM CSS操作
  • 改變HTML樣式
    通過style.styleName屬性修改元素的樣式：
document.getElementById(id).style.property = new style;
複製程式碼

例子：

document.getElementById("id1").style.color = "red";
document.getElementById("id1").style.backgroundColor = "green";
複製程式碼

注意：style後面的樣式的屬性名只能使用命名小駝峰。

  1. DOM 事件操作
    如要對元素做點選事件的繫結，可以在HTML的onclick事件屬性上繫結方法：
<div onclick="fun()"></div>
<div onclick="fun(prams)"></div>
複製程式碼

另外可以繫結的事件型別還有很多：

<div onload="fun()"></div>
<div onchange="fun()"></div>
<div onmouseover="fun()"></div>
<div onmousedown="fun()"></div>
複製程式碼

詳細的文件可以檢視HTML DOM Event 物件

  1. DOM 節點操作
  • 建立新的HTML元素
    需要先建立一個新元素節點，然後在使用appendChild方法，向一個已存在的元素上追加這個新元素：
<div id = "id1"></div>
複製程式碼
// 建立新元素節點
let a = document.createElement('p');
let b = document.createTextNode('新的文字');
a.appendChild(b);

// 獲取已存在元素
let div = document.getElementById('id1');

// 追加新元素
div.appendChild(a);
複製程式碼
  • 刪除已有的HTML元素
    如果需要刪除HTML元素，就必須先獲得該元素的父元素，再使用removeChild方法刪除：
<div id = "id1">
    <p id = "id2">hello leo</p>
</div>
複製程式碼
let a = document.getElementById("id1");
let b = document.getElementById("id2");
a.removeChild(b);
複製程式碼

2.2 Window物件

Window 物件表示瀏覽器中開啟的視窗。
Window 物件涉及到的屬性和方法非常多，具體可以檢視 Window 物件 比較詳細。
這裡一個簡單的例子，實現獲取視窗（顯示文件的內部視窗）的寬高，並設定給指定的Div元素，並且當我們調整視窗時候，也會及時改變Div的寬高。

let div = document.querySelector('div');
// 獲取寬高
let w = window.innerWidth;
let h = window.innerHeight;
// 設定寬高
div.style.width = w + 'px';
div.style.heitgh = h + 'px';
// 設定及時調整div寬高
window.onresize = function(){
    w = window.innerWidth;
    h = window.innerHeight;
    div.style.width = w + 'px';
    div.style.heitgh = h + 'px';
}
複製程式碼

3.獲取伺服器資料API

這一部分主要複習Ajax（全稱：Asynchronous JavaScript and XML）。
Ajax主要要解決的問題是：避免重複載入重新整理整個頁面，因為有時候我們只是小部分資料更新，這時候我們這要重新整理這部分的資料，而不是整個頁面。
Ajax不是新的程式語言，而是一種使用現有標準的新方法。

下面看一下Ajax模型圖：

Ajax模型

Ajax模型包括使用Web API作為代理來更智慧地請求資料，而不僅僅是讓瀏覽器重新載入整個頁面。讓我們來思考這個意義：
比如：我們逛淘寶，搜尋或開啟商品頁面時，頂部導航來和頁首頁尾等，都保持不變。
這樣做的好處：

  • 頁面更新更快，減少等待重新整理，體驗更好，響應更快。
  • 下載的資料更少，減少頻寬的浪費。

另外為了提高載入速度，網站有時候也會將首次請求和資料儲存在使用者計算機中，下次再請求就直接先使用本地版本，如果內容有更新才會去伺服器獲取新資料，原理圖：

儲存和獲取新資料

3.1 Ajax基礎使用

XMLHttpRequest 是 AJAX 的基礎。 所有現代瀏覽器均支援 XMLHttpRequest 物件（IE5 和 IE6 使用 ActiveXObject）。

建立 XMLHttpRequest 物件的語法：

variable=new XMLHttpRequest();
// IE5 和 IE使用 ActiveX 物件：
variable=new ActiveXObject("Microsoft.XMLHTTP");
複製程式碼

為了相容所有瀏覽器（包括IE5 IE6），我們就必須檢查瀏覽器是否支援XMLHttpRequest物件，若支援則建立XMLHttpRequest物件，否則建立ActiveXObject物件。

let my_http;
if (window.XMLHttpRequest){
    // 非 ES5 ES6
    my_http=new XMLHttpRequest();
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        // 網路請求成功後，執行的操作
    }
  }
}else{
    // ES5 ES6
    my_http=new ActiveXObject("Microsoft.XMLHTTP");
}
複製程式碼

3.2 Ajax傳送請求

向伺服器傳送請求時，我們可以使用 XMLHttpRequest 物件的 open() 和 send() 方法：

my_http.open(method,url,async);  
my_http.send(string);
複製程式碼

引數解釋：
open(method,url,async)方法接收三個引數：

  • method：請求的型別；GET 或 POST。
  • url：檔案在伺服器上的位置。
  • async：true（非同步）或 false（同步）。

send(string)方法接收一個引數：

  • string：僅用於 POST 請求。

例子：

// GET
my_http.open("GET","http://www.baidu.com",true);
my_http.send();

// POST
my_http.open("POST","http://www.baidu.com",true);
my_http.setRequestHeader(
    "Content-type",
    "application/x-www-form-urlencoded"
);  // 新增 HTTP 頭
my_http.send("name=leo");
複製程式碼

如果POST請求的話需要設定HTTP頭：

setRequestHeader(header,value)
複製程式碼

引數解釋：
setRequestHeader(header,value)方法接收兩個引數：

  • header: 規定頭的名稱。
  • value: 規定頭的值。

3.3 Ajax伺服器響應

接收伺服器響應，我們可以使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性。

  • responseText：獲得字串形式的響應資料。

  • responseXML：獲得 XML 形式的響應資料。

  • responseText屬性 當服務端的響應不是XML，使用responseText屬性。
    若是字串的響應就可以直接使用。

document.getElementById("id1").inndeHTML = my_http.responseText;
複製程式碼

3.4 Ajax readyState

readyState儲存著XMLHttpRequest物件的狀態。
我們傳送Ajax請求的整個過程中，XMLHttpRequest物件的readyState會改變，當readyState改變的時候會觸發onreadystatechange事件。

XMLHttpRequest物件的三個重要屬性：

屬性 描述
onreadystatechange 儲存函式（或函式名），每當 readyState 屬性改變時，就會呼叫該函式。
readyState 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。0（請求未初始化），1（伺服器連線已建立），2（請求已接收），3（請求處理中），4（請求已完成，且響應已就緒）
status 200（"OK"），404（未找到頁面）

通常我們會在readyState等於4且status等於200時候表示響應已就緒，可以執行業務操作：

if (xmlhttp.readyState==4 && xmlhttp.status==200){
    // 網路請求成功後，執行的操作
}
複製程式碼

4.圖形繪製API

這裡主要介紹的是HTML5新增的canvas元素，JavaScript為canvas新增了很多API，進一步增強canvas。
canvas 元素可以通過JavaScript指令碼，在網頁上繪製圖形。
比如,它可以被用來繪製圖形,製作圖片集合,甚至用來實現動畫效果。你可以(也應該)在元素標籤內寫入可提供替代的的程式碼內容，這些內容將會在在舊的、不支援canvas元素的瀏覽器或是禁用了JavaScript的瀏覽器內渲染並展現。

詳細完整的課程推薦：

  1. MDN Canvas教程
  2. W3C HTML5 Canvas

下面複習一下canvas的一個使用流程：

4.1 簡單繪製

  1. 建立畫布，規定元素id、寬度和高度

要在網頁中建立 2D 或者 3D 場景，必須在 HTML 檔案中插入一個canvas元素，以界定網頁中的繪圖區域。

<canvas id="id1" width="200" height="100">
    臥槽你的瀏覽器竟然不支援 canvas！
</canvas>
複製程式碼

在canvas標籤內，寫一些瀏覽器不支援畫布功能時候的提示內容。
畫布預設尺寸為 300 × 150 畫素。

  1. 獲取畫布上下文，並完成設定

我們需要獲得一個對繪畫區域的特殊的引用（稱為“上下文”）用來在畫布上繪圖。可通過 HTMLCanvasElement.getContext() 方法獲得基礎的繪畫功能，需要提供一個字串引數來表示所需上下文的型別。
下面建立一個2d畫布：

let ctx = canvas.getContext("2d");
複製程式碼

ctx 變數包含一個 CanvasRenderingContext2D 物件，畫布上所有繪畫操作都會涉及到這個物件。
下面將畫布背景塗黑：

ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, 200, 100);
複製程式碼

4.2 繪製基礎

首先需要知道一些2D畫布的知識，畫布左上角的座標是(0, 0)，橫座標（x）軸向右延伸，縱座標（y）軸向下延伸。

2D畫布

  1. 繪製實線
ctx.lineTo(100,50);  // 繪製目標座標
ctx.lineWidth = 5;   // 線條寬度
ctx.stroke();  // 繪製實線
複製程式碼
  1. 繪製矩形
    fillRect(x, y, width, height) 繪製一個填充的矩形
    strokeRect(x, y, width, height) 繪製一個矩形的邊框
    clearRect(x, y, width, height) 清除指定矩形區域，讓清除部分完全透明。
    x與y指定了在canvas畫布上所繪製的矩形的左上角（相對於原點）的座標。
    width和height設定矩形的尺寸。
// 實心矩形
ctx.fillStyle = 'rgb(255, 0, 0)'; // 矩形顏色
ctx.fillRect(50, 50, 100, 150);   // 矩形起止座標

// 空心矩形
ctx.strokeStyle = 'rgb(255, 255, 255)';// 矩形邊框顏色
ctx.strokeRect(25, 25, 175, 200);// 矩形起止座標
複製程式碼
  1. 繪製路徑 可以通過路徑來實現複雜的圖形，下面整理了一些常用到的方法：
  • beginPath()：在畫筆當前所在位置開始繪製一條路徑。在新的畫布中，畫筆起始位置為 (0, 0)。
  • moveTo()：將畫筆移動至另一個座標點，不記錄、不留痕跡，只將畫筆“跳”至新位置。
  • fill()：通過為當前所繪製路徑的區域填充顏色來繪製一個新的填充形狀。
  • stroke()：通過為當前繪製路徑的區域描邊，來繪製一個只有邊框的形狀。
  • 路徑也可和矩形一樣使用 lineWidth 和 fillStyle / strokeStyle 等功能。
ctx.fillStyle = 'rgb(255, 0, 0)'; // 設定填充顏色
ctx.beginPath();      // 開始
ctx.moveTo(50, 50);   // 移動到結束點的座標
// .. 可以在到處移動
ctx.fill();           // 繪製
複製程式碼
  1. 繪製圓形
    arc(x, y, radius, startAngle, endAngle, anticlockwise) 畫一個以（x,y）為圓心的以radius為半徑的圓弧（圓），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（預設為順時針）來生成。
    arcTo(x1, y1, x2, y2, radius) 根據給定的控制點和半徑畫一段圓弧，再以直線連線兩個控制點。

arc方法，該方法有六個引數：

  • x,y為繪製圓弧所在圓上的圓心座標。
  • radius為半徑。
  • startAngle以及endAngle引數用弧度定義了開始以及結束的弧度。
  • anticlockwise是布林值，為true時，是逆時針方向，否則順時針方向。
    這些都是以x軸為基準。

注意：arc()函式中表示角的單位是弧度，不是角度。角度與弧度的js表示式:
弧度=(Math.PI/180)*角度。

cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
複製程式碼
  1. 繪製文字
    fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文字，繪製的最大寬度是可選的.
    strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置繪製文字邊框，繪製的最大寬度是可選的.
ctx.strokeStyle = 'white';
ctx.lineWidth = 1;
ctx.font = '36px arial';
ctx.strokeText('hello leo !', 50, 50);

ctx.fillStyle = 'red';
ctx.font = '48px georgia';
ctx.fillText('hello leo !', 50, 150);
複製程式碼

另外還有一些有樣式的文字，可以使用這些屬性：

  • font = value 當前繪製的文字字型.預設是 10px sans-serif。
  • textAlign = value 文字對齊選項. 可選的值包括：start, end, left, right or center. 預設值是 start。
  • textBaseline = value 基線對齊選項. 可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。預設值是 alphabetic。
  • direction = value 文字方向。可能的值包括：ltr, rtl, inherit。預設值是 inherit。
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello leo ", 0, 100);
複製程式碼
  1. 繪製圖片
  • drawImage(image, x, y) 其中 image 是 image 或者 canvas 物件，x 和 y 是其在目標 canvas 裡的起始座標。
let img = new Image();
img.src = "leo.png";
img.onload = function(){
    ctx.drawImage(img, 50, 50);
};
複製程式碼

drawImage方法還有更多引數：

ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);
複製程式碼
  • 第一個引數不變，為圖片引用。
  • 引數 2、3 表示裁切部分左上頂點的座標，參考原點為原圖片本身左上角的座標。原圖片在該座標左、上的部分均不會繪製出來。
  • 引數 4、5 表示裁切部分的長、寬。
  • 引數 6、7 表示裁切部分左上頂點在畫布中的位置座標，參考原點為畫布左上頂點。
  • 引數 8、9 表示裁切部分在畫布中繪製的長、寬。本例中繪製時與裁切時面積相同，你也可以定製繪製的尺寸。

詳細完整的課程推薦：

  1. MDN Canvas教程
  2. W3C HTML5 Canvas

5.視訊音訊API

HTML5提供了用於文件中嵌入富媒體的元素<video>和<audio>標籤，通過元素自帶的API來控制視訊和音訊的播放搜尋等。

<video>
  <source src="1.mp4" type="video/mp4">
  <source src="2.webm" type="video/webm">
  <a href="3.mp4">開啟mp4</a> 
</video>
複製程式碼

5.1 視訊

當前，video 元素支援三種視訊格式：Ogg/MPEG4和WebM。
簡單使用：

<video src="1.ogg" controls="controls"> </video>
<video src="1.ogg" controls="controls" width="320" height="240"> </video>
複製程式碼

連線不同視訊：

<video width="320" height="240" controls="controls">
    <source src="1.ogg" type="video/ogg">
    <source src="2.mp4" type="video/mp4">
    您的瀏覽器不支援！
</video>
複製程式碼

<video> 與 </video> 之間插入的內容是供不支援 video 元素的瀏覽器顯示的。
<video> 標籤的屬性：

屬性 描述
autoplay 視訊在就緒後馬上播放
controls 向使用者顯示控制元件，比如播放按鈕
height 設定視訊播放器的高度
width 設定視訊播放器的寬度
src 要播放的視訊的 URL
preload 視訊在頁面載入時進行載入，並預備播放，如果使用 "autoplay"，則忽略該屬性
loop 當媒介檔案完成播放後再次開始播放

另外我們可以為視訊建立簡單的播放/暫停和調整尺寸的控制元件，這裡需要使用play()和 pause() 還有兩個屬性：paused 和 width。
更多方法可以檢視 HTML5 video - 方法、屬性以及事件

5.2 音訊

audio 元素能夠播放聲音檔案或者音訊流。
當前，audio 元素支援三種視訊格式：Ogg Vorbis/MP3和Wav。
簡單使用：

<audio src="1.ogg" controls="controls"></audio>
複製程式碼

control 屬性供新增播放、暫停和音量控制元件。
<audio> 與 </audio> 之間插入的內容是供不支援 audio 元素的瀏覽器顯示的。
連線不同音訊：

<audio controls="controls">
    <source src="1.ogg" type="audio/ogg">
    <source src="2.mp3" type="audio/mpeg">
    您的瀏覽器不支援！
</audio>
複製程式碼

<audio> 標籤的屬性：

屬性 描述
autoplay 視訊在就緒後馬上播放
controls 向使用者顯示控制元件，比如播放按鈕
src 要播放的視訊的 URL
preload 視訊在頁面載入時進行載入，並預備播放，如果使用 "autoplay"，則忽略該屬性
loop 當媒介檔案完成播放後再次開始播放

6.客戶端儲存API

現代web瀏覽器會提供一些在客戶端儲存使用者資料的方法，只要使用者允許，可以隨時取出使用。
使用客戶端儲存API可以儲存的資料量是優先的，具體取決於瀏覽器或者使用者設定 。
儲存的方式可以這樣分類：

  1. 傳統方法：cookies
    cookie使用比較久了，過時，存在各種安全問題，而且無法儲存複雜資料，可能唯一的優勢就是對非常老舊瀏覽器支援，如果業務需要，也可以使用cookie

  2. 新流派：Web Storage 和 IndexedDB
    現代瀏覽器所提供的更加簡單有效的客戶端儲存API。

  3. 未來：Cache API
    一些現代瀏覽器支援新的 Cache API。這個API是為儲存特定HTTP請求的響應檔案而設計的，它對於像儲存離線網站檔案這樣的事情非常有用，這樣網站就可以在沒有網路連線的情況下使用。快取通常與 Service Worker API 組合使用，儘管不一定非要這麼做。

6.1 WebStorage

web storageAPI只需儲存簡單的 鍵/值對的資料（限制為字串、數字等型別），並在需要的時候檢索其值。
web storageAPI提供了兩種在客戶端儲存資料的新方法：

  • localStorage : 一直儲存資料，甚至到瀏覽器關閉又開啟後也是這樣
  • sessionStorage : 只要瀏覽器開著，資料就會一直儲存 (關閉瀏覽器時資料會丟失)

localStorage方法：

  • localStorage.setItem(key, value)：儲存一個資料。
  • localStorage.getItem(key)：讀取一個資料。
  • localStorage.removeItem(key)：刪除一個資料。
localStorage.setItem('name','leo');
let leo = localStorage.getItem('name');
leo ; // "leo"
localStorage.removeItem('name');
複製程式碼

關閉瀏覽器以後資料還在。

sessionStorage方法：

  • sessionStorage.setItem(key, value)：儲存一個資料。
  • sessionStorage.getItem(key)：讀取一個資料。
  • sessionStorage.removeItem(key)：刪除一個資料。
sessionStorage.setItem('name','leo');
let leo = sessionStorage.getItem('name');
leo ; // "leo"
sessionStorage.removeItem('name');
複製程式碼

關閉瀏覽器以後資料不在。

7.第三方API

並不是所有的API都是內建在瀏覽器中，有一些可能是其他網站（如谷歌，Facebook等）提供的API，讓開發者呼叫，從而使用他們的服務和資料等。

API通過使用一個或多個JavaScript物件與我們的程式碼互動，這些物件作為API使用的資料（包含在物件屬性中）的容器，和API提供的功能（包含在物件的方法中）。
例如我們呼叫谷歌地圖的Google Maps APIs ，需要先引入他們開放的JavaScript庫。

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
複製程式碼

然後就可以這麼使用：

navigator.geolocation.getCurrentPosition(function(options){
    // ... do something
});
複製程式碼

如Geolocation API則是由以下幾個物件組成：

  • Geolocation, 包含三種控制地理資料檢索的方法。
  • Position, 表示在給定的時間的相關裝置的位置。它包含一個當前位置的Coordinates 物件。還包含了一個時間戳,這個時間戳表示獲取到位置的時間。
  • Coordinates,包含有關裝置位置的大量有用資料，包括經緯度，高度，運動速度和運動方向等。

參考文章：

  1. MDN JavaScript指南
  2. W3school JavaScript

本部分內容到這結束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推薦 github.com/pingan8787/…
JS小冊 js.pingan8787.com

歡迎關注我的微信公眾號【前端自習課】

相關文章