Ext JS Save the data to the session storage

  1   Session Storage

---

 HTML5에서 제공하는 저장소중 하나. 다른하나는 Local Storage이다. 하지만 지금 필요한건 Session Storage이기때문에 Local Storage는 나중에.. 근데 사용법같은건 동일한것같다.

 우선 Session Storage는 이름 처럼 각각 Session 단위로 데이터를 저장한다. 브라우저를 열때마다, 즉 하나의 윈도우가 생성 될때마다 생성된다. 이렇게 생성된 Session Storage끼리는 서로 공유도 안될 뿐더러 윈도우를 종료하는순간 모든 데이터가 지워지게 된다. 보안상 노출되어도 되는것, 잠깐 저장했다 지워야하는 것들을 저장하면 될거같다.

  2   Model Source

---

 Ext JS에서 Session Storage를 사용하기 위해 모델을 만들었다. 일반 자바스크립트에서 사용하듯이 쉽게 사용해도 되지만 나중을 위해 Ext JS에서 제공하는 방식대로 하는게 맞는것 같다.

 모델을 생성할 때 기본키 설정을 해주지 않으니 이상한 숫자가 들어갔다. 다른 브라우저는 테스트 해보진 않았지만 적어도 크롬에서는 1부터 임의로 아이디를 부여했다.

위 모델은 로그인 과정을 거치고 서버에서 보내준 JSON 데이터로 채웠다.  서버에서 넘어온 JSON 데이터는 다음과 같다.

message는 처리된 내용을 말하는거고 success는 처리 결과를 말해준다. 필요한건 data 오브젝트이다. message를 보니 로그인도 성공했고, success도 true로 떨어진걸 보니 넘어온 데이터를 Session Storage에 두고 사용해도 될것같다.

  3   Save the data to the session storage 

---

 검증도 마쳤으니 Session Storage에 저장해야한다. 해당 코드는 로그인 검증을 마치고 success가 true로 떨어졌을때 실행되는 함수의 일부이다.

코드대로라면 로그인검증이 끝나고 success가 true이면 Session Storage에 {userNo:admin, userPwd:12345, userAuth:administrator} 요 내용이 저장되어야한다.

처음에 Ext.create()만 호출하고 왜 Session Storage에 저장이 안되나 검색을 했었는데. 멍청하게도 save()를 안해서였다. 모델에 프록시를 설정해 놓았으니 당연히 save를 했어야하는데..

이과정들을 거친후의 브라우저의 Session Storage 상황은 다음과 같이 나왔다.

첫번째는 Model에서 idProperty를 이용하여 기본키를 userNo로 설정했을 때고 두번째 사진은 아무런 설정을 하지 않았을 때이다.

지금 상태에서 브라우저(윈도우)를 종료하면 이 데이터들은 지워지게 된다. 위의 코드에서는 스토어의 get함수를 가져온것이다. Session Storage의 값을 가져오기위해선 자바스크립트의 함수를 사용하면 쉽게 가져올 수 있다.