웹 저장소를 사용하여 로컬에 파일 저장

이 항목은 로컬 파일 읽기가 중단된 지점에서 시작되며 웹 저장소를 사용하여 대용량이 아닌 파일을 로컬에 저장하는 방법을 보여 줍니다.

적당한 크기의 파일을 로컬에 저장하는 가장 간단한 방법 중 하나는 웹 저장소를 사용하는 것입니다. 웹 저장소는 기존 쿠키와 유사하지만 일반적으로 더 큰 저장소 할당을 제공합니다. 예를 들어, Internet Explorer 10에서는 문자열, 파일, JavaScript 개체 등 다양한 항목을 로컬에 저장하는 데 도메인당 10MG를 허용합니다. 다음 코드 예제에서는 이 기술을 사용하여 로컬에 파일을 저장하는 방법을 보여 줍니다.

참고  다음 코드 예제를 실행하려면 Internet Explorer 10 이상과 같이 파일 API웹 저장소를 지원하는 브라우저가 필요합니다.

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가 종료된 후에 액세스할 수 있습니다. 따라서 전역 네임스페이스가 복잡해지지 않는 장점이 있습니다. 이 응용 프로그램은 태블릿과 같은 터치 사용 가능 장치에서도 작동합니다.

Web Storage를 사용하여 파일 저장

위에서 설명한 대로 최신 브라우저(Windows Internet Explorer 9 이상 포함)는 웹 저장소를 지원합니다. 웹 저장소에는 로컬 저장소와 세션 저장소라는 두 가지 유형이 있습니다. 이름이 시사하듯 세션 저장소는 지정된 브라우저 세션 중에만 유지됩니다. 그러나 로컬 저장소는 무제한으로 유지됩니다.

로컬 저장소를 사용하여 사용자의 그리기를 저장합니다. 다음 예제에 표시된 대로 이 작업은 비교적 간단해 보입니다.

예제 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에서 렌더링합니다. canvas.drawImage 메서드에는 이미지가 필요하므로 먼저 새로운 일반 이미지 개체를 만들고 해당 src 특성을 저장된 그리기(일반적으로 그래픽 파일을 가리키는 HTTP 경로로 설정됨)로 설정한 다음 개체의 src 속성이 완전히 로드된 것으로 이미지 개체에 표시되면 canvas.drawImage를 호출하여 canvas 요소로 전송합니다.

그리기가 영구적으로 저장되었는지 확인하려면 저장을 클릭하고 컴퓨터를 다시 시작한 다음 예제 2를 다시 시작하고 실수로 빈 canvas에 그리지 않도록 주의하여 로드를 클릭합니다. 그러면 저장된 그리기가 "신기하게" 나타납니다.

이와는 별도로 웹 저장소만 사용하여 문자열 기반 키/값 쌍을 저장할 수도 있습니다. 이런 경우에도 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>

연습

명확히 말해 위의 그리기 응용 프로그램은 기본적입니다. 최소한 그리기가 시작되기 전에 사용자가 먼저 canvas를 클릭하고 "뭉툭한" 직사각형(마우스/포인터 속도에 민감)이 연속되는 흐름 선으로 대체되도록 이 응용 프로그램을 개선하는 것이 좋습니다.

관련 항목

JSON에 대한 간략한 개요
로컬 파일을 관리하는 방법
Internet Explorer 10 샘플 및 자습서
DOM 웹 저장소 소개
로컬 파일 읽기

 

 

표시:
© 2014 Microsoft