前端工程師必備HTML5入門課程:地理位置定位

前端工程師必備HTML5入門課程:地理位置定位
前端工程師必備HTML5入門課程:地理位置定位

HTML5裡的地理位置定位各位前端工程師都學會了嗎?還不會的看這篇剛剛好!!

什麼是地理位置定位 (Geolocation) API?

HTML5 網頁,前端工程師可使用地理位置定位 (Geolocation API) 來取得用戶的地理位置。但基於隱私權的考量,一定要獲得使用者同意才可使用。對於具有GPS(如智慧型手機等)的設備,地理位置更為準確。

用法

使用 Geolocation 的主要方法是 getCurrentPosition,可以讀取到用戶設備的當前地理位置。語法如下:
(※以下的語法通通都是寫在 Javascript裡)

navigator.geolocation.getCurrentPosition();

參數:

  • showLocation(必要項目):是個函式,於瀏覽器成功判斷出位置後呼叫。
  • ErrorHandler(非必要):是另一個函式,於發生問題,瀏覽器無法判斷出位置時呼叫。
  • options(非必要):此參數能讓我們自訂geolocation運作的方式。

呈現數據

HTML5裡的地理位置定位 (Geolocation API) 可以使用兩種方式呈現:Geodetic(地理測量) 與 Civic(城市):

  • Geodetic (地理測量) 直接呈現經緯度座標表示位置、水平線上的距離 (如公尺) 表示高度等
  • Civic (城市) 則用能使大多數人理解的方式呈現:城市名表示位置、樓層數表示高度等

 

屬性 Geodetic Civic
Position (位置) 25.0,121.6 Taipei (台北)
Elevation (高度) 508 meters (508公尺) 101th floor (101樓)
Heading (以360度表示的方向) 234 degrees (234度) City Centre (市中心)
Speed (速度) 5km/h (時速5km) Walking (步行)
Orientation (手機的擺放方向) 45 degrees (45度) North-East (東北)

 

 

 

 

其他閱讀

前端工程師必備HTML5入門課程:Drag and Drop簡介(上)

前端工程師必備HTML5入門課程:瀏覽儲存器Web Storage

前端工程師必備HTML5入門課程:SVG簡介

暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

Python課程讓你與AI接軌 不必擔心被科技取代

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

簡明扼要的HTML5入門課程(九)下:Drag and Drop簡介

簡明扼要的HTML5入門課程(九)下:Drag and Drop簡介
簡明扼要的HTML5入門課程(九)下:Drag and Drop簡介

繼上篇HTML5 Drag and Drop簡介教學上篇,今天也要看完下篇才算完整喔~

數據傳輸DataTransfer

拖曳動作的目的,是為了對來源和目標元素做操作。為了完成整個操作,就需要在來源元素和目標元素間傳輸數據。在 HTML5 中,我們透過 Javascript 的 DataTransfer 完成數據傳輸。

我們在上例的 dragstart 時,就設置需要傳輸的數據,在 drop 中獲取需要的數據。 event.dataTransfer 提供了兩個主要函數:

 

  • setData(format, data):用於添加數據,一般 format 對應於 MIME 類型字符串,常見的有 text/plain、text/html 及 text/uri-list 等,但同時也可以是任意自定義的類型;不幸的是 data 只能是 string 或 file。
  • getData(format):用於獲取數據。

 

現在,我們的目的是要教前端工程師將 「Drag Me」元素放到其它藍色的目標元素中,如此就需要傳輸它的 ID ,通過下面的 Javascript 語法來實現:

draggable.addEventListener('dragstart',(ev)=> { 
  ev.target.style.opacity = “。5” ;

  //設置ID
   ev.dataTransfer.setData('text / plain',ev.target.id); 
});

dropzones.forEach((dropzone)=> { 
  dropzone.addEventListener('drop',(ev)=> { 
    ev.preventDefault()
    ev.target.style.borderStyle = 'solid' ;

    //獲取ID const sourceId = ev.dataTransfer.getData('text / plain')    
    ev.target.appendChild(document .getElementById(sourceId))  })});

 

  • 在 dragstart 時,透過 setData 將 ID 放入 DataTransfer 中
  • 在drop事件中,透過 getData 獲取元素 ID ,並透過 appendChild 加入到藍色的目標元素中。

 

