摘要：本文是重溫基礎(chǔ)系列文章的第十七篇。系列目錄復(fù)習(xí)資料資料整理個人整理重溫基礎(chǔ)篇重溫基礎(chǔ)對象介紹重溫基礎(chǔ)對象介紹本章節(jié)復(fù)習(xí)的是中的關(guān)于相關(guān)知識，介紹的比較多。表示在給定的時間的相關(guān)設(shè)備的位置。所有現(xiàn)代瀏覽器均支持對象和使用。

本文是 重溫基礎(chǔ) 系列文章的第十七篇。
今日感受：挑戰(zhàn)。

系列目錄：

【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個人整理)

【重溫基礎(chǔ)】1-14篇

【重溫基礎(chǔ)】15.JS對象介紹

【重溫基礎(chǔ)】16.JSON對象介紹

本章節(jié)復(fù)習(xí)的是JS中的關(guān)于WebAPI相關(guān)知識，介紹的API比較多。

前置知識：
需要了解 JS 對象 的相關(guān)知識。

API：應(yīng)用程序接口，是基于編程語言構(gòu)建的結(jié)構(gòu)，使開發(fā)人員更容易地創(chuàng)建復(fù)雜的功能。它們抽象了復(fù)雜的代碼，并提供一些簡單的接口規(guī)則直接使用。

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

瀏覽器API：

內(nèi)置于Web瀏覽器，可以從瀏覽器和電腦周圍環(huán)境獲取數(shù)據(jù)，并用于復(fù)雜的操作。例如Geolocation API提供了一些簡單的JavaScript結(jié)構(gòu)來獲取位置數(shù)據(jù)，這種API通常抽象很多復(fù)雜邏輯，我們只要調(diào)用API即可。

第三方API：

缺省情況下不會內(nèi)置于瀏覽器，而必須在Wen中某個地方獲取代碼和信息，例如Twitter API可以推送最新推文給我們，它提供一系列第三方API讓我們獲取Twitter的服務(wù)和信息。

那么，這些API是如何工作的？
不同的JavaScript的API工作內(nèi)容不同，但具有以下幾個相同點(diǎn)：

都是基于對象

API通過使用一個或多個JavaScript對象與我們的代碼交互，這些對象作為API使用的數(shù)據(jù)（包含在對象屬性中）的容器，和API提供的功能（包含在對象的方法中）。
如Geolocation API則是由以下幾個對象組成：

Geolocation, 包含三種控制地理數(shù)據(jù)檢索的方法。

Position, 表示在給定的時間的相關(guān)設(shè)備的位置。它包含一個當(dāng)前位置的Coordinates 對象。還包含了一個時間戳,這個時間戳表示獲取到位置的時間。

Coordinates,包含有關(guān)設(shè)備位置的大量有用數(shù)據(jù)，包括經(jīng)緯度，高度，運(yùn)動速度和運(yùn)動方向等。

通常這么使用：

navigator.geolocation.getCurrentPosition(function(options){
    // ... do something
});

都有可識別的入口點(diǎn)

即API的入口位置，如Geolocation API的入口在Navigator.geolocation 屬性, 它返回瀏覽器的 Geolocation 對象，所有有用的地理定位方法都可用。
在文檔對象模型(DOM)的API入口位置更簡單，常常都掛載在Document對象上，或者HTML元素上：

let a = document.createElement("div");// 創(chuàng)建一個新的div元素
let b = document.querySelector("div");// 獲取一個已經(jīng)存在的div元素
a.textContent = "hi leo!";  // 給a元素設(shè)置文本
b.appendChild(a);           // 將a元素添加到b元素下
// 
hi leo!

詳細(xì)的后面介紹。

都使用事件來處理狀態(tài)的變化

有些特定的API會包含一些事件，當(dāng)事件觸發(fā)，我們便可以運(yùn)行函數(shù)的處理屬性，做一些不同的操作。例如XMLHttpRequest對象的實(shí)例，有很多的事件可以調(diào)用。

// 簡單寫
const url = "https://www.baidu.com";
const req = new XMLHttpRequest();
req.open("GET", url);
req.responseType = "json";
req.send();
req.onload = function(){
    // ... do something
}

