HTML5에서 사용 가능한 클라이언트 세션 (sessionStorage)

sessionStorage 란?

HTML5에서 사용 가능한 클라이언트 세션 (sessionStorage)

(Firefox 3+, Safari 4+, and Internet Explorer 8+  지원)

sessionStorage 특징

- 윈도우 새션(또는 탭) 별로 다 다른 sessionStorage를 갖는다.

 즉, 쿠키와는 다르게 데이터를 공유하지 않는다.

- 현재 페이지에서 다른 페이지로 갔다가 돌아와도 데이터는 유지된다.

 해당 페이지를 닫기 전까지는 바인딩이 되어 있다.

- key:value 형식으로 데이터를 저장한다.

5가지 메소드 지원

 getItem(key)        – 키의 값 호출, 키가 없으면 null

 setItem(key, value) – 키와 값 설정

 removeItem(key)     – 키 제거

 key(position)       – x 번째 키 값을 리턴

 clear()             – 모든 key-value 제거

* 사용방법, 예시

//save a value 

sessionStorage.setItem("name", "Nicholas"); 

//retrieve item 

var name = sessionStorage.getItem("name"); 

//get the key name for the first item 

var key = sessionStorage.key(0); 

//remove the key 

sessionStorage.removeItem(key); 

//check how many key-value pairs are present 

var count = sessionStorage.length;

* 객체 처럼 사용할 수도 있음.

//save a value 

sessionStorage.name = "Nicholas"; 

//retrieve item 

var name = sessionStorage.name; 

//remove the key 

delete sessionStorage.name;

브라우저 별 특징

- Firefox 3 returns an object when reading a value from sessionStorage. 

 The object has a property named value that contains the actual string value that was stored.  

 Firefox 3.5 correctly returns a string when retrieving values.

- Firefox 3 doesn’t implement the clear() method; Firefox 3.5 does.

- Internet Explorer 8 doesn’t allow you to remove a key by using the delete operator.

- Firefox 3.5 is the only browser that maintains sessionStorage data when the browser crashes 

 and makes it available when the browser is restarted after a crash.

- Internet Explorer 8 saves data to s asynchronously while the others do so synchronously. 

 To force IE to write immediately, call the proprietary begin() method, then make your 

 changes, then call the proprietary commit() method.

- Firefox’s and Safari’s storage limit is 5MB per domain, 

 Internet Explorer’s limit is 10 MB per domain.

- Internet Explorer 8 only supports the url property of the event object.

- Firefox 3 and 3.5 throw errors when you try to access sessionStorage if cookies are disabled 

 on the browser

[출처] https://www.nczonline.net/blog/2009/07/21/introduction-to-sessionstorage/