結果如下:

See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.

至此,這一個 HTML5 Drag&Drop API 的基礎範例教學就結束了。為了實現這麼一個簡單的拖曳 API 事件,就有 6 個事件要操作。因此從前端工程師入門教學的角度來說,HTML5 Drag&Drop API 的實現,其實並不容易。

 

 

 

其他閱讀

簡明扼要的HTML5入門課程(八):地理位置定位

簡明扼要的HTML5入門課程(九)上:Drag and Drop簡介

簡明扼要的HTML5入門課程(十):SVG簡介

暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

Python課程讓你與AI接軌 不必擔心被科技取代

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

前端工程師必備HTML5入門課程:瀏覽儲存器Web Storage

前端工程師必備HTML5入門課程:瀏覽儲存器Web Storage
前端工程師必備HTML5入門課程:瀏覽儲存器Web Storage

HTML5新的瀏覽儲存器各位前端工程師都用過了嗎?還沒得畫先看看今天的文章吧!!

HTML5 之前,前端工程師要在用戶端瀏覽器儲存資料,會使用 cookies。HTML5 新增了 Web Storage 功能,取代了只能儲存 4kb 的 cookies。

Web Storage 的優點 (與 cookies 比較):

  • 更安全
  • 過往儲存於 cookies 中的資料,會在用戶端瀏覽器與伺服器之間運行:因為每次用戶端瀏覽器送出 request 至伺服器時,cookies 就會跟著被夾帶,就會占用到頻寬,而 Web Storage 因為純粹運作於用戶端用戶端瀏覽器,不會在用戶端瀏覽器與伺服器之間運行,所以就不需要占用網路頻寬。
  • 以往 cookies 最多只能儲存 4KB 的資料,而 HTML5 Web Storage 的儲存空間大得多,其容量依各個瀏覽器而不同,但是一般都至少有 5MB。
  • 速度更快

 

Web Storage 有分兩種:sessionStorage() 和 localStorage()。二者的最大的差異在於「生命週期長短」。

數據的生命期

localStorage:儲存於 localStorage 的資料可永久保存,可以跨瀏覽器分頁、新視窗、甚至是關閉瀏覽器後再打開,localStorage 仍然會存在,永不逾期,除非被清除。

sessionStorage:sessionStorage 的生命周期只存在於瀏覽器的單一分頁,也就是另開新分頁的話,又是一個新的 sessionStorage。除非另外設定逾期時間,否則 sessionStorage 會於分頁、瀏覽器等被關閉時被清除。 ※以下的語法通通都是寫在 Javascript

有效範圍

儲存於 local storage 的資料可以跨分頁(tab)運作,session storage 則不行。

用法

sessionStorage 和 localStorage 的語法都簡單且類似。其資料都是以 key/value pairs 的形式儲存。

儲存資料

localStorage.setItem("Key名稱", "字串值");

取得資料

//this will print the value
alert(localStorage.getItem("Key名稱")); 

移除資料

localStorage.removeItem("Key名稱");

移除所有資料

localStorage.clear();

以上的語法是以 localStorage 為例來示範,若是用儲存於 sessionStorage,把以上語法中的 「localStorage」 替換成 「sessionStorage」 即可。

 

 

 

其他閱讀

前端工程師必備HTML5入門課程:Drag and Drop簡介(上)

前端工程師必備HTML5入門課程:Drag and Drop簡介(下)

前端工程師必備HTML5入門課程:地理位置定位

暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

Python課程讓你與AI接軌 不必擔心被科技取代

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

簡明扼要的HTML5入門課程(九)上:Drag and Drop簡介

簡明扼要的HTML5入門課程(九)上:Drag and Drop簡介
簡明扼要的HTML5入門課程(九)上:Drag and Drop簡介

