[Javascript] 웹 데이터 저장 방식

Django나 Flask를 쓰면 Session을 활용했다. Session은 데이터를 사용자 쪽, 즉 클라이언트 측에 저장하도록 한다. 로그인 기능을 구현하면서 사용자 로그인 이후 ID값을 저장하는 방식으로 로그인 상태를 유지하도록 구성한 적이 있다. 웹 사이트에서 나가도 그 연결 상태를 저장할 수 있고, 계속 전달하지 않아도 된다는 점에서 유용한 기능이다.

# flask에서는...
session['키'] = '값'
# Django에서는...
request.session['키'] = '값'

Javascript에서도 가능한 기능인데 총 네가지를 사용할 수 있다.

1. Cookie : 서버와 클라이언트 사이 데이터를 저장하는 방법으로 작은 텍스트 파일이 대상이다. 만료 기간을 설정할 수 있지만 크기가 매우 작고 항상 쿠기 전송이 일어나기 때문에 네트워크 사용에 영향을 줄 수 있다.

   document.cookie = "키 = 값;"

   다음과 같이 "키=값;"이라는 한 줄의 문자열로 저장한다. expires(만료날짜),max-age(만료시간-초)등의 특정한 키값을 가지기도 한다.
   값을 가져오기 위해서는 이러한 문자열을 잘라서 작업해야 한다.

   var cookies = document.cookie.split(";"); // 문자열을 ; 기준으로 분할하기
   cookies.forEach(function(cookie) { //forEach로 각 문자열 접근
   	key = cookie.substr(0, cookie.indexOf('=')); // = 기호를 기준으로 키값 분할 
       value = cookie.substr(cookie.indexOf('=') + 1);
       console.log(key); // 키
       console.log(value); //값
   }); 

2. LocalStorage : 데이터가 영구적으로 저장된다. 브라우저를 닫아도 유지되지만 5MB의 용량 제한이 있고 암호화가 되지 않는다는 단점이 있다. 따라서 간단한 사용자 설정을 저장하는 방법으로 사용할 수 있다. 값을 저장하고 읽는 방법도 간단하다.

   localStorage.setItem('키', '값'); // 데이터를 저장하는 방법
   localStorage.getItem('키'); // 데이터를 읽는 방법
   localStorage.removeItem('username'); // 특정 키 값의 값을 제거
   localStorage.clear(); // 모든 데이터 삭제

3. SessionStorage : 브라우저 세션 동안 데이터를 저장하고 브라우저가 닫히면서 데이터도 삭제된다. LocalStorage와 달리 일시적인 성격이기 때문에 다르게 사용할 수 있다. 사용자가 페이지를 나가면서 삭제할 요소를 담으면 좋다.

   sessionStorage.setItem('키', '값'); // 데이터를 저장하는 방법
   sessionStorage.getItem('키'); // 데이터를 읽는 방법
   sessionStorage.removeItem('username'); // 특정 키 값의 값을 제거
   sessionStorage.clear(); // 모든 데이터 삭제

4. IndexedDB : 앞선 방법보다 훨씬 복잡하지만 대용량의 데이터를 저장할 수 있는 비관계형 데이터베이스다. 비동기적으로 작동하며 쿼리나 트랜잭션을 지원하지만 처리해야할 사항도 많다.

   const request = indexedDB.open('myDatabase', 1); // DB 열기
   
   request.onupgradeneeded = event => {
     const db = event.target.result;
     db.createObjectStore('users', { keyPath: 'id' });
   };
   
   request.onsuccess = event => {
     const db = event.target.result;
     const transaction = db.transaction('users', 'readwrite');
     const store = transaction.objectStore('users');
   
     store.add({ id: 1, username: 'JohnDoe' });
   
     const getRequest = store.get(1);
     getRequest.onsuccess = () => {
       console.log(getRequest.result); // { id: 1, username: 'JohnDoe' }
     };
   };

다음과 같이 정리할 수 있다. 필요에 따라 적절한 방식을 선택하자...

저장 방식	장점	단점
쿠키 (Cookies)	- 서버와 클라이언트 간 데이터 전송 가능 - 만료 기간 설정 가능	- 보안 이슈 (XSS) - 데이터 크기 제한 (4KB) - 모든 요청에 쿠키 포함
로컬 스토리지	- 영구적인 데이터 저장 가능 - 서버로 전송되지 않음	- 보안 이슈 (암호화되지 않음) - 대용량 데이터 저장 어려움
세션 스토리지	- 일시적인 데이터 저장 가능 - 서버로 전송되지 않음	- 브라우저 또는 탭을 닫으면 데이터 사라짐 - 다른 탭/창에서 접근 불가
인덱스드DB	- 대용량 데이터 저장 가능 - 구조화된 데이터 효율적 저장 및 쿼리 가능	- 사용이 복잡 - 비동기 작업 처리 필요