웹 스토리지
웹 스토리지(Web Storage)는 웹 브라우저에서 데이터를 저장하는 기술로, HTML5에서 등장
- 웹 스토리지는 클라이언트 측에서 데이터를 저장하고, 저장된 데이터는 서버와 통신하지 않고 로컬에서 사용됩니다. 이를 통해 빠르게 데이터를 접근할 수 있음
웹 스토리지는 크게 두 가지 종류가 있다.
- 로컬 스토리지(Local Storage): 로컬 스토리지는 키-값 쌍으로 데이터를 저장하는 기술로, 웹 브라우저에서 영구적으로 데이터를 저장할 수 있다. 로컬 스토리지에 저장된 데이터는 브라우저가 닫혀도 유지되므로, 사용자가 다시 웹 사이트를 방문했을 때 이전 데이터를 불러와 사용할 수 있다.
- 세션 스토리지(Session Storage): 세션 스토리지는 로컬 스토리지와 비슷하지만, 브라우저를 닫을 때 저장된 데이터가 삭제된다. 세션 스토리지에 저장된 데이터는 해당 브라우저 세션에서만 유효하며, 브라우저가 닫히면 삭제됩니다. 따라서, 세션 스토리지는 로그인 정보나 장바구니 등의 임시적인 데이터를 저장할 때 유용합니다.
웹 스토리지는 JavaScript를 사용하여 쉽게 조작할 수 있다. 예를 들어, 로컬 스토리지에 데이터를 저장하려면 다음과 같이 코드를 작성할 수 있다.
localStorage.setItem('key', 'value');위 코드는 'key'라는 이름으로 'value'라는 값을 로컬 스토리지에 저장한다. 저장된 데이터는 다음과 같이 가져올 수 있다.
const data = localStorage.getItem('key');
console.log(data); // "value"또한, 저장된 데이터를 삭제하려면 다음과 같이 코드를 작성할 수 있다.
localStorage.removeItem('key');이와 같이 웹 스토리지를 사용하여 로컬 데이터를 쉽게 저장하고 관리할 수 있다.
쿠키
쿠키(Cookie)는 클라이언트 측에서 사용하는 작은 파일로, 브라우저에 저장되며, 해당 웹사이트를 다시 방문할 때 사용된다.
웹사이트는 클라이언트에게 쿠키를 전송하고, 클라이언트는 이를 브라우저에 저장한다. 이후에 같은 웹사이트를 방문할 때, 브라우저는 해당 쿠키를 웹사이트 서버에 다시 보내게 된다.
쿠키는 다양한 용도로 사용되며 예를 들자면, 로그인 정보나 사용자의 환경 설정을 저장하거나, 광고 추적 등에 사용될 수 있다.
쿠키는 일반적으로 브라우저 설정에서 사용자가 수동으로 삭제할 수 있고 웹 개발자는 쿠키의 만료 시간과 유효한 도메인을 설정하여 쿠키의 사용을 제어할 수 있다는 장점도 있다.
indexedDB
- 웹 스토리지(Web Storage)의 일종이긴 한데 조금 다른 데이터베이스 기술이다.
- 객체 지향 데이터베이스로, 웹 브라우저에서 대규모 데이터를 저장하고 관리할 수 있다.
- 로컬에서 영구적으로 데이터를 저장할 수 있으며, 브라우저가 닫혀도 데이터를 유지할 수 있다.
- 대용량 데이터를 처리하기에 적합하며, 복잡한 데이터를 쉽게 검색하고 인덱싱할 수 있다.
- 트랜잭션도 지원한다. 트랜잭션은 데이터베이스에서 여러 개의 연속된 작업을 하나의 논리적 단위로 묶어서 실행하는 것을 말한다.
indexedDB를 사용하여 데이터베이스를 생성하고 데이터를 저장하는 방법은 다음과 같다.
const request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = function(event) {
const db = event.target.result;
const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
};
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['myObjectStore'], 'readwrite');
const objectStore = transaction.objectStore('myObjectStore');
const data = { id: 1, name: 'John', age: 30 };
const request = objectStore.add(data);
request.onsuccess = function(event) {
console.log('Data added to the database');
};
transaction.oncomplete = function(event) {
console.log('Transaction completed');
};
};위 코드는 myDatabase라는 이름의 데이터베이스를 생성하고, myObjectStore라는 이름의 객체 스토어를 추가합니다. id를 기본 키로 사용하며, name을 인덱스로 추가한다.
그리고 데이터베이스에 { id: 1, name: 'John', age: 30 }라는 데이터를 추가한다.
indexedDB는 웹 스토리지와는 달리 JavaScript로 직접 데이터베이스를 조작해야 하기 때문에 코드가 좀 더 복잡해질 수 있다. 그러나 대규모 데이터를 다루는 경우에는 indexedDB를 사용하는 것이 더욱 좋다.
const request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = function(event) {
const db = event.target.result;
const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
};
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['myObjectStore'], 'readwrite');
const objectStore = transaction.objectStore('myObjectStore');
const data = { id: 1, name: 'John', age: 30 };
const request = objectStore.add(data);
request.onsuccess = function(event) {
console.log('Data added to the database');
};
transaction.oncomplete = function(event) {
console.log('Transaction completed');
};
};위 코드에서 db.transaction() 메서드를 호출하여 데이터베이스 트랜잭션을 생성한다.
트랜잭션 모드로 'readwrite'를 지정하면 데이터를 추가하거나 수정할 수 있다.
이후에 transaction.objectStore() 메서드를 호출하여 객체 스토어에 접근하 고,objectStore.add() 메서드를 호출하여 데이터를 추가한다.
트랜잭션이 완료되면 transaction.oncomplete 이벤트가 발생한다.
이벤트 핸들러 함수에서는 데이터베이스 작업이 완료되었음을 알리는 메시지를 출력한다.
이와 같이 indexedDB에서 트랜잭션을 사용하면 데이터베이스 작업을 보다 안전하고 일관성 있게 수행할 수 있다.
대규모 데이터를 저장한다고 했는데 그러면 용량을 얼마만큼 저장할 수 있는가?
indexedDB의 용량은 웹 브라우저마다 다르며, 사용자의 로컬 저장소 공간을 기준으로 결정된다.
대체로 대부분의 브라우저에서는 50MB ~ 500MB의 저장 용량을 제공하며, 브라우저마다 최대 저장 용량이 다르기 때문에 사용자가 얼마나 많은 공간을 사용할 수 있는지 확인하는 것이 중요하다.
또한, 사용자의 컴퓨터 하드웨어의 용량이나 브라우저 설정 등에 따라 저장 용량이 제한될 수 있다.
따라서, 대규모 데이터를 다룰 때는 브라우저의 저장 용량 제한을 고려하여 데이터를 분할하거나, 필요하지 않은 데이터를 삭제하여 용량을 최적화하는 것이 좋다.
또한, 브라우저에서 indexedDB를 사용할 때는 사용자가 데이터를 언제든지 지울 수 있으므로, 보안에 대한 고민도 필요하고 민감한 정보를 저장할 때는 암호화하여 보호하거나, 서버측 데이터베이스에 저장하는 것이 좋다.
