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.CSS和Font Awesome，要秀一個選單其實跟之前沒有什麼差別。

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

To Be Continued