[브라우저저장소(Web Storage)]localStorage, SessionStorage에 대해 알아보기

0. 들어가며...

브라우저에는 웹사이트에서 관리할 수 있는 저장소들이 존재한다. 

 

이 저장소는 html5부터 제공하는 

특정 데이터를 서버가 아니라 클라이언트 웹 브라우저에 저장할 수 있도록 제공하는 기능이다.

 

즉, 사용자의 컴퓨터에 있으며, JavaScript를 통한 접근이 가능하다. 

 

브라우저가 가지고 있는 저장소는 다음과 같다.

1. LocalStorage & Session Storage

2. Cookie

3. IndexedDB

4. Memory & Cahce

이중에서  LocalStorage & Session Storage에 대해 알아보겠다.     

 

 

1.  LocalStorage & Session Storage의 기본

 

1. localStorage와 SessionStorage는 같은 인터페이스를 공유한다.

• 인터페이스는 Storage라고 불리며, key-value 저장, value얻기 , key-value 삭제하기 같은 메서드들이 내장되어있다.
• 이 저장소들은 Origin(도메인 / 포트 / 프로토콜)에 따라서 구분된다. 
  • 때문에, 서로 다른 사이트에서는 완전히 다른 저장소로 구분된다. 

 

 

2. 개발자도구의 Application -> Storage에서 저장되어 있는 값을 확인할 수 있다. 

 

 

2. local Storage vs SessionStorage (비교해보기)

 

차이점	Local Storage	Session Storage
1. 데이터 지속성	data는 사용자의 로컬 브라우저에 영구적인 저장 즉, 사용자가 브라우저를 닫고 다시 열어도 데이터는 유지된다.	data는 현재 세션에 한정되어 저장 세션이 끝나면(브라우저 탭이 닫히거나 세션 종료), 데이터는 삭제된다.
2. 공유	도메인 내의 모든 페이지에서 접근할 수 있다. 즉, 동일한 도메인에서 실행되는 모든 페이지에서 데이터에 접근할 수 있다.	데이터는 동일한 탭 또는 창 내에서만 공유된다. 다른 탭이나 창에서는 데이터에 접근할 수 없다.
3. 데이터 용량	일반적으로 5MB ~ 10MB의 데이터를 저장할 수 있다. (그러나 브라우저마다 제한 사항이 다를 수 있다.)
4. 데이터 사용	localStorage와 sessionStorage 모두 JavaScript를 사용하여 데이터를 읽고 쓸 수 있다. 일반적으로 localStorage.setItem(), localStorage.getItem(), localStorage.removeItem() 등의 메서드를 사용하여 데이터를 조작한다.  (SesstionStorage는 sessionStorage.setItem() 과같이 사용한다.)
5. 데이터 범위	localStorage와 sessionStorage는 동일한 도메인에서만 작동한다. 즉, 도메인 A의 페이지에서 저장한 데이터는 도메인 B의 페이지에서 액세스할 수 없다.
6. 주의점	localStorage와 sessionStorage 모두 클라이언트 측에서 데이터를 저장하므로 보안에 민감한 데이터(예: 비밀번호)를 저장하지 않는 것이 좋다.

 

 

3. 어떤 경우에 사용할까?

 

유저가 마지막으로 입력했던 값을 기억하는 경우

 

1. 유투브에서는 유저가 마지막으로 설정한 볼륨을 기억하는데 사용된다.

 - 페이지가 바뀌어도 같은 사이트에 있으므로 스토리지가 마지막 볼륨 값을 기억하고 있다.

 

 

2. 유저가 마지막으로 보았던 영상의 재생시간을 기록하거나, 유저가 form 작성 중 이탈한 경우 마지막 입력값을 기억하는 데 사용된다. 

 

 

3. 비로그인 장바구니 기능

 

앞서 말한 경우들 모두 상당히 빠르고, 자주 변경되기 떄문에 DB로 전송하는 데에는 무리가 있다.
하지만, 사용자 컴퓨터에 저장하는 건 아주 잠깐이면 충분하다.

 

 

4. 마무리

Storage의 저장기능은 특별한 목적이 정해져 있지 않고,
이 저장소들을 창의적으로 활용하는 것은 개발자들의 몫이라고 한다. 

앞으로 front-end 개발자로서 이 저장소들을 이용하게 될텐데, 각 특성에 맞게 이용할 수 있도록 생각할 수 있는 시간이 되었고, 좀 고민이 필요할 것 같다. 

 

 

 

 

---

<reference site>

https://www.youtube.com/watch?v=5s--sLWzuZc&ab_channel=CodeON%EC%BD%94%EB%93%9C%EC%98%A8 

https://velog.io/@design0728/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A0%80%EC%9E%A5%EC%86%8C-LocalStorage-SessionStorage-Cookie

브라우저 저장소 - LocalStorage, SessionStorage, Cookie

https://ko.javascript.info/localstorage

localStorage와 sessionStorage