HTML5讓Drag and Drop變得更方便使用了!!這一定要好好學起來啊!!

HTML5 Drag & Drop API-讓元素變得可拖曳

過去在網頁裡面實現 Drag & Drop 是很麻煩的,需要配合 CSS、onmousedown、onmouseup、setInterval() 等,才能做出元件拖曳的視覺效果。現在 HTML5 有直接的 Drag & Drop 機制,讓前端工程師可直接使用 drag and drop 的功能,讓使用者透過拖曳的方式,把要上傳的檔案拉到瀏覽器當中。
所有的 HTML 元素都可設成「可拖曳」的。要讓元素變得可以拖曳,只要在該元素的原始碼中加入 draggable 屬性,如下例 (讓圖片變得可以拖曳):

<img draggable="true" />

HTML5 Drag & Drop API 的範例

See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.

讓元素可拖放-HTML的部分

除了<a>、<img>,其他 HTML 裡的元素本來是被預設為不可以作為源元素的,也就是我們本來是「拖不動」 它的。但在 HTML5,只要為它加上 draggable=”true” 屬性,它就能「被拖曳」了。下面是上例的 HTML 碼的一部分:

See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.


draggable 屬性上加了 draggable=”true”,這樣就能讓這個 div 元素變成可以拖曳的 (至少在 Chrome 中可以)。但是我們還需要使用 Javascript 在 dragstart 裡為 dataTransfer 設置一些數據,因此需要加上下面的代碼。這樣可以確保它可以被拖曳。

See the Pen HTML 5 Drag and Drop-2 by Tedutw (@Tedutw) on CodePen.

Javascript-添加拖曳特效

首先,我們想讓拖曳元素為半透明。我們可以監聽 dragstart 事件:

draggable.addEventListener(“dragstart”,(ev)=> { 
ev.target.style.opacity = “。5” ; 
});
See the Pen HTML 5 Drag and Drop-3 by Tedutw (@Tedutw) on CodePen.

然後我們監聽 dragend ,讓它在拖動結束後還原透明度:

draggable.addEventListener(“dragend”,(ev)=> { 
  ev.target.style.opacity = “” ; 
}};
See the Pen HTML 5 Drag and Drop-4 by Tedutw (@Tedutw) on CodePen.

接下來,我們希望讓 「Drag Me」元素進入藍色的目標元素時,目標元素變成虛線。於是我們為所有的 dropzone 都監聽了 dragenter 及 dragleave 事件,這樣當我們拖動 「Drag Me」元素進入這些藍色的目標元素時,目標元素的邊框就變成虛線,直到「Drag Me」元素離開時變回實線:

let dropzones = document.querySelectorAll('.dropzone');
dropzones.forEach((dropzone) => {

  dropzone.addEventListener('dragenter', (ev) => {
    ev.preventDefault();
    dropzone.style.borderStyle = 'dashed';
    return false;
  });

  dropzone.addEventListener('dragover', (ev) => {
    ev.preventDefault();
    return false;
  });

  dropzone.addEventListener('dragleave', (ev) => {
    dropzone.style.borderStyle = 'solid';
  });
});
See the Pen HTML 5 Drag and Drop-5 by Tedutw (@Tedutw) on CodePen.


以上
Javascript 重點如下:

 

  • HTML 本身預設為幾乎所有的元素是無法拖曳的,所以上例在 dragenter 與 dragover 中使用 ev.preventDefault() 是為了阻止這樣的預設行為。
  • ev.target 指的是紅色的、寫著「Drop Me」的源元素、dropzone 是指藍色的目標元素,所以在 dragenter 中,我們用 dropzone 參數來修改樣式

以上我們完成「拖」的動作,接下來要處理「放」的結果,請見下篇

 

 

 

其他閱讀

簡明扼要的HTML5入門課程(八):地理位置定位

簡明扼要的HTML5入門課程(九)下:Drag and Drop簡介

簡明扼要的HTML5入門課程(十):SVG簡介

暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

Python課程讓你與AI接軌 不必擔心被科技取代

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

