html - 웹 스토리지와 기타 API

웹 스토리지란 웹 브라우저에 자료를 저장하기 위한 기능이다.

웹 스토리지의 종류는 로컬 스토리지와 세션 스토리지 두가지로 나뉜다.

로컬 스토리지는 브라우저 종료와 무관하게 자료를 보관하는 반면,

세션 스토리지는 세션이 종료될 시 저장된 자료가 사라진다.

​

<로컬 스토리지>

- 장치에 데이터를 저장하기 위해 사용한다. (저장 기간 제한이 없음)

- key/value 쌍으로 데이터를 저장한다.

- windsow.localStorage 객체와 Storage 이벤트, StorageEvent 객체를 이용한다.

​

- window.localStorage.setItem("키이름", "문자열값") : 데이터 저장

- window.localStorage.getItem["키이름"] : 데이터 읽기

- window.localStorage.removeItem("키이름") : 한 항목 삭제

- window.localStorage.clear() : 전체 키 삭제

- window.localStorage.key(i) : i 인덱스의 키를 반환 (0부터 시작)

- window.localStorage["키이름"] = "문자열값" : 키이름에 해당하는 항목에 문자열값을 value로 저장

- window.localStorage["키이름"] : "키이름"에 해당하는 항목의 value 값 읽기

​

​

<세션 스토리지>

- window.sessionStorage 객체를 사용한다.

- 메소드, 속성, 이벤트는 localStorage 객체와 동일하게 사용한다.

​

​

<파일 API>

- 웹 애플리케이션이 클라이언트의 로컬 파일을 읽어오는 기능이다.

- 텍스트 형식, 이진 형식 가능

- File 객체 : 파일 이름과 크기 등의 정보에 접근

- FileReader 객체 : 파일 내용을 읽는 객체

​

<app 캐시 API>

- 오프라인 웹 애플리케이션 실행에 필요한 파일을 애플리케이션 캐시에 보관한다.

- 애플리케이션 캐시 : 오프라인 실행을 목적으로 필요한 파일을 의도적으로 캐시에 저장한다.

- 저장된 파일 재사용 가능

​

<인덱스드 데이터베이스 API>

- 데이터를 key/value 쌍으로 저장한다.

- 대용량 데이터 저장이 가능하며, 인덱스를 사용하요 구조화된 데이터의 검색,저장이 가능하다.

​

​

<웹 소켓>

- 웹에서 양방향 통신을 제공하는 프로토콜로 웹 브라우저와 서버 사이의 동적 연결을 제공한다.

- 서버로 메시지를 전송하거나, 서버의 응답을 받아오는 것이 가능하다. (실시간 통신)

​

<웹 워커>

- 자바스크립트 코드를 백그라운드에서 실행시켜 웹 애플리케이션에서 병렬처리를 지원하기 위한 API이다.

- Worker 스레드로 생성하여 동작한다.

- window 객체 접근 불가 -> DOM 접근 불가