都會在適當(dāng)位置提供額外的安全機(jī)制

主要還是處于安全考慮，提供額外的安全機(jī)制，比如常見同源策略，一些特定頁面只能在https協(xié)議的網(wǎng)頁工作等。

接下來看看這些API都能實(shí)現(xiàn)什么作用。

我們在開發(fā)web頁面和應(yīng)用時，就會經(jīng)常操作頁面文檔的結(jié)構(gòu)，這里就會大量用到document對象，控制HTML和樣式信息的文檔對象模型（DOM）。
下面貼一張web頁面視圖中的瀏覽器的主要部分（來源MDN）：

介紹：

window：是載入瀏覽器的標(biāo)簽，JavaScript中用Window對象表示，可以實(shí)現(xiàn)很多操作：獲取窗口大小，操作載入窗口的文檔，存儲文檔數(shù)據(jù)等。

navigator：瀏覽器存在web上的狀態(tài)和表示（即用戶代理），JavaScript中用Navigator對象表示，用于獲取對象的一些信息，如：攝像頭的地理信息，用戶偏愛的語言等。

document：是實(shí)際載入窗口的頁面，JavaScript中用Document對象表示，可以實(shí)現(xiàn)很多文檔操作：獲取DOM元素，修改文本內(nèi)容，設(shè)置新樣式等。

在瀏覽器標(biāo)簽中當(dāng)前載入的文檔用文檔對象模型(Document Object Model，簡稱DOM)表示。
這是一個由瀏覽器生成的“樹結(jié)構(gòu)”，使得編程語言可以很容易訪問HTML結(jié)構(gòu)，操作等。

下面是基本的DOM操作：

let a = document.createElement("a");// 1. 創(chuàng)建一個新的a元素
let b = document.querySelector("a");// 2. 獲取一個已經(jīng)存在的a元素
a.textContent = "進(jìn)入pingan8787博客";  // 3. 給a元素設(shè)置文本
a.; // 4. 給a元素添加跳轉(zhuǎn)地址
a.style.color = "red";                // 5. 給a元素添加樣式
a.style.backgroundColor = "black";
a.setAttribute("my_class");    // 6. 給a元素添加class類名
b.appendChild(a);              // 7. 將a元素添加到b元素下

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

DOM HTML操作

改變HTML輸出流：

通過document.write()直接修改HTML輸出流寫內(nèi)容。

document.write("hello leo");

注意：千萬不要在文檔加載之后使用，否則覆蓋文檔。

改變HTML內(nèi)容：

通過innerHTML屬性來改變HTML元素的內(nèi)容：

document.getElementById(id).innerHTML = new HTML;
// 通過ID獲取  （getElementById）
// 通過name屬性（getElementsByName）
// 通過標(biāo)簽名  （getElementsByTagName）
// 通過類名    （getElementsByClassName）
// 獲取html的方法 （document.documentElement）
// 獲取body的方法 （document.body）
// 通過選擇器獲取一個元素（querySelector）
// 通過選擇器獲取一組元素（querySelectorAll）

例子：

document.getElementById("id1").innerHTML = "hello leo!"

改變HTML屬性：

通過attribute屬性來改變元素的屬性：

document.getElementById(id).attribute = new value

例子：

document.getElementById("id1").src = "leo.png";

詳細(xì)的文檔可以查看HTML DOM Document 對象

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后面的樣式的屬性名只能使用命名小駝峰。

DOM 事件操作

如要對元素做點(diǎn)擊事件的綁定，可以在HTML的onclick事件屬性上綁定方法：

另外可以綁定的事件類型還有很多：

詳細(xì)的文檔可以查看HTML DOM Event 對象

DOM 節(jié)點(diǎn)操作

創(chuàng)建新的HTML元素

需要先創(chuàng)建一個新元素節(jié)點(diǎn)，然后在使用appendChild方法，向一個已存在的元素上追加這個新元素：

// 創(chuàng)建新元素節(jié)點(diǎn)
let a = document.createElement("p");
let b = document.createTextNode("新的文本");
a.appendChild(b);

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