前端工程師必備HTML5入門課程:Drag and Drop簡介(下)

前端工程師必備HTML5入門課程:Drag and Drop簡介(下)
前端工程師必備HTML5入門課程:Drag and Drop簡介(下)

HTML5 Drag and Drop下篇來啦!!千萬不要錯過~

數據傳輸DataTransfer

拖曳動作的目的,是為了對來源和目標元素做操作。為了完成整個操作,就需要在來源元素和目標元素間傳輸數據。在 HTML5 中,我們透過 Javascript 的 DataTransfer 完成數據傳輸。

我們在上例的 dragstart 時,就設置需要傳輸的數據,在 drop 中獲取需要的數據。 event.dataTransfer 提供了兩個主要函數:

 

  • setData(format, data):用於添加數據,一般 format 對應於 MIME 類型字符串,常見的有 text/plain、text/html 及 text/uri-list 等,但同時也可以是任意自定義的類型;不幸的是 data 只能是 string 或 file。
  • getData(format):用於獲取數據。

 

現在,我們的目的是要教前端工程師將 「Drag Me」元素放到其它藍色的目標元素中,如此就需要傳輸它的 ID ,通過下面的 Javascript 語法來實現:

draggable.addEventListener('dragstart',(ev)=> { 
  ev.target.style.opacity = “。5” ;

  //設置ID
   ev.dataTransfer.setData('text / plain',ev.target.id); 
});

dropzones.forEach((dropzone)=> { 
  dropzone.addEventListener('drop',(ev)=> { 
    ev.preventDefault()
    ev.target.style.borderStyle = 'solid' ;

    //獲取ID const sourceId = ev.dataTransfer.getData('text / plain')    
    ev.target.appendChild(document .getElementById(sourceId))  })});

 

  • 在 dragstart 時,透過 setData 將 ID 放入 DataTransfer 中
  • 在drop事件中,透過 getData 獲取元素 ID ,並透過 appendChild 加入到藍色的目標元素中。

 

結果如下:

See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.

至此,這一個 HTML5 Drag&Drop API 的基礎範例教學就結束了。為了實現這麼一個簡單的拖曳 API 事件,就有 6 個事件要操作。因此從前端工程師入門教學的角度來說,HTML5 Drag&Drop API 的實現,其實並不容易。

 

 

 

其他閱讀

前端工程師必備HTML5入門課程:Drag and Drop簡介(上)

前端工程師必備HTML5入門課程:瀏覽儲存器Web Storage

前端工程師必備HTML5入門課程:地理位置定位

暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

Python課程讓你與AI接軌 不必擔心被科技取代

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

簡明扼要的HTML5入門課程(八):地理位置定位

簡明扼要的HTML5入門課程(八):地理位置定位
簡明扼要的HTML5入門課程(八):地理位置定位

今天的HTML5入門文章要來和大家介紹地理位置定位!!各位前端工程師知道這是甚麼嗎?

什麼是地理位置定位 (Geolocation) API?

HTML5 網頁,前端工程師可使用地理位置定位 (Geolocation API) 來取得用戶的地理位置。但基於隱私權的考量,一定要獲得使用者同意才可使用。對於具有GPS(如智慧型手機等)的設備,地理位置更為準確。

用法

使用 Geolocation 的主要方法是 getCurrentPosition,可以讀取到用戶設備的當前地理位置。語法如下:
(※以下的語法通通都是寫在 Javascript裡)

navigator.geolocation.getCurrentPosition();

參數:

  • showLocation(必要項目):是個函式,於瀏覽器成功判斷出位置後呼叫。
  • ErrorHandler(非必要):是另一個函式,於發生問題,瀏覽器無法判斷出位置時呼叫。
  • options(非必要):此參數能讓我們自訂geolocation運作的方式。

呈現數據

HTML5裡的地理位置定位 (Geolocation API) 可以使用兩種方式呈現:Geodetic(地理測量) 與 Civic(城市):

  • Geodetic (地理測量) 直接呈現經緯度座標表示位置、水平線上的距離 (如公尺) 表示高度等
  • Civic (城市) 則用能使大多數人理解的方式呈現:城市名表示位置、樓層數表示高度等

 

