標籤: HTML5 頁1
教學
HTML5 的 Web Storage- local storage 與 session storage
以往我們要在使用者端存取資料會使用 cookie，但 cookie 可以存的資料非常有限，所以後來 HTML5 發展出了 Web Storage，而 Web Storage 又分成了 local storage 和 session storage。
教學
修改 html input placeholder 的顏色
placeholder 是 HTML5 後新增的 input 欄位的浮水印效果，可以用來提示使用者輸入的內容與格式之類的，要修改 placeholder 的顏色，要使用 CSS 的 ::placeholder 屬性。
教學
使用 Indexed Database API 存取資料
使用 Indexed Database API 開發的步驟為：1. 建立資料庫 2.建立 object store 3. 在 transaction 中處理資料。
教學
PWA 與 Service Worker
Service Worker 是一種 JS 的 Web Worker ，他是一隻獨立運行於瀏覽器頁面執行緒之外的一隻 JS 檔案，可以攔截網路請求，存取快取資源，並且能傳送訊息。也因為 Service Worker 可以攔截網路請求並改變 reponse，所以只能在 localhost 或是 https 上使用。
教學
Web App Manifest
Web App manifest 是一個 JSON 格式的文件，它提供了應用程式相關的資訊，像是名稱、作者、圖示和描述等，還可以設定類似 app 的開啟畫面，可以讓使用者將 Web 應用程式安裝到設備的主畫面，提供更快速的訪問和更豐富的體驗。
教學
HTML5 的 Geolocation(地理位置) API
Geolocation 的定位是透過電腦的IP、WIFI定位法、手機三角定位及GPS來取得經緯度，所以大部分的情況用手機的定位會比較精準一些，但也可能因為環境的關係會飄到奇怪的地方，要使用的話要注意誤差的問題。
教學
IndexedDB基礎概念
IndexedDB 讓我們透過資料鍵 (key) 儲存、取回物件。所有對資料庫的變更都發生在交易操作；如同大部分網頁儲存方案，IndexedDB 遵守同源政策，也就是說我們只能存取同網域下的資料。
教學
HTML5 新的 input 屬性
HTML5 新的 input 的類型，包含color、range、number、email、url、tel、search、date、time、datetime-local、week、month...等
教學
Shared workers- 跨越不同 window、iframe 或 worker處理 script
要在兩個頁籤(視窗)共用一個 script，我們可以使用 Shared workers 來執行。
教學
讓網頁在背景執行緒 (Thread) 中執行程式- Web Workers
Web Workers 提供簡單的方法讓網頁在背景執行緒 (Thread) 中執行程式，而不干擾使用者介面運行，而且兩線可以透過 postMessage 發送訊息、onmessage 接收訊息來溝通。
教學
HTML5 的 File API
透過 File API ，我們可以讓瀏覽器顯示預備要上傳的檔案的資料，接著利用 readAsText 抓取文字內容或利用 readAsDataURL 抓取圖片內容。