簡介： 網頁程式有個先天的限制，為了安全起見，最多只能讀取本機檔案，絕對不能直接建立或修改檔案。因此很多資料的儲存很不方便，之前只有一個所謂的Cookie物件，容量小還常常被瀏覽器禁用，很多應用程式被迫要將客戶個人的資料存到伺服端，不僅存取速度變慢，伺服端也因此平添很大的負擔。到了新的HTML5時代，有了新的客戶端儲存資料的方式。本單元就以 localStorage這個物件為基礎，建立一個網頁版的記事本，讓同學體驗一下。 網頁設計 請在網頁上布置物件如上圖。最上方是一個Textarea物件，接著是一個Text1與Button1，再下來是兩個Button2與Button3按鍵，最下方是一個Select也就是選單物件，功能類似視窗程式中的ListBox物件。 網頁預期的操作方式是：在Textarea裡面編寫文字內容，再到Text1寫「檔名」，按下「存檔」之後檔名會出現於Select1物件之中，接下來可以選取Select1顯示的檔案項目，然後用兩個 Button「開檔」或「刪除」檔案。 當然即使是HTML5也是不能真的處理本機檔案的！所此地的「檔案」只是瀏覽器所管理的變數而已，但是這些資料即使你關閉瀏覽器，下次開啟這一個網頁時，資料還是在的！儲存量據說可以高達5~10M，一部文字檔的小說沒問題。 程式碼： 接下來雙按三個Button按鍵，寫JS程式碼如下即可： 程式說明： 1. 網頁開啟時段落的程式與之前單元習慣在body標籤用onload事件定義啟動時要跑 init 副程式的意義相同。此地的 init 主要是一個迴圈，會一一將 localStorage內的變數取出，建立成Select1物件內的選項(option)。 2. 存檔案其實是使用 localStorage 物件設定一個新的變數，key值是Text1 的內容，value則是 Textarea1 裡面的內容，也就是使用者編輯的文字，中英文皆可，分行也沒問題，當然貼圖就要求太高了。存完使用location.reload()指令作用如同重新整理，新的「檔案」就會出現於 Select1 選單了！ 3. 開檔案就是讀取選擇的 localStorage 變數，名稱顯示於 Text1，內容顯示於 Textarea1。 4. 刪檔案其實就是刪除選擇的 localStorage 變數，刪完之後也是用 location.reload()指令重新整理。 試試看！你可以用這個網頁當記事本了！只是你在此存的「檔案」在作業系統的檔案總管裡面是看不到的。 除了 localStorage 還有一個類似物件 sessionStorage 可以儲存資料，但是僅限本視窗開啟期間有效，一旦關閉瀏覽器這個變數就消失了，只能做網頁操作期間的變數，這與JS宣告的公用變數作用一樣，所以其實可有可無。 因為網頁程式目前有了製作成行動裝置App的任務，如果程式無法自主的存取資料將是一個極大的困擾與限制，有了這一招，相信可以揮灑的空間就會大很多很多了。事實上目前也有客戶端的SQL資料庫物件可以使用了，但是各瀏覽器的支援不一，也很不好用，最重要的是很少有這種複雜的需求，在此就不深入介紹了。