// 追加新元素
div.appendChild(a);

刪除已有的HTML元素

如果需要刪除HTML元素，就必須先獲得該元素的父元素，再使用removeChild方法刪除：

    
hello leo

let a = document.getElementById("id1");
let b = document.getElementById("id2");
a.removeChild(b);

Window 對象表示瀏覽器中打開的窗口。
Window 對象涉及到的屬性和方法非常多，具體可以查看 Window 對象 比較詳細(xì)。
這里一個簡單的例子，實(shí)現(xiàn)獲取視窗（顯示文檔的內(nèi)部窗口）的寬高，并設(shè)置給指定的Div元素，并且當(dāng)我們調(diào)整窗口時候，也會及時改變Div的寬高。

let div = document.querySelector("div");
// 獲取寬高
let w = window.innerWidth;
let h = window.innerHeight;
// 設(shè)置寬高
div.style.width = w + "px";
div.style.heitgh = h + "px";
// 設(shè)置及時調(diào)整div寬高
window.onresize = function(){
    w = window.innerWidth;
    h = window.innerHeight;
    div.style.width = w + "px";
    div.style.heitgh = h + "px";
}

這一部分主要復(fù)習(xí)Ajax（全稱：Asynchronous JavaScript and XML）。
Ajax主要要解決的問題是：避免重復(fù)加載刷新整個頁面，因?yàn)橛袝r候我們只是小部分?jǐn)?shù)據(jù)更新，這時候我們這要刷新這部分的數(shù)據(jù)，而不是整個頁面。
Ajax不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。

下面看一下Ajax模型圖：

Ajax模型包括使用Web API作為代理來更智能地請求數(shù)據(jù)，而不僅僅是讓瀏覽器重新加載整個頁面。讓我們來思考這個意義：
比如：我們逛淘寶，搜索或打開商品頁面時，頂部導(dǎo)航來和頁眉頁腳等，都保持不變。
這樣做的好處：

頁面更新更快，減少等待刷新，體驗(yàn)更好，響應(yīng)更快。

下載的數(shù)據(jù)更少，減少帶寬的浪費(fèi)。

另外為了提高加載速度，網(wǎng)站有時候也會將首次請求和數(shù)據(jù)存儲在用戶計算機(jī)中，下次再請求就直接先使用本地版本，如果內(nèi)容有更新才會去服務(wù)器獲取新數(shù)據(jù)，原理圖：

XMLHttpRequest 是 AJAX 的基礎(chǔ)。
所有現(xiàn)代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。

創(chuàng)建 XMLHttpRequest 對象的語法：

variable=new XMLHttpRequest();
// IE5 和 IE使用 ActiveX 對象：
variable=new ActiveXObject("Microsoft.XMLHTTP");

為了兼容所有瀏覽器（包括IE5 IE6），我們就必須檢查瀏覽器是否支持XMLHttpRequest對象，若支持則創(chuàng)建XMLHttpRequest對象，否則創(chuàng)建ActiveXObject對象。

let my_http;
if (window.XMLHttpRequest){
    // 非 ES5 ES6
    my_http=new XMLHttpRequest();
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        // 網(wǎng)絡(luò)請求成功后，執(zhí)行的操作
    }
  }
}else{
    // ES5 ES6
    my_http=new ActiveXObject("Microsoft.XMLHTTP");
}

向服務(wù)器發(fā)送請求時，我們可以使用 XMLHttpRequest 對象的 open() 和 send() 方法：

my_http.open(method,url,async);  
my_http.send(string);

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

method：請求的類型；GET 或 POST。

url：文件在服務(wù)器上的位置。

async：true（異步）或 false（同步）。

send(string)方法接收一個參數(shù)：

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請求的話需要設(shè)置HTTP頭：

setRequestHeader(header,value)

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

header: 規(guī)定頭的名稱。

value: 規(guī)定頭的值。

接收服務(wù)器響應(yīng)，我們可以使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

responseText：獲得字符串形式的響應(yīng)數(shù)據(jù)。

responseXML：獲得 XML 形式的響應(yīng)數(shù)據(jù)。

responseText屬性

