HTML5-웹스토리지, File API

웹스토리지

• 기존엔 클라이언트 컴퓨터에 입력했던 데이터들을 저장하는 방식으로 웹서버와 통하는 쿠키를 사용했다.
• 그러나 쿠키는 용량, 보안성 등 단점이 많았다.
• 이 때 등장한게 웹스토리지인데 웹스토리지는 클라이언트컴퓨터안에 데이터를 저장하는 메커니즘으로 안전하며 속도도 빠르다. 서버와 통신하지 않으므로 네트워크에 부담이 안된다.
• 웹스토리지 안에 데이터는 키/값의 쌍으로 저장된다.
• 웹스토리지엔 데이터를 저장하기 위해 두 가지 종류의 객체가 있다.
  • localStorage
  • sessionStorage

---

File API

• File API의 쓰임새는 사용자가 파일을 선택해서 서버로 전송하는 것
• File API에 쓰이는 객체는 2가지이다.
  • File → 객체 추출 / 로컬 파일 시스템에서 얻어지는 파일 데이터를 나타낸다.

      var files = document.getElementById("input").files;
      if (!files.length) {
          alert("파일을 선택하세요!");
          return;
      }
      var file = files[0];
      var reader = new FileReader();
      reader.onload = function () {
        $("#result").val(reader.result);
      };
      reader.readAsText(file, "utf-8")
    

  • FileReader → 이벤트 처리를 통해 파일의 데이터에 접근하는 메소드를 제공하는 객체

---

어플리케이션 캐시

• html을 통해 웹 어플리케이션을 만들 수 있는데 그 어플리케이션은 온라인 뿐만아니라 오프라인에서도 작동해야한다. 오프라인에서도 작동시킬 때 어플리케이션이 사용하는 파일을 어플리케이션 캐시에 저장시키면 효율적이다.