브라우저 객체 모델(Browser Object Model, BOM)은 웹 브라우저의 창이나 프레임을 조작하기 위한 객체 모델입니다. BOM을 사용하면 웹 페이지에서 브라우저의 로컬 스토리지를 조작할 수 있습니다. 이번 포스트에서는 BOM을 사용하여 브라우저의 로컬 스토리지를 조작하는 방법에 대해 알아보겠습니다.

로컬 스토리지란?

로컬 스토리지(Local Storage)는 브라우저에 데이터를 저장하는 방법 중 하나입니다. 로컬 스토리지는 사용자가 웹 페이지를 닫았다가 다시 열어도 데이터가 유지되는 특징을 가지고 있습니다. 이는 쿠키와의 가장 큰 차이점입니다.

로컬 스토리지는 간단한 키-값 쌍으로 데이터를 저장하고, JavaScript를 사용하여 데이터를 조작할 수 있습니다.

로컬 스토리지 조작 방법

로컬 스토리지를 조작하기 위해서는 BOM의 localStorage 객체를 사용합니다. 이 객체를 사용하여 데이터를 저장, 조회, 삭제할 수 있습니다.

데이터 저장

localStorage.setItem('key', 'value');

setItem() 메서드를 사용하여 데이터를 저장할 수 있습니다. 첫 번째 매개변수에는 키(key)를, 두 번째 매개변수에는 값(value)를 전달합니다.

데이터 조회

const value = localStorage.getItem('key');

getItem() 메서드를 사용하여 저장된 데이터를 조회할 수 있습니다. 매개변수로 조회하고자 하는 키(key)를 전달하면 해당 키에 대한 값(value)을 반환합니다.

데이터 삭제

localStorage.removeItem('key');

removeItem() 메서드를 사용하여 저장된 데이터를 삭제할 수 있습니다. 매개변수로 삭제하고자 하는 키(key)를 전달하면 해당 키에 대한 데이터가 삭제됩니다.

예제

// 데이터 저장
localStorage.setItem('name', 'John Doe');

// 데이터 조회
const name = localStorage.getItem('name');
console.log(name); // John Doe

// 데이터 삭제
localStorage.removeItem('name');

// 삭제된 데이터 조회
const deletedName = localStorage.getItem('name');
console.log(deletedName); // null

위 예제에서는 name이라는 키에 ‘John Doe’라는 값을 저장한 후, 조회하고 삭제하는 방법을 보여줍니다.

주의사항

• 로컬 스토리지에 저장되는 데이터는 브라우저별로 별도로 관리됩니다. 즉, 동일한 도메인 내에서도 다른 브라우저에서는 접근할 수 없습니다.
• 로컬 스토리지에 저장 가능한 데이터 크기는 브라우저마다 다를 수 있으므로, 너무 큰 데이터를 저장하지 않도록 주의해야 합니다.

이제 BOM을 사용하여 브라우저의 로컬 스토리지를 조작하는 방법을 알아보았습니다. 로컬 스토리지를 활용하여 웹 애플리케이션의 데이터를 영구적으로 저장하고 관리할 수 있습니다.

더 자세한 내용은 MDN 웹 문서를 참고하시기 바랍니다.

#BOM #로컬스토리지