💾 20장 클라이언트 스토리지

• 📖 자바 스크립트 완벽 가이드
  • 💾 20장 클라이언트 스토리지
    • 🌏 웹 스토리지
    • 🍪 쿠키
    • 🌐 IE User Data
    • 📴 오프라인 웹 애플리케이션
    • 💻 웹 데이터베이스
    • 📁 파일시스템 API
  • 로컬 스토리지와 세션 스토리지
    • 스토리지 생명주기와 범위
  • 스토리지 API
  • ⚡ 스토리지 이벤트
  • 🍪 쿠키
    • 쿠키 저장하기
    • 쿠키값 읽기
  • 애플리케이션 스토리지와 오프라인 웹앱
    • 애플리케이션 캐시 MANIFEST
    • 캐시 업데이트
    • 캐시 상태
    • 캐시 메서드

📖 자바 스크립트 완벽 가이드

💾 20장 클라이언트 스토리지

🌏 웹 스토리지

문자열 키와 값을 대응시킨 연관 배열인 로컬 스토리지와 세션 스토리지 객체로 구성되어 있다. 사용하기 쉽고 너무 크지않은 대용량 데이터를 저장하기에 적합하다.

🍪 쿠키

서버측에서 스크립팅 가능하도록 설계된 오래된 클라이언트 스토리지 메커니즘이다. 적은양의 텍스트 데이터르 저장할 경우에만 적절하다. 쿠키는 클라이언트에서 사용하더라도 HTTP 요청 시 항상 서버로 전송된다.

###🌐 IE User Data

IE 5 이후 버전부터 구현된 전용 클라이언트 스토리지 메커니즘

###📴 오프라인 웹 애플리케이션

HTML5에서 해당 페이지의 리소스를 캐시할 수 있게 해주는것 스트로지의 개념보다는 데이터 그 자체를 의미한다.

💻 웹 데이터베이스

사파리, 크롬, 오페라에서 SQL데이터 베이스를 위한 클라리언트 API (표준화는 실패했다.)

📁 파일시스템 API

XMLHttpRequest를 통해 선택할 파일을 업로드 할 수 있게 해주는 File객체를 지원하게되어 만든것.

로컬 스토리지와 세션 스토리지

두 객체 모두 Window객체의 프로퍼티가 정의되어있다. 두 객체는 데이터를 얼마나 오래 보관할지 결정하는 생명주기와 접근 가능 대상을 지정하는 범위에서 차이가 있다.

localStorage.x = 10;
var x = parseInt(localStorage.x); // 데이터를 가져올때는 형변환후 해석해야한다.

localStorage.lastRead = (new Date()).toUTCString();

localStorage.data = JSON.stringify(data); //인코딩하여 저장후
var data = JSON.parse(localStorage.data); //디코딩해서 가져온다.

스토리지 생명주기와 범위

로컬 스토리지의 데이터는 만료 기한이 없고 범위는 문서의 출처(URL)에 한정된다. 세션 스토리지의 데이터는 최상위 창이나 해당 스크립트를 실행하는 브라우저의 탭과 생명주기가 같다. 세션 스토리지의 범위는 개별 창에 기반을 둔 범위를 갖는다.

스토리지 API

✔️ length는 프로퍼티로 존재한다.

⚡ 스토리지 이벤트

스토리지에 저장된 데이터가 변경될 때마다, 브라우저는 이 데이터를 사용하는 다른 Window객체에 스토리지 이벤트를 발생시킨다.

• key : 설정되거나 삭제된 데이터의 이름 또는 키이다.
• newValue : 특정 스토리지 데이터의 새로운 값 또는 remoteIte()이 호출됬을때 null을 저장한다.
• oldValue : 변경되었거나 삭제된 데이터가 가지고 있던 본래 값을 저장한다.
• url : 스크립트가 포함된 문서의 URL

🍪 쿠키

쿠키 데이터는 웹브라우저와 서버 사이에서 자동으로 전송되므로, 서버 측 스크립트는 클라이언트에서 저장한 쿠키의 값을 읽거나 쓸 수 있다.