當(dāng)服務(wù)端的響應(yīng)不是XML，使用responseText屬性。
若是字符串的響應(yīng)就可以直接使用。

document.getElementById("id1").inndeHTML = my_http.responseText;

readyState保存著XMLHttpRequest對象的狀態(tài)。
我們發(fā)送Ajax請求的整個過程中，XMLHttpRequest對象的readyState會改變，當(dāng)readyState改變的時候會觸發(fā)onreadystatechange事件。

XMLHttpRequest對象的三個重要屬性：

通常我們會在readyState等于4且status等于200時候表示響應(yīng)已就緒，可以執(zhí)行業(yè)務(wù)操作：

if (xmlhttp.readyState==4 && xmlhttp.status==200){
    // 網(wǎng)絡(luò)請求成功后，執(zhí)行的操作
}

這里主要介紹的是HTML5新增的canvas元素，JavaScript為canvas添加了很多API，進(jìn)一步增強(qiáng)canvas。
canvas 元素可以通過JavaScript腳本，在網(wǎng)頁上繪制圖形。
比如,它可以被用來繪制圖形,制作圖片集合,甚至用來實(shí)現(xiàn)動畫效果。你可以(也應(yīng)該)在元素標(biāo)簽內(nèi)寫入可提供替代的的代碼內(nèi)容，這些內(nèi)容將會在在舊的、不支持canvas元素的瀏覽器或是禁用了JavaScript的瀏覽器內(nèi)渲染并展現(xiàn)。

詳細(xì)完整的課程推薦：

MDN Canvas教程

W3C HTML5 Canvas

下面復(fù)習(xí)一下canvas的一個使用流程：

創(chuàng)建畫布，規(guī)定元素id、寬度和高度

要在網(wǎng)頁中創(chuàng)建 2D 或者 3D 場景，必須在 HTML 文件中插入一個canvas元素，以界定網(wǎng)頁中的繪圖區(qū)域。

    臥槽你的瀏覽器竟然不支持 canvas！

在canvas標(biāo)簽內(nèi)，寫一些瀏覽器不支持畫布功能時候的提示內(nèi)容。
畫布默認(rèn)尺寸為 300 × 150 像素。

獲取畫布上下文，并完成設(shè)置

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

let ctx = canvas.getContext("2d");

ctx 變量包含一個 CanvasRenderingContext2D 對象，畫布上所有繪畫操作都會涉及到這個對象。
下面將畫布背景涂黑：

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 0, 200, 100);

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

繪制實(shí)線

ctx.lineTo(100,50);  // 繪制目標(biāo)坐標(biāo)
ctx.lineWidth = 5;   // 線條寬度
ctx.stroke();  // 繪制實(shí)線

繪制矩形

fillRect(x, y, width, height) 繪制一個填充的矩形
strokeRect(x, y, width, height) 繪制一個矩形的邊框
clearRect(x, y, width, height) 清除指定矩形區(qū)域，讓清除部分完全透明。
x與y指定了在canvas畫布上所繪制的矩形的左上角（相對于原點(diǎn)）的坐標(biāo)。
width和height設(shè)置矩形的尺寸。

// 實(shí)心矩形
ctx.fillStyle = "rgb(255, 0, 0)"; // 矩形顏色
ctx.fillRect(50, 50, 100, 150);   // 矩形起止坐標(biāo)

// 空心矩形
ctx.strokeStyle = "rgb(255, 255, 255)";// 矩形邊框顏色
ctx.strokeRect(25, 25, 175, 200);// 矩形起止坐標(biāo)

繪制路徑

可以通過路徑來實(shí)現(xiàn)復(fù)雜的圖形，下面整理了一些常用到的方法：

beginPath()：在畫筆當(dāng)前所在位置開始繪制一條路徑。在新的畫布中，畫筆起始位置為 (0, 0)。

moveTo()：將畫筆移動至另一個坐標(biāo)點(diǎn)，不記錄、不留痕跡，只將畫筆“跳”至新位置。

fill()：通過為當(dāng)前所繪制路徑的區(qū)域填充顏色來繪制一個新的填充形狀。

stroke()：通過為當(dāng)前繪制路徑的區(qū)域描邊，來繪制一個只有邊框的形狀。

