웹 개발이 발전함에 따라 데이터를 지속적으로 저장하는 방법은 개발자들이 성능을 향상시키고 더 나은 사용자 경험을 제공할 수 있도록 도와줍니다. 그리고 로컬 스토리지를 사용하는 것은 어플리케이션에서 데이터를 지속적으로 저장하는 효과적인 방법입니다.
이 글에서는 로컬 스토리지가 무엇인지, 그리고 현대 웹 애플리케이션에서 어떻게 사용하는지에 대해 배울 것입니다. 또한 로컬 스토리지를 사용하는 이점과 함께 일부 제한 사항에 대해서도 알게 될 것입니다.
목차
- 로컬 스토리지란 무엇인가요?
- 로컬 스토리지와 세션 스토리지의 차이점
- 로컬 스토리지 사용 방법
- 실용적인 예제
- DevTools에서 로컬 스토리지를 보는 방법
- 로컬 스토리지 사용의 장점
- 로컬 스토리지의 제한 사항
- 결론
로컬 스토리지란 무엇인가요?
로컬 스토리지는 웹 브라우저에서 개발자들이 사용자의 브라우저에 데이터를 저장할 수 있게 해주는 기능입니다. 세션 스토리지와 함께 웹 스토리지 API의 일부입니다.
로컬 스토리지는 키-값 쌍으로 데이터를 받아들이며, 사용자가 페이지를 새로고침하거나 탭이나 브라우저를 닫아도 데이터를 유지합니다.
로컬 스토리지와 세션 스토리지의 차이점
앞서 언급했듯이, 현대 브라우저의 웹 스토리지 API는 데이터 저장을 위해 로컬 스토리지와 세션 스토리지 두 가지 주요 기능을 제공합니다.
이 둘의 주요 차이점은 저장된 데이터의 수명과 범위입니다.
로컬 스토리지의 데이터는 탭/브라우저가 닫혀도 유지됩니다. 반면 세션 스토리지에 저장된 데이터는 탭/브라우저가 닫히면 지워집니다.
또한, 로컬 스토리지의 데이터는 여러 브라우저 탭과 창에서 접근할 수 있습니다. 한편, 세션 스토리지의 데이터는 특정 브라우저 탭 내에서만 접근할 수 있으며 공유되지 않습니다.
로컬 스토리지 사용 방법
로컬 스토리지 객체는 그것과 상호 작용할 수 있는 다양한 메서드를 제공합니다. 이러한 메서드를 사용하여 로컬 스토리지에서 데이터를 추가하고, 읽고, 삭제할 수 있습니다.
로컬 스토리지에 데이터 저장하기
로컬 스토리지에 데이터를 저장하려면 setItem() 메서드를 사용합니다. 이 메서드는 키와 값이라는 두 가지 인자를 받습니다.
localStorage.setItem(key, value)로컬 스토리지에 키가 없는 경우, setItem() 메서드는 새 키를 생성하고 주어진 값을 할당합니다. 이미 동일한 이름의 키가 로컬 스토리지에 존재한다면, 해당 키의 값을 제공된 값으로 업데이트합니다.
로컬 스토리지에서 데이터 읽기
로컬 스토리지에서 데이터를 검색하여 사용하려면 getItem() 메서드를 사용합니다. 이 메서드는 인자로 키를 받습니다.
localStorage.getItem(key)주어진 키가 로컬 스토리지에 존재하면, 메서드는 해당 키의 값을 반환합니다. 존재하지 않으면, 메서드는 null을 반환합니다.
로컬 스토리지에서 복잡한 데이터 값 저장하고 읽기
로컬 스토리지는 문자열만 저장할 수 있습니다. 따라서 객체나 배열과 같은 값을 저장하려면 값을 문자열 표현으로 변환해야 합니다. 이것은 JSON.stringify() 메서드를 사용하여 수행합니다.
예시:
const userObj = {
username: "Maria",
email: "maria@mail.com"
}
localStorage.setItem('user', JSON.stringify(userObj))JSON.stringify() 메서드는 userObj 객체를 문자열 표현으로 변환한 다음 로컬 스토리지에 전송합니다.
이제 로컬 스토리지에서 데이터를 검색할 때, 문자열 표현에서 원래 형태로 다시 변경해야 합니다. 그리고 이것은 JSON.parse() 메서드를 사용하여 수행합니다.
예시:
const storedUserData = localStorage.getItem('user')
if (storedUserData) {
const userData = JSON.parse(storedUserData)
// userData를 여기서 사용할 수 있습니다...
} else {
console.log('로컬 스토리지에 사용자 데이터가 없습니다')
}위 예제에서, 우리는 user에 대한 데이터가 로컬 스토리지에 있는지 확인한 다음 JSON.parse() 메서드를 사용합니다. 이것은 중요합니다. 왜냐하면 만약 로컬 스토리지에 없는 경우 null에 대해 JSON.parse()를 적용하게 되므로 오류가 발생할 것이기 때문입니다.
로컬 스토리지에서 데이터 삭제하기
로컬 스토리지에서 데이터를 삭제하기 위해 사용할 수 있는 두 가지 메서드가 있습니다. 하나는 removeItem() 메서드이고 다른 하나는 clear() 메서드입니다.
로컬 스토리지에서 단일 항목을 삭제하고 싶을 때 removeItem() 메서드를 사용합니다. 이 메서드는 인자로 키를 받아 로컬 스토리지에서 해당 키-값 쌍을 삭제합니다.
localStorage.removeItem(key)그러나 단일 키-값 쌍을 삭제하는 대신 로컬 스토리지에서 모든 데이터를 지우고 싶다면 어떨까요? 로컬 스토리지는 그것을 위한 메서드가 있는데, 바로 clear() 메서드입니다.
localStorage.clear()clear() 메서드는 현재 도메인의 로컬 스토리지에 있는 모든 키-값 쌍을 삭제합니다.
로컬 스토리지에서 키 이름 가져오기
로컬 스토리지에서 특정 인덱스에 있는 키의 이름을 가져오고 싶다면 key() 메서드를 사용할 수 있습니다. 이것은 숫자를 인자로 받고 지정된 인덱스에서 키의 이름을 반환합니다.
예시:
localStorage.key(0)위 예제는 인덱스 0에 있는 키의 이름을 반환합니다. 지정된 인덱스에 키가 없으면 메서드는 null을 반환합니다.
실용적인 예제
다음은 로컬 스토리지와 세션 스토리지의 차이점을 보여주는 실용적인 데모입니다.
이 예제에서 사용자의 이름은 로컬 스토리지에 저장하고 사용자의 나이는 세션 스토리지에 저장할 겁니다.
<!-- HTML -->
<body>
<h1 class="userName"></h1>
<h2 class="userAge"></h2>
<input type="text" class="name" placeholder="여기에 이름을 입력하세요"/>
<button class="saveNameBtn">이름 저장</button>
<br />
<input type="text" class="age" placeholder="여기에 나이를 입력하세요"/>
<button class="saveAgeBtn">나이 저장</button>
</body>마크업에는 userName과 userAge에 대한 두 개의 헤더 요소가 포함되어 있습니다. 이름과 나이를 위한 두 개의 입력 요소도 있습니다. 각 입력에는 데이터를 저장하기 위해 사용할 버튼이 연결되어 있습니다.
이제 querySelector 메서드를 사용하여 여러 요소를 선택해 보겠습니다.
const userNameText = document.querySelector(".userName")
const userAgeText = document.querySelector(".userAge")
const saveNameButton = document.querySelector(".saveNameBtn")
const saveAgeButton = document.querySelector(".saveAgeBtn")로컬 스토리지에 대한 코드 예제
saveNameButton.addEventListener("click", () => {
const userName = document.querySelector(".name").value
userNameText.textContent = userName
localStorage.setItem("name", userName)
})먼저 이름 입력의 값을 가져와 userNameText의 textContent로 설정합니다. 그런 다음 로컬 스토리지의 setItem()을 사용하여 로컬 스토리지에 userName 값을 저장합니다.
다음으로 로컬 스토리지에서 필요할 때 이름 값을 가져오는 방법을 살펴보겠습니다.
function displayUserName () {
const nameFromLocalStorage = localStorage.getItem("name")
if (nameFromLocalStorage) {
userNameText.textContent = nameFromLocalStorage
} else {
userNameText.textContent = "로컬 스토리지에 이름 데이터가 없습니다"
}
}
displayUserName()displayUserName 함수는 getItem() 메서드를 사용하여 nameFromLocalStorage를 가져옵니다. 로컬 스토리지에 값이 있다면, 우리는 그것을 userNameText 요소의 textContent로 설정합니다. 값이 null이거나 존재하지 않는다면, textContent를 “로컬 스토리지에 이름 데이터가 없습니다” 문자열로 설정합니다.
세션 스토리지에 대한 코드 예제
이제 나이 값을 저장하는 것을 위해 똑같은 일을 합시다. 여기에서 유일한 차이점은 로컬 스토리지 대신 세션 스토리지를 사용한다는 것입니다.
saveAgeButton.addEventListener("click", () => {
const userAge = document.querySelector(".age").value
userAgeText.textContent = userAge
sessionStorage.setItem("age", userAge)
})
function displayUserAge () {
const ageFromSessionStorage = sessionStorage.getItem("age")
if (ageFromSessionStorage) {
userAgeText.textContent = ageFromSessionStorage
} else {
userAgeText.textContent = "세션 스토리지에 나이 데이터가 없습니다"
}
}
displayUserAge()setItem과 getItem 메서드는 세션 스토리지에도 작동합니다.
차이점이라면 페이지를 닫았다가 다시 여는 경우 로컬 스토리지의 이름 데이터는 지속됩니다. 하지만 세션 스토리지의 나이 데이터는 페이지가 닫히면 지워집니다.
DevTools에서 로컬 스토리지 보기
브라우저의 개발자 도구에서 로컬 스토리지의 내용을 검사하려면 아래 단계를 따르세요.
먼저 DevTools를 엽니다. 웹 페이지에서 오른쪽 마우스 버튼을 클릭하고 “검사”를 선택하여 할 수 있습니다.
단계 1
그런 다음 DevTools 패널에서 “Application” 탭을 선택합니다. 브라우저에 따라 이 패널의 이름이 다를 수 있습니다. 예를 들어, Safari와 Firefox에서는 “Storage”라고 불립니다.
단계 2
다양한 웹 스토리지 옵션을 보여주는 사이드바에서 “Storage” 섹션을 찾습니다.
“Local Storage”를 클릭하여 그 내용을 보고 확장합니다.
단계 3
개별 항목을 클릭하여 해당하는 키-값 쌍을 볼 수 있습니다.
로컬 스토리지 사용의 장점
로컬 스토리지가 현대 웹 개발에서 다른 저장 매체에 비해 가지는 몇 가지 이점은 다음과 같습니다.
- 영구적 데이터: 로컬 스토리지를 사용하면 사용자가 탭이나 브라우저를 닫아도 저장된 데이터가 유지됩니다. 이는 사용자 환경 설정, 설정 및 기타 관련 데이터를 저장하는 데 유용합니다. 빈틈없는 사용자 경험을 만드는 데 도움이 될 수 있습니다.
- 오프라인 액세스: 로컬 스토리지는 제한적이거나 없는 인터넷으로도 캐시된 데이터를 접근할 수 있도록 해주는 수단으로 사용할 수 있습니다. 이는 뉴스 리더, 생산성 앱 등 오프라인 사용을 위한 캐싱 데이터에 의존하는 앱들에게 유용한 기능입니다.
- 더 큰 저장 용량: 다른 저장 수단에 비해 로컬 스토리지는 상대적으로 높은 용량을 가집니다. 예를 들어, 쿠키는 도메인당 4 킬로바이트로 제한되지만 로컬 스토리지는 도메인당 최대 5 메가바이트의 데이터를 저장할 수 있습니다.
로컬 스토리지 사용의 한계점
문자열만 저장 가능:
여러분이 이전에 배운 바와 같이, 로컬 스토리지는 문자열 값만을 저장할 수 있습니다. 이에 대한 해법으로 JSON의 stringify와 parse 메서드를 사용할 수 있습니다. 하지만 일부 웹 개발자들은 복잡해서 디버깅하기 어려운 코드를 작성해야 할 수도 있기 때문에 이 방법을 선호하지 않을 수도 있습니다.
보안 문제:
로컬 스토리지에 저장된 데이터는 크로스사이트 스크립팅(XSS)과 같은 공격에 취약할 수 있습니다. 따라서 민감한 정보를 다룰 때는 주의해야 합니다. 보안 문제에 대해 평가하고 필요한 경우 다른 대안을 고려하는 것이 좋습니다.
웹 워커에 접근 불가:
로컬 스토리지는 Window 객체의 일부입니다. 따라서 그것은 웹 페이지의 메인 실행 스레드와 연결되어 있습니다. 이는 웹 워커가 로컬 스토리지에 접근할 수 없다는 것을 의미합니다. 따라서 백그라운드 프로세스를 실행하는 경우, 웹 워커 스크립트 내에서 로컬 스토리지를 사용할 수 없습니다.
결론
로컬 스토리지는 현대 웹 브라우저의 기능으로, 웹 개발자가 브라우저 세션 간에 데이터를 저장하고 유지하는 것을 용이하게 합니다.
전통적인 쿠키에 비해 더 큰 저장 용량을 제공합니다. 또한 쿠키와 달리 서버 측 프로세스에 의존하지 않습니다. 이는 서버 요청의 필요성을 줄이고 성능을 향상시키는 데 도움이 됩니다.
이 글에서는 로컬 스토리지 사용 방법에 대해 배우게 되었습니다. 로컬 스토리지에서 데이터를 저장하고 검색하고 삭제하는 방법을 다루었습니다. 또한 로컬 스토리지를 프로젝트에 사용할 때의 이점과 그 한계에 대해서도 알게 되었습니다.