Browser Storage or Client-side Storage
Local Storage, Session Storage, Cookie가 있다
server-side Storage와는 달리,
JavaScript API를 통해 클라이언트에 정보를 저장하고 필요 시 가져다 쓸 수 있다. server-side Storage와 비교했을 때 정보를 로컬에 저장하는 것이므로 즉각적인 사용이 가능하다는 것이 장점이다.
따라서 자주 가져와서 사용해야하는 종류의 데이터라면 Browser Storage에 저장하는 방법을 사용하는 것이 좋다고 할 수 있다
사용 빈도수가 높은 정보 예시
- 사용자 이름(닉네임)
- 쇼핑카트 정보
- Todo List 아이템
- 사용자 이전 로그인 정보
- 페이지 렌더링에 영향을 주는 사용자 맞춤의 사이트 세팅(컬러 테마, 폰트 크기, UI..)
Web Storage
클라이언트에 데이터를 저장할 수 있도록 HTML5도입과 함께 추가된 Storage
Local Storage와 Session Storage가 있다.
1. Local Storage
- 사용자가 수동으로 데이터를 지우기 전까지는 데이터가 만료되지 않고 계속 남아있다 (브라우저의 메모리가 삭제되지 않는 한)
- JavaScript와 HTML5를 통해서만 Local Storage 정보에 접근할 수 있다
- 저장용량은 10MB
string타입만 가능- 서버로 전달되지 않음
- client-side에서만 데이터를 읽을 수 있으며 server-side에는 읽을 수 없음
2. Session Storage
- Local Storage와 매우 유사하나 다른 점은 저장 기간
- Local Storage와 달리 Session Storage에 저장된 데이터는 탭을 닫는 순간 사라짐
Cookie 🍪
HTML5 도입 이전에는 쿠키를 통한 저장만 가능했음
클라이언트가 쿠키에 요청을 담아 서버로 보내고,
서버가 쿠키에 응답을 담아 클라이언트에 보내는 것이 가능함
그래서.. 무슨 저장방법을 사용해야함?
기준 요소
1. 저장 용량
2. 접근성
3. 유효기간
| Cookies | Local storage | Session storage | |
|---|---|---|---|
| Capacity | 4KB | 10MB | 5MB |
| Browsers | HTML 4 / HTML 5 | HTML 5 | HTML 5 |
| Accessible From | Any window | Any window | Same tab |
| Expiration | Manually set | Never | On tab close |
| Browser support | Very high | Very high | Very high |
| Supported data types | String only | String only | String only |
| Auto-expire option | Yes | No | Yes |
| Storage Location | Browser and server | Browser only | Browser only |
| Sent with requests | Yes | No | No |
| Editable and Blockable by users | Yes | Yes | Yes |
참고자료
oneThing