路徑也可和矩形一樣使用 lineWidth 和 fillStyle / strokeStyle 等功能。

ctx.fillStyle = "rgb(255, 0, 0)"; // 設(shè)置填充顏色
ctx.beginPath();      // 開始
ctx.moveTo(50, 50);   // 移動到結(jié)束點(diǎn)的坐標(biāo)
// .. 可以在到處移動
ctx.fill();           // 繪制

繪制圓形

arc(x, y, radius, startAngle, endAngle, anticlockwise)
畫一個以（x,y）為圓心的以radius為半徑的圓弧（圓），從startAngle開始到endAngle結(jié)束，按照anticlockwise給定的方向（默認(rèn)為順時針）來生成。
arcTo(x1, y1, x2, y2, radius)
根據(jù)給定的控制點(diǎn)和半徑畫一段圓弧，再以直線連接兩個控制點(diǎn)。

arc方法，該方法有六個參數(shù)：

x,y為繪制圓弧所在圓上的圓心坐標(biāo)。

radius為半徑。

startAngle以及endAngle參數(shù)用弧度定義了開始以及結(jié)束的弧度。

anticlockwise是布爾值，為true時，是逆時針方向，否則順時針方向。

這些都是以x軸為基準(zhǔn)。

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

cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

繪制文本

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

當(dāng)前繪制的文本字體.默認(rèn)是 10px sans-serif。

textAlign = value

文本對齊選項(xiàng). 可選的值包括：start, end, left, right or center. 默認(rèn)值是 start。

textBaseline = value

基線對齊選項(xiàng). 可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默認(rèn)值是 alphabetic。

direction = value

文本方向。可能的值包括：ltr, rtl, inherit。默認(rèn)值是 inherit。

ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello leo ", 0, 100);

繪制圖片

drawImage(image, x, y)

其中 image 是 image 或者 canvas 對象，x 和 y 是其在目標(biāo) canvas 里的起始坐標(biāo)。

let img = new Image();
img.src = "leo.png";
img.onload = function(){
    ctx.drawImage(img, 50, 50);
};

drawImage方法還有更多參數(shù)：

ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);

第一個參數(shù)不變，為圖片引用。

參數(shù) 2、3 表示裁切部分左上頂點(diǎn)的坐標(biāo)，參考原點(diǎn)為原圖片本身左上角的坐標(biāo)。原圖片在該坐標(biāo)左、上的部分均不會繪制出來。

參數(shù) 4、5 表示裁切部分的長、寬。

參數(shù) 6、7 表示裁切部分左上頂點(diǎn)在畫布中的位置坐標(biāo)，參考原點(diǎn)為畫布左上頂點(diǎn)。

參數(shù) 8、9 表示裁切部分在畫布中繪制的長、寬。本例中繪制時與裁切時面積相同，你也可以定制繪制的尺寸。

詳細(xì)完整的課程推薦：

MDN Canvas教程

W3C HTML5 Canvas

HTML5提供了用于文檔中嵌入富媒體的元素和標(biāo)簽，通過元素自帶的API來控制視頻和音頻的播放搜索等。

當(dāng)前，video 元素支持三種視頻格式：Ogg/MPEG4和WebM。
簡單使用：

連接不同視頻：

之間插入的內(nèi)容是供不支持 video 元素的瀏覽器顯示的。
標(biāo)簽的屬性：

另外我們可以為視頻創(chuàng)建簡單的播放/暫停和調(diào)整尺寸的控件，這里需要使用play()和 pause() 還有兩個屬性：paused 和 width。
更多方法可以查看 HTML5 video - 方法、屬性以及事件

audio 元素能夠播放聲音文件或者音頻流。
當(dāng)前，audio 元素支持三種視頻格式：Ogg Vorbis/MP3和Wav。
簡單使用：

control 屬性供添加播放、暫停和音量控件。
之間插入的內(nèi)容是供不支持 audio 元素的瀏覽器顯示的。
連接不同音頻：

標(biāo)簽的屬性：

