使用 Web 存放區在本機儲存檔案

本主題接續讀取本機檔案,並示範如何使用 Web 存放區,在本機儲存非大型檔案。

在本機儲存適度大小的檔案其中一個最簡單的方式就是使用 Web 存放區。Web 存放區與傳統的 Cookie 類似,但前者通常提供較大的儲存區配置。例如,Internet Explorer 10 允許每個網域擁有 10 MG 的容量以在本機儲存各種項目,例如字串、檔案、JavaScript 物件等等。下列程式碼範例示範如何使用這個技術,在本機儲存檔案。

附註  下列程式碼範例需要支援檔案 APIWeb 存放區的瀏覽器,例如 Windows Internet Explorer 10 或更新版本。

Canvas 繪圖應用程式

為了使後續的程式碼範例更為寫實,第一個範例採用了簡單的 HTML5 Canvas 型繪圖應用程式。這類應用程式可以合法在本機儲存檔案。這個範例將在之後延伸,以便在本機儲存使用者的藝術創作。

範例 1


<!DOCTYPE html>
<html>
  <head>
    <title>Simple Drawing App</title>
    <meta http-equiv="X-UA-Compatible" content="IE=10">
    <style>
      html { 
       -ms-touch-action: none;
       text-align: center; /* Center all contents of the page. */
      }
    </style>
  </head>
  <body>
    <h1>Simple Drawing App</h1>
    <h3>Example 1</h3>
    <canvas id="drawSurface" width="500" height="500" style="border:1px solid black;"></canvas> <!-- The canvas element can only be manipulated via JavaScript -->
    <div>
      <button id="erase">Erase</button>
    </div>
    <script>
      if (!document.createElement('canvas').getContext) {
        document.querySelector('body').innerHTML = "<h1>Canvas is not supported by this browser.</h1><p>To use this application, upgrade your browser to the latest version.</p>";
      }
      else {
        window.addEventListener('load', init, false); // Safety first.
  
        function init() {
          var canvas = document.getElementById('drawSurface'); // A static variable, due to the fact that one or more local functions access it.
          var context = canvas.getContext('2d'); // A static variable, due to the fact that one or more local functions access it.
  
          context.fillStyle = "purple";
  
          if (window.navigator.msPointerEnabled) {
            canvas.addEventListener('MSPointerMove', paintCanvas, false);
          }
          else {
            canvas.addEventListener('mousemove', paintCanvas, false);
          }
  
          document.getElementById('erase').addEventListener('click', eraseCanvas, false);
  
          function paintCanvas(event) { // The "event" object contains the position of the pointer/mouse.
            context.fillRect(event.offsetX, event.offsetY, 4, 4); // Draw a 4x4 rectangle at the given coordinates (relative to the canvas box). As of this writing, not all browsers support offsetX and offsetY.
          } // paintCanvas
  
          function eraseCanvas() {
            context.clearRect(0, 0, context.canvas.width, context.canvas.height);
          } // eraseCanvas
        } // init      
      } // else
    </script>
  </body>
</html>

若要使用這個非常簡單的應用程式,請將您的滑鼠移到正方形的畫布區。若要清除繪圖,只要按一下 [清除] 按鈕就可以了。

這個程式碼最複雜的部分或許就是在 init 中宣告為區域變數的兩個「靜態」變數:canvascontext。由於區域函式 (paintCanvaseraseCanvas) 會存取這兩個變數,因此可以在 init 終止後進行存取。這樣的優點是,不會弄亂全域命名空間。請注意,這個應用程式也可以搭配觸控式裝置使用,例如 Tablet PC。

使用 Web 存放區儲存檔案

如上所述,新式瀏覽器 (包括 Windows Internet Explorer 9 和更新版本) 支援 Web 存放區。Web 存放區有兩種類型:本機存放區和工作階段存放區。如同名稱所指示,工作階段存放區僅針對指定的瀏覽器工作階段持續存在。另一方面,本機存放區則無限期持續存在。

我們將使用本機存放區儲存使用者的繪圖。只要進行一些小修改即可,如以下範例所示:

範例 2