❗ 쿠키는 어떤 종류의 암호화 기법도 사용하지 않기 때문에 정보 전달시 보호받지 못한다.

• 쿠키는 메서드가 존재하지 않으며 Document객체의 cookie 프로퍼티를 통해 조작한다.

• 각 쿠키별로 생명주기와 범위는 개별 지정 할 수 있다. max-age ( 기본적으로는 일시적이다. )

• 도메인의 depth를 지정( 경로를 지정 ) 함으로써 쿠키를 공유 할 수 있다.

쿠키 저장하기

일시적인 쿠키를 만드려면 cookie프로퍼티를 문자열 형식으로 설정하자.

document.cookie = "version=" + encodeURIComponent(document.lastModified);

• name
• max-age
• path
• domain
• secure

쿠키값 읽기

보통 개별 이름=값 쌍을 분리해 낼 수 있도록 split() 메서드를 사용해야 할것이다. 값을 추출한 후 해당 값을 해석하기 위해 decodeURIComponent()에 전달후 JSON.parse()를 사용해 객체로 변환한다.

애플리케이션 스토리지와 오프라인 웹앱

애플리케이션 캐시 기능의 추가로 HTML과 CSS JS IMG 등의 파일 자체를 저장하는것이 가능해졌다. 애플리케이션이 설치되면 자체적으로 제거하거나 사용자가 직접 지우기 전까지 남아있게 된다.

오프라인 웹앱은 애플리케이션 캐시에 설치된 것으로 동작하고 로컬 스토리지를 사용해 데이터를 저장한 다음, 온라인 상태가 되면 저장된 데이터를 서버로 전송하여 동기화하는 방식으로 동작한다.

애플리케이션 캐시 MANIFEST

요청할 URL들의 목록을 담고 있는 매니페스트 파일을 생성한 후 태그에 manifest속성을 설정하여 HTML페이지와 연결해준다.

• MANIFEST의 구성

CACHE MANIFEST

myapp.HTML
myapp.js
myapp.css
images/background.png
// resource들

캐시 업데이트

캐시된 웹 애플리케이션은 모든 파일을 캐시에서 불러온다. 브라우저가 오프라인 상태일떄도 마찬가지로 매니페스트 파일의 변경을 비동기적으로 확인할 것이다.

브라우저는 캐시 수정 과정에서 다수의 이벤트를 발생시키며, 이벤트 핸들러를 등록할 수 있다.

applicationCache.onupdateready = function(){
		var reload = confirm("애플리케이션 새로고침이 필요합니다. 지금 새로고침 하겠습니까?");
		if (reload)
			location.reload();
}

• 업데이트할것이 없는 상태

  • noupdate

• 업데이트할것이 있는 경우

  • downloading 이벤트가 발생하고 매니페스트를 참조하며 모든 파일들을 캐시

• 새 애플리케이션을 처음 로드하는 경우

  • downloading과 progress 이벤트가 발생되며 다운로드 완료시 updateready가 아닌 cached이벤트가 발생

• 브라우저가 오프라인 상태인 경우

  • 매니페스트를 확인할 수 없으므로 error

• 매니페스트를 찾을 수 없는 경우

  • obsolete 발생 후 애플리케이션을 캐시에서 삭제

캐시 상태

• UNCACHED
  • manifest속성을 확인할 수 없음.
• IDLE
  • 최신버전으로 캐시된 상태
• CHECKING
  • 매니페스트 파일을 확인중인 상태
• DOWNLOADING
  • 파일들을 다운로드한 다음 캐시에 적용하는 중인 상태
• UPDATEREADY
  • 새버전을 다운로드하고 캐시한 상태
• OBSOLETE
  • 매니페스트가 없어서 애플리케이션 캐시는 삭제될 예정인 상태

캐시 메서드

• update()

  • 애플리케이션의 새 버전을 확인하기 위한 캐시 업데이트 알고리즘을 명시적으로 호출한다.

• swapCache()

  • 브라우저가 이전 버전의 캐시를 폐기하고 앞으로의 요청들이 새 캐시를 가져올게 해준다.

✔️ 상태값이 UPDATEREADY 이거나 OBSOLETE 일때만 의미가 있다.