現(xiàn)代web瀏覽器會提供一些在客戶端存儲用戶數(shù)據(jù)的方法，只要用戶允許，可以隨時取出使用。
使用客戶端存儲API可以存儲的數(shù)據(jù)量是優(yōu)先的，具體取決于瀏覽器或者用戶設(shè)置 。
存儲的方式可以這樣分類：

傳統(tǒng)方法：cookies

cookie使用比較久了，過時，存在各種安全問題，而且無法存儲復(fù)雜數(shù)據(jù)，可能唯一的優(yōu)勢就是對非常老舊瀏覽器支持，如果業(yè)務(wù)需要，也可以使用cookie

新流派：Web Storage 和 IndexedDB

現(xiàn)代瀏覽器所提供的更加簡單有效的客戶端儲存API。

未來：Cache API

一些現(xiàn)代瀏覽器支持新的 Cache API。這個API是為存儲特定HTTP請求的響應(yīng)文件而設(shè)計的，它對于像存儲離線網(wǎng)站文件這樣的事情非常有用，這樣網(wǎng)站就可以在沒有網(wǎng)絡(luò)連接的情況下使用。緩存通常與 Service Worker API 組合使用，盡管不一定非要這么做。

web storageAPI只需存儲簡單的 鍵/值對的數(shù)據(jù)（限制為字符串、數(shù)字等類型），并在需要的時候檢索其值。
web storageAPI提供了兩種在客戶端存儲數(shù)據(jù)的新方法：

localStorage : 一直保存數(shù)據(jù)，甚至到瀏覽器關(guān)閉又開啟后也是這樣

sessionStorage : 只要瀏覽器開著，數(shù)據(jù)就會一直保存 (關(guān)閉瀏覽器時數(shù)據(jù)會丟失)

localStorage方法：

localStorage.setItem(key, value)：存儲一個數(shù)據(jù)。

localStorage.getItem(key)：讀取一個數(shù)據(jù)。

localStorage.removeItem(key)：刪除一個數(shù)據(jù)。

localStorage.setItem("name","leo");
let leo = localStorage.getItem("name");
leo ; // "leo"
localStorage.removeItem("name");

關(guān)閉瀏覽器以后數(shù)據(jù)還在。

sessionStorage方法：

sessionStorage.setItem(key, value)：存儲一個數(shù)據(jù)。

sessionStorage.getItem(key)：讀取一個數(shù)據(jù)。

sessionStorage.removeItem(key)：刪除一個數(shù)據(jù)。

sessionStorage.setItem("name","leo");
let leo = sessionStorage.getItem("name");
leo ; // "leo"
sessionStorage.removeItem("name");

關(guān)閉瀏覽器以后數(shù)據(jù)不在。

并不是所有的API都是內(nèi)置在瀏覽器中，有一些可能是其他網(wǎng)站（如谷歌，F(xiàn)acebook等）提供的API，讓開發(fā)者調(diào)用，從而使用他們的服務(wù)和數(shù)據(jù)等。

API通過使用一個或多個JavaScript對象與我們的代碼交互，這些對象作為API使用的數(shù)據(jù)（包含在對象屬性中）的容器，和API提供的功能（包含在對象的方法中）。
例如我們調(diào)用谷歌地圖的Google Maps APIs ，需要先引入他們開放的JavaScript庫。

然后就可以這么使用：

navigator.geolocation.getCurrentPosition(function(options){
    // ... do something
});

如Geolocation API則是由以下幾個對象組成：

Geolocation, 包含三種控制地理數(shù)據(jù)檢索的方法。

Position, 表示在給定的時間的相關(guān)設(shè)備的位置。它包含一個當(dāng)前位置的Coordinates 對象。還包含了一個時間戳,這個時間戳表示獲取到位置的時間。

Coordinates,包含有關(guān)設(shè)備位置的大量有用數(shù)據(jù)，包括經(jīng)緯度，高度，運(yùn)動速度和運(yùn)動方向等。

MDN JavaScript指南

W3school JavaScript

本部分內(nèi)容到這結(jié)束

歡迎關(guān)注微信公眾號【前端自習(xí)課】每天早晨，與您一起學(xué)習(xí)一篇優(yōu)秀的前端技術(shù)博文 .