날짜 : 2017. 12. 21.(목)
HTML5 쿠키, 세션스토리지, 로컬스토리지
1. 생각하게 된 동기
- 검색이력을 화면에서 보여주고 싶었다.
- 검색을 하니 무언가가 나오는데, 어느것을 사용해야 할까?
- 사실은 자동완성이 먼저였지만, 대부분 백엔드를 구현한 ajax통신 뿐이여서....
2. 생각한 내용
- summary
| 구분 | 쿠키 | 세션스토리지 | 로컬스토리지 |
|---|---|---|---|
| 용량 | 4Kb | 디바이스별, 브러우저별 상이(1Mb이상) | |
| 만료 | expire 설정별 다름 | 브러우저 종료시 | 지속 |
| 서버와통신 | Header에 포함 | 통신하지 않음 | |
-
쿠기 나오게 된 계기
- HTTP protocol의 특성에 따라 서버와 연결을 유지 하지않고 (connectionless), 상태값도 가지지 않는다.(stateless)
- 홈페이지에 로그인 후 CRUD 작업을 할려고 해도 HTTP protocol에서 로그인 되어 있는 상태를 유지 하지 않아서 CRUD 작업이 불가능
- 이를 위해서 HTTP protocol에 별도의 정보 파일을 넣어서 통신에 사용.
- 로컬의 쿠키파일을 가져가거나, 통신하는 패킷의 쿠키파일을 열어볼 수 있어서 보안상 이슈가 있다.
-
나머지 스토리지
- HTML5가 나오면서 지원하는 기능
- 일부 브라우저 에서는 지원이 안되기도 한다.
- 쿠키에 임시적인 정보를 담아도 통신에 포함되어 응답, 반응을 하기 때문에 서버와의 통신에 사용하지 않는 경우에 사용을 한다.
3. 참고 사이트
'개발일지' 카테고리의 다른 글
| 웹 어플리케이션 설계 느낀점. (왜 설계에 관한 자료는 없지?) (0) | 2017.12.27 |
|---|---|
| 잘못을 인지 하는 방법은 없을까? (react에서 cookie 사용 삽질기) (0) | 2017.12.27 |
| 시간(Performance)과 도구(Library)를 사용하는 것에 대한 생각. (0) | 2017.12.21 |
| React에서 Table 표현하기 (부제:템플릿 사용에 대한 고찰) (0) | 2017.12.20 |
| React 디자인 툴을 사용해 보자 1편 (sketchapp, react-sketechapp) (0) | 2017.12.17 |
