html5 localstorage

HTML5에서는 클라이언트데이터를 저장하는 2개의 객체를 제공한다.
하나의 세션 단위로 데이터를 저장하는 Session Storage와, 만료 기간이 없는 Local Storage가 있다. 두 가지 다 key/value 쌍으로 저장된다.

사용법

모든 key와 value는 string로 저장된다. object는 저장할 수 없다.

특징

프로토콜, 호스트, 포트 중 어느 하나라도 다르면, 각각 별도의 공간에 데이터가 저장된다. (공유되지 않는다.)
대부분 Origin 당 5MB 정도를 저장할 수 있다. 문자열만 저장되며 UTF-16으로 저장된다. 
5메가가 넘을 경우, QUOTA_EXCEEDED_ERR 오류 발생
모바일 브라우저의 경우 옵션을 켜야 사용할 수 있음.

저장소

물리적으로 저장된다. 크롬은 localStorage로 SQLite 를 사용하며, Mac OS 에서는 해당 파일을 아래 디렉토리에 저장한다.

~/Library/Application Support/Google/Chrome/Default/Local Storage

데이터 파일은 `프로토콜_도메인_인덱스.localstorage` 라는 이름의 파일로 저장된다.

예를 들어 abc.com에서 생성한 로컬 스토리지라면, `http_abc.com_0.localstorage`라는 파일로 저장된다.

페이지가 로드되기 전에, 브라우저는 물리적으로 저장되어 있는 데이터를 읽어 메모리에 올려둔다.

만료기간

만료기간은 따로 설정할 수 없으며, 사용자가 직접 데이터를 삭제하기 전까지는 영구 보관된다.

성능

로컬 스토리지는 동기적으로 작동한다.

즉 로컬 스토리지에 값을 설정하거나 가져올 때에는 렌더링이 블락된다.

또한 로컬 스토리지는 File I/O를 발생하기 때문에 다른 작업에 비해 비용이 큰 편이다.

따라서, 빈번하게 많은 양의 데이터를 읽고 쓰거나, 1MB 이상의 큰 데이터를 쓰는 것은 피하는 것이 좋다.

보안

일단은 쿠키와 비교했을 때, 클라이언트의 디바이스에 직접 저장되고 네트워크로 전송되지 않기 때문에 네트워크 레벨에서는 안전하다고 볼 수 있다. 하지만 암호화하지 않은 경우 모두 노출될 수 있다. 
고로 보안이 필요한 데이터는 localStorage를 사용하지 않는 것이 좋다.

Like what you read? Give 김광수 a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.