屬性 Geodetic Civic
Position (位置) 25.0,121.6 Taipei (台北)
Elevation (高度) 508 meters (508公尺) 101th floor (101樓)
Heading (以360度表示的方向) 234 degrees (234度) City Centre (市中心)
Speed (速度) 5km/h (時速5km) Walking (步行)
Orientation (手機的擺放方向) 45 degrees (45度) North-East (東北)

 

 

 

 

其他閱讀

簡明扼要的HTML5入門課程(七):瀏覽儲存器Web Storage

簡明扼要的HTML5入門課程(九)上:Drag and Drop簡介

簡明扼要的HTML5入門課程(九)下:Drag and Drop簡介

暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

Python課程讓你與AI接軌 不必擔心被科技取代

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

前端工程師必備HTML5入門課程:Drag and Drop簡介(上)

前端工程師必備HTML5入門課程:Drag and Drop簡介(上)
前端工程師必備HTML5入門課程:Drag and Drop簡介(上)

今天的HTML5入門課要來教大家好用的Drag and Drop!!無須配合其他東西就能直接使用喔!!

HTML5 Drag & Drop API-讓元素變得可拖曳

過去在網頁裡面實現 Drag & Drop 是很麻煩的,需要配合 CSS、onmousedown、onmouseup、setInterval() 等,才能做出元件拖曳的視覺效果。現在 HTML5 有直接的 Drag & Drop 機制,讓前端工程師可直接使用 drag and drop 的功能,讓使用者透過拖曳的方式,把要上傳的檔案拉到瀏覽器當中。
所有的 HTML 元素都可設成「可拖曳」的。要讓元素變得可以拖曳,只要在該元素的原始碼中加入 draggable 屬性,如下例 (讓圖片變得可以拖曳):

<img draggable="true" />

HTML5 Drag & Drop API 的範例

See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.

讓元素可拖放-HTML的部分

除了<a>、<img>,其他 HTML 裡的元素本來是被預設為不可以作為源元素的,也就是我們本來是「拖不動」 它的。但在 HTML5,只要為它加上 draggable=”true” 屬性,它就能「被拖曳」了。下面是上例的 HTML 碼的一部分:

See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.


draggable 屬性上加了 draggable=”true”,這樣就能讓這個 div 元素變成可以拖曳的 (至少在 Chrome 中可以)。但是我們還需要使用 Javascript 在 dragstart 裡為 dataTransfer 設置一些數據,因此需要加上下面的代碼。這樣可以確保它可以被拖曳。

See the Pen HTML 5 Drag and Drop-2 by Tedutw (@Tedutw) on CodePen.

Javascript-添加拖曳特效

首先,我們想讓拖曳元素為半透明。我們可以監聽 dragstart 事件:

draggable.addEventListener(“dragstart”,(ev)=> { 
ev.target.style.opacity = “。5” ; 
});
See the Pen HTML 5 Drag and Drop-3 by Tedutw (@Tedutw) on CodePen.

然後我們監聽 dragend ,讓它在拖動結束後還原透明度:

draggable.addEventListener(“dragend”,(ev)=> { 
  ev.target.style.opacity = “” ; 
}};
See the Pen HTML 5 Drag and Drop-4 by Tedutw (@Tedutw) on CodePen.

接下來,我們希望讓 「Drag Me」元素進入藍色的目標元素時,目標元素變成虛線。於是我們為所有的 dropzone 都監聽了 dragenter 及 dragleave 事件,這樣當我們拖動 「Drag Me」元素進入這些藍色的目標元素時,目標元素的邊框就變成虛線,直到「Drag Me」元素離開時變回實線:

let dropzones = document.querySelectorAll('.dropzone');
dropzones.forEach((dropzone) => {

  dropzone.addEventListener('dragenter', (ev) => {
    ev.preventDefault();
    dropzone.style.borderStyle = 'dashed';
    return false;
  });

  dropzone.addEventListener('dragover', (ev) => {
    ev.preventDefault();
    return false;
  });

  dropzone.addEventListener('dragleave', (ev) => {
    dropzone.style.borderStyle = 'solid';
  });
});
See the Pen HTML 5 Drag and Drop-5 by Tedutw (@Tedutw) on CodePen.


以上
Javascript 重點如下:

 

  • HTML 本身預設為幾乎所有的元素是無法拖曳的,所以上例在 dragenter 與 dragover 中使用 ev.preventDefault() 是為了阻止這樣的預設行為。
  • ev.target 指的是紅色的、寫著「Drop Me」的源元素、dropzone 是指藍色的目標元素,所以在 dragenter 中,我們用 dropzone 參數來修改樣式

以上我們完成「拖」的動作,接下來要處理「放」的結果,請見下篇

 

 

 

其他閱讀

前端工程師必備HTML5入門課程:Drag and Drop簡介(下)

前端工程師必備HTML5入門課程:瀏覽儲存器Web Storage

前端工程師必備HTML5入門課程:地理位置定位

暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

Python課程讓你與AI接軌 不必擔心被科技取代

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

簡明扼要的HTML5入門課程(七):瀏覽儲存器Web Storage

簡明扼要的HTML5入門課程(七):瀏覽儲存器Web Storage
簡明扼要的HTML5入門課程(七):瀏覽儲存器Web Storage

有了新的HTML5的瀏覽儲存器之後殂存的資料就更多了!!還有其他優點~一起往下看吧!!

HTML5 之前,前端工程師要在用戶端瀏覽器儲存資料,會使用 cookies。HTML5 新增了 Web Storage 功能,取代了只能儲存 4kb 的 cookies。

Web Storage 的優點 (與 cookies 比較):

  • 更安全
  • 過往儲存於 cookies 中的資料,會在用戶端瀏覽器與伺服器之間運行:因為每次用戶端瀏覽器送出 request 至伺服器時,cookies 就會跟著被夾帶,就會占用到頻寬,而 Web Storage 因為純粹運作於用戶端用戶端瀏覽器,不會在用戶端瀏覽器與伺服器之間運行,所以就不需要占用網路頻寬。
  • 以往 cookies 最多只能儲存 4KB 的資料,而 HTML5 Web Storage 的儲存空間大得多,其容量依各個瀏覽器而不同,但是一般都至少有 5MB。
  • 速度更快

 

Web Storage 有分兩種:sessionStorage() 和 localStorage()。二者的最大的差異在於「生命週期長短」。

數據的生命期

localStorage:儲存於 localStorage 的資料可永久保存,可以跨瀏覽器分頁、新視窗、甚至是關閉瀏覽器後再打開,localStorage 仍然會存在,永不逾期,除非被清除。

sessionStorage:sessionStorage 的生命周期只存在於瀏覽器的單一分頁,也就是另開新分頁的話,又是一個新的 sessionStorage。除非另外設定逾期時間,否則 sessionStorage 會於分頁、瀏覽器等被關閉時被清除。 ※以下的語法通通都是寫在 Javascript

有效範圍

儲存於 local storage 的資料可以跨分頁(tab)運作,session storage 則不行。

用法

sessionStorage 和 localStorage 的語法都簡單且類似。其資料都是以 key/value pairs 的形式儲存。

儲存資料

localStorage.setItem("Key名稱", "字串值");

取得資料

//this will print the value
alert(localStorage.getItem("Key名稱")); 

移除資料

localStorage.removeItem("Key名稱");

移除所有資料

localStorage.clear();

以上的語法是以 localStorage 為例來示範,若是用儲存於 sessionStorage,把以上語法中的 「localStorage」 替換成 「sessionStorage」 即可。

 

 

 

其他閱讀

簡明扼要的HTML5入門課程(八):地理位置定位

簡明扼要的HTML5入門課程(九)上:Drag and Drop簡介

簡明扼要的HTML5入門課程(九)下:Drag and Drop簡介

暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

Python課程讓你與AI接軌 不必擔心被科技取代

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?