<!DOCTYPE html>
<html>
  <head>
    <title>Simple Drawing App</title>
    <meta http-equiv="X-UA-Compatible" content="IE=10">
    <style>
      html { 
       -ms-touch-action: none;
       text-align: center; /* Center all contents of the page. */
      }
    </style>
  </head>
  <body id="bodyElement"> <!-- This ID is used in the following script block for feature detection. -->
    <h1>Simple Drawing App</h1>
    <h3>Example 2</h3>
    <canvas id="drawSurface" width="500" height="500" style="border:1px solid black;"></canvas> <!-- The canvas element can only be manipulated via JavaScript -->
    <div>
      <button id="erase">Erase</button>
      <button id="save">Save</button>
      <button id="load">Load</button>
    </div>
    <script>
      function requiredFeaturesAvailable() {
        return (
                 !!window.addEventListener && // Use the double negative "!!" to force the object to a Boolean value.
                 !!document.createElement('canvas').getContext &&
                 !!window.localStorage
               );
      } // requiredFeaturesAvailable
      
      if ( !requiredFeaturesAvailable() ) {
        document.getElementById('bodyElement').innerHTML = "<h2>Required features are not supported by this browser.</h2><p>To use this application, upgrade your browser to the latest version.</p>";
      }
      else {
        window.addEventListener('load', init, false); // Safety first.
  
        function init() {
          var canvas = document.getElementById('drawSurface'); // A static variable, due to the fact that one or more local functions access it.
          var context = canvas.getContext('2d'); // A static variable, due to the fact that one or more local functions access it.
  
          context.fillStyle = "purple";
  
          if (window.navigator.msPointerEnabled) {
            canvas.addEventListener('MSPointerMove', paintCanvas, false);
          }
          else {
            canvas.addEventListener('mousemove', paintCanvas, false);
          }
  
          document.getElementById('erase').addEventListener('click', eraseCanvas, false);
          document.getElementById('save').addEventListener('click', saveCanvas, false);
          document.getElementById('load').addEventListener('click', loadCanvas, false);
  
          function paintCanvas(event) { // The "event" object contains the position of the pointer/mouse.
            context.fillRect(event.offsetX, event.offsetY, 4, 4); // Draw a 4x4 rectangle at the given coordinates (relative to the canvas box). As of this writing, not all browsers support offsetX and offsetY.
          } // paintCanvas
  
          function saveCanvas() {
            window.localStorage.canvasImage = canvas.toDataURL(); // Save the user's drawing to persistent local storage.
          } // saveCanvas
  
          function eraseCanvas() {
            context.clearRect(0, 0, context.canvas.width, context.canvas.height);
          } // eraseCanvas
  
          function loadCanvas() {
            var img = new Image(); // The canvas drawImage() method expects an image object.
            
            img.src = window.localStorage.canvasImage; // Retrieve the last saved artistic achievement from persistent local storage.
            img.onload = function() { // Only render the saved drawing when the image object has fully loaded the drawing into memory.
              context.drawImage(img, 0, 0); // Draw the image starting at canvas coordinate (0, 0) - the upper left-hand corner of the canvas.
            } // onload
          } // loadCanvas
        } // init
      } // else
    </script>
  </body>
</html>

範例 2 基本上是範例 1 的延伸,包括:

  • 我們會先針對我們要搭配 requiredFeaturesAvailable 函式使用的所有必要功能進行偵測。基於安全性的考量,我們會雙重取消相關物件,以便將物件「轉換」成布林值。

  • 接著,我們會加入兩個新的事件處理常式 (saveCanvaseraseCanvas),按一下 [儲存] 和 [載入] 按鈕時,會分別叫用這兩個事件處理常式。saveCanvas 函式只有一行:

    
    window.localStorage.canvasImage = canvas.toDataURL();
    
    

    這會將使用者的繪圖轉換為可以在網頁上顯示的形式,然後將繪圖以自訂的 canvasImage 屬性名稱 (這可以是您喜歡的任何有效名稱),儲存至本機存放區。

  • 按一下 [載入] 按鈕時,我們會擷取已儲存的影像,並將影像呈現在畫布上,如下所示:由於 canvas.drawImage 方法會預期是一個影像,因此我們會先建立一個新的一般影像物件,將影像物件的 src 屬性設為已儲存的繪圖 (這通常會設為指向某個圖形檔的 HTTP 路徑),然後在影像物件告訴我們其 src 屬性已完全載入時,我們會叫用 canvas.drawImage,以便將其傳送至畫布元素。

為了確實了解繪圖確實已經永久儲存,請建立一個繪圖、按一下 [儲存]、重新啟動電腦、再次啟動範例 2,然後 (注意不要不小心繪製在空白畫布上) 按一下 [載入],已儲存的繪圖就會「奇蹟般的」出現。

另外請注意,Web 存放區僅允許您儲存以字串為主的鍵值組。儘管如此,您還是可以使用 JSON.stringify(),儲存原始的 JavaScript 物件。下列範例示範如何進行這個動作:

範例 3


<!DOCTYPE html>
<html>
  <head>
    <title>Storing/Retrieving JavaScript Objects Using HTML5 Local Storage</title>
    <meta http-equiv="X-UA-Compatible" content="IE=10">    
  </head>
  <body>
    <h1>Storing Objects using Local Storage</h1>
    <h3>Example 3</h3>
    <p></p>
    <script>
      if (!!window.localStorage) {
        var person = { firstName: 'John', lastName: 'Anderson' }; // Create a JavaScript object literal.

        window.localStorage.person = JSON.stringify(person); // Convert the object to a string.
        person = JSON.parse(window.localStorage.person); // Convert the object string back to a JavaScript object.

        document.querySelector('p').innerHTML = "<strong>First Name:</strong> " + person.firstName + "<br /><strong>Last Name:</strong> " + person.lastName;
      }
      else {
        document.querySelector('body').innerHTML = "<h2>Local storage is not supported by this browser.</h2><p>To use this application, upgrade your browser to the latest version.</p>";
      }
    </script>
  </body>
</html>

練習

顯然地,上述繪圖應用程式充其量只是基本工。也就是說,您至少改善了這個應用程式,讓使用者必須在繪圖開始之前先在畫布上按一下,而且「不平整的」矩形 (易受滑鼠/指標速度影響) 會被取代成連續的流動線條。

相關主題

JSON 的簡略概觀
如何管理本機檔案
Internet Explorer 10 範例和教學課程
Web 存放區簡介
讀取本機檔案

 

 

顯示:
© 2015 Microsoft