YouTube Data API、indexedDB、W3.CSS

這篇文章所有的 JavaScript,都要搭配 MooTools

這個 Blog 上面有個音樂,按下去有 YouTube 的播放清單,產生那個清單很簡單:

  1. 用YouTube Data API 取得我在 YouTube 公開的的播放清單
  2. 將清單 Title 放到下拉選單

可是這樣每次一換頁,就要去叫一次 YouTube Data API,所以最好把結果 cache 在瀏覽器的 storage 裡面,有 localStorage、sessionStorage 等,我因為沒有用過 indexedDB,所以就用 indexedDB 當 cache,所以多一個步驟:

  1. 檢查 indexedDB 有沒有預存的播放清單 
  2. 沒有的話就用 YouTube Data API 取得,並存入 indexedDB 
  3. 將清單 Title 放到下拉選單

YouTube Data API

YouTube Data API 文件在https://developers.google.com/youtube/v3/getting-started,就照這裡的說明:

  1. 去 Google API Console 註冊 App,並取得 API Key
  2. 因為是取得公開的播放清單,所以認證可以略過,也不用下載 client library。
  3. 還需要 YouTube channel ID,這邊有講 https://support.google.com/youtube/answer/3250431?hl=zh-Hant

單就去拿playlist,是非常簡單的事情,以下這段就可以了:

YouTube Data API + indexedDB

就是做這三件事情:

  1. 檢查 indexedDB 有沒有預存的播放清單 
  2. 沒有的話就用 YouTube Data API 取得,並存入 indexedDB 
  3. 將清單 Title 放到下拉選單

這邊一個比較特別的是 DBVersion,每天都會產生一個新的數字,這數字會越來越大,所以當

  1. indexedDB 沒有 MY_DBNAME,
  2. indexedDB 有 MY_DBNAME,但是版本小於指定的 DBVersion

就會發生 upgradeneeded 的事件,否則就是 success 事件。

其中有一點要注意的,當 onupgradeneeded 跑到DB.createObjectStore()那一行之後,就會發生 success 事件,所以在 onupgradeneeded 先把 success 的 callback 取消了。

cursor.continue();會讓 Minify JS 發生錯誤,所以改用cursor['continue']()

YouTube Data API + indexedDB + W3.CSS

以下是用了W3.CSSFont Awesome,要秀一個選單其實跟之前沒有什麼差別。

只有addPlaylist(DB)裡面有一點點不一樣,不過作的事情其實都一樣。

To Be Continued