Web Storage

✨SEB FE 45기

질문게시판 기능 구현하면서 공부하게 된 부분인 웹 스토리지, 로컬과 세션에 대한 내용을 다뤄보자!

💡 성공은 당신이 하길 원하는 것을 할 때 따라온다. 이것이 유일한 성공의 비결이다.
"Success follows doing what you want to do. There is no other way to be successful." -말콤 포브스

---

📌 Web Storage

HTML5 이전에는 애플리케이션 데이터를 모든 서버 요청에 포함된 쿠키에 저장해야 했다.

HTML Web Storage?
Web Storage란 HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능이다. (쿠키(cookie)와 비슷한 기능)

Web Storage API는 브라우저가 쿠키를 사용하는 것보다 훨씬 더 직관적인 방식으로 키/값 쌍을 저장할 수 있는 메커니즘을 제공한다. Web Storage API

• 웹 스토리지를 사용하면 웹 애플리케이션이 사용자의 브라우저 내에서 로컬로 데이터를 저장할 수 있다.

• 웹 저장소는 더 안전하고 웹 사이트 성능에 영향을 주지 않고 많은 양의 데이터를 로컬에 저장할 수 있다.

• Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴이다.

• 쿠키와 달리 저장한도는 더 크고(최소 5MB), 정보가 서버로 전송되지 않는다.

• 서버에 불필요한 데이터 저장을 막을 수 있다.

• 문자열 외에도 자바스크립트의 모든 원시형 데이터와 객체 저장 가능하다.

• 도메인 단위로 접근이 제한되는 CORS 특성 덕분에 CSRF로부터 안전하다.
  
  

🔍 localStorage & sessionStorage

🌱HTML 웹 저장소는 클라이언트에 데이터를 저장하기 위한 두 가지 개체를 제공한다.🌱

◽ window.localStorage- 만료 날짜가 없는 데이터 저장

• 영구 저장소, 브라우저를 닫았다가 다시 열어도 계속 유지된다.

◽ window.sessionStorage- 한 세션에 대한 데이터 저장(브라우저 탭을 닫으면 데이터가 손실됨)

• 임시저장소, 브라우저가 열려있는 한 페이지를 Reload해도 계속 유지된다. (닫으면 데이터가 삭제됨)

두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공한다.

setItem(key, value) – 키-값 쌍을 보관

//key가 "test"고, value가 "1"인 데이터 저장  
localStorage.setItem('test', 1);
sessionStorage.setItem('test', 1);

getItem(key) – 키에 해당하는 값을 받아옴

//key가 "test"인 데이터 불러오기
localStorage.getItem('test');
sessionStorage.getItem('test');

removeItem(key) – 키와 해당 값을 삭제

//key가 "test"인 데이터 삭제
localStorage.removeItem('test');
sessionStorage.removeItem('test');

clear() – 모든 것을 삭제

//key가 "test"인 데이터 삭제
localStorage.clear();
sessionStorage.clear();

key(index) – 인덱스(index)에 해당하는 키를 받아옴

//index에 해당하는 키를 받아온다.
localStorage.key(index);
sessionStorage.key(index);

length – 저장된 항목의 개수를 얻음

//스토리지에 있는 데이터 항목의 개수를 얻는다.
localStorage.length;
sessionStorage.length;

키 순회 방법!
(스토리지의 길이만큼 반볷하면서 키를 넣어 순회한다.)

for(let i=0; i<localStorage.length; i++) {
  let key = localStorage.key(i);
  alert(`${key}: ${localStorage.getItem(key)}`);
}

🌱localStorage & sessionStorage에 데이터를 저장할 때🌱

키와 값은 반드시 문자열이어야 한다.
제한 용량은 5MB 이상인데, 브라우저에 따라 다를 수 있다.
데이터가 파기되지 않는다.
오리진(도메인·포트·프로토콜)에 묶여있다.

두 스토리지 객체는 Map과 유사하다. setItem/getItem/removeItem을 지원한다. 하지만 인덱스를 사용해 키에 접근할 수 있다는 점(key(index))에서 차이가 있다.

🌱 localStorage & sessionStorage 비교 🌱

localStorage	sessionStorage
오리진이 같은 탭, 창 전체에서 공유된다.	오리진이 같은 브라우저 탭, iframe에서 공유된다.
페이지를 새로 고침 해도 남아있다. 브라우저를 껐다 켜도 남아있다.	페이지를 새로 고침 해도 남아있다. 하지만 탭이나 브라우저를 종료하면 사라진다.

---

✨마무리

storage에 데이터를 넣는 기능을 구현하다가 조금 정리해 놓으면 좋을 것 같아서, 따로 글을 쓰게 되었다. 서버로 보내지 않고 클라이언트에 저장한다니..! ㅎㅎ 신기하당..👀
확실히 글을 쓰면서 정리하니까 개념이해는 확실하게 되는 기분! 다음에는 쿠키에 대해서도 한 번 공부야겠다!