35. 웹 스토리지 (Web Storage) , 로컬 스토리지 (Local Storage) , 세션 스토리지 (Session Storage) 개념 설명

---

[웹 스토리지 화면]

​

---

[웹 스토리지 (Web Storage) 란 ?]

​

1. 웹 스토리지(Web Storage)는 서버가 아닌, 클라이언트(브라우저)에 데이터를 저장할 수 있도록 지원하는 기능입니다

​

​

2. 웹 스토리지(Web Storage)는 Key 와 Value 형태로 브라우저에 데이터를 저장할 수 있습니다

​

​

3. 웹 스토리지(Web Storage)는 HTML5 부터 출시되었으며, 약 5MB까지 저장 공간을 이용할 수 있습니다

​

​

4. 웹 스토리지(Web Storage)는 대부분의 브라우저에서 모두 지원하며, 세부 지원 사항을 아래의 url을 통해서 확인할 수 있습니다

​

     - 웹스토리지는 HTML5를 지원하지 않으면 사용할 수 없습니다

​

     - 지원 브라우저 확인 url 정보 : https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

Window.localStorage - Web API | MDN

​

5. 웹 스토리지(Web Storage)는 로컬스토리지(Local Storage) , 세션 스토리지(Session Storage) 의 저장소를 각각 제공합니다

​

​

6. 웹 스토리지(Web Storage)는 자바스크립트 (javasctipt) 코드를 사용해서 간편하게 사용할 수 있습니다

​

​

7. 웹 스토리지(Web Storage)는 크롬 및 엣지 등 브라우저에서 개발자 도구를 사용해 저장된 데이터를 확인할 수 있습니다

​

---

​[웹 스토리지 (Web Storage) 를 사용하는 이유 ?]

​

1. 웹 스토리지(Web Storage)는 서버가 아닌, 클라이언트(브라우저)에 데이터를 저장하기 때문에 서버 부하를 줄일 수 있습니다

​

     - 서버에 저장하는 것이란 스프링 기준 컨트롤러 단에서 세션 객체를 사용해 정보를 저장하는 것입니다

​

​

2. 웹 스토리지(Web Storage)는 도메인 단위로 접근이 제한되는 특성 덕분에 함부로 다른 곳에서 값을 꺼내 쓸 수 없어 CSRF (사이트 간 요청 위조)가 안전합니다

​

​

3. 서버 부하를 생각해 브라우저 페이지간 공유가 필요한 데이터를 웹 스토리지를 사용해 저장하는 경우가 많습니다

---

[로컬스토리지 (Local Storage) 란 ?]

​

1. 로컬스토리지(Local Storage)는 window.localStorage 객체를 사용하며, 브라우저를 종료해도 명시적으로 지우지 않는 한 영구적으로 저장되는 데이터입니다

​

​

2. 로컬스토리지(Local Storage)는 도메인별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능합니다

​

​

3. 로컬스토리지(Local Storage)는 지속적으로 필요한 정보를 저장할 때 사용합니다

---

[세션스토리지 (Session Storage) 란 ?]

​

1. 세션스토리지(Session Storage)는 window.sessionStorage 객체를 사용하며, 브라우저를 종료 시 저장된 데이터가 지워지는 휘발성 특징을 가지고있습니다

​

     - 세션스토리지(Session Storage)는 일정 시간 후 자동으로 데이터가 지워지도록 설정할 수 없으며, 브라우저를 종료해야 사라집니다

​

​

2. 세션스토리지(Session Storage)는 잠시 동안 필요한 정보를 저장할 때 사용합니다

---

[쿠키 (cookie) 저장소 란 ?]

​

1. 쿠키(cookie) 저장소는 클라이언트의 브라우저 메모리 혹은 하드디스크에 저장됩니다

​

2. 쿠키(cookie) 저장소는 매번 서버에 전송되므로 크기가 클 경우 서버에 부담이 갈 수 있습니다

​

3. 쿠키(cookie) 저장소는 약 4KB까지의 데이터를 저장할 수 있으며 유효 기간이 존재합니다

​

4. 쿠키(cookie) 저장소는 다른 도메인에서 요청할 때도 자동 전송되는 위험성이 있습니다

---

[웹 스토리지 (Web Storage) 저장된 데이터 확인 참고사이트]

​

https://blog.naver.com/kkh0977/222476096072

49. 크롬 F12 개발자 도구 사용해 로컬 스토리지 , 세션 , 쿠키 저장된 정보 확인 방법

 

---

[웹 스토리지 (Web Storage) 문법 참고사이트]

​

https://ko.javascript.info/localstorage

localStorage와 sessionStorage

 

---