웹 스토리지 (localStorage, sessionStroage)

자신만의 달력을 만들어서 간단한 메모를 할수 있도록 하면 한다면 이럴떄 보통 데이터베이스(DB) 서버나 클라우드 (Cloud) 플랫폼에 데이터를 저장하는 경우가 많습니다.

 

하지만 중요하지 않거나 잃어버려도 되는 데이터라면 서버단에 데이터를 저장하는 것이 낭비일수가 있고 설정하고 관리하는것도 힘들수가 있스빈다. 이럴 때 클라이언트 단, 즉 브라우저 상에 데이터를 저장할 수 있느 기술인 웹 스토리지를 사용합니다.

 

로컬 스토리지 VS 세션 스토리지

웹 스토리지(Web Stroage)에는 로컬 스토리지(local Storage)와 세션 스토리지 (session Stroage)가 있습니다. 

이 두 개의 매커니즘의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존하냐에 있습니다.

 

세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면에, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다.

 

다시 말해, 브라우저에서 같은 웹사이트를 여러탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 떄 저장해 둔 데이터도 함께 소멸합니다.

반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있습니다.

 

문제점

---

이러한 로컬 스토리지의 데이터 영속성(persistence) 어디까지나 계속해서 동일한 컴퓨터에서 동일한 브라우저를 사용할 떄만 해당합니다. 즉, 같은 컴퓨터에서 다른 브라우저를 사용하거나, 또는 다른 컴퓨터에서 같은 브라우저를 사용하는 경우에는 엄연히 다른 브라우저이므로 서로 다른 두개의 로컬 스토리지에 데이터가 저장될 것입니다. (만약 다른기기나 브라우저 간에 데이터가 공유되고 여옥되야 한다면 클라우드 플랫폼이나 데이터베이스 서버를 사용해야합니다.)

 

로컬 스토리지와 세션 스토리지의 공통점은 두 기술 모두 데이터를 브라우저 상에 저장한다는 것이며, 자바스크립트 API가 완전히 동일한 형태입니다. 따라서 로컬 스토리지기준으로만 예시를 하고 세션 스토리지를 사용할 떄는 예제 코드인   

localStorage 부분을 sessionStorage 로 대체하면 됩니다.

 

 

기본 API 

---

웹 스토리지는 기본적으로 키(key) 와 값 (value)으로 이루어진 데이터를 저장할 수 있습니다. 개념적으로 해시 테이블 자료구조를 생각하면 이해가 쉽습니다. 자바스크립트 API의 기본적인 사용 방법은 다음과 같습니다.

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

 

엄밀하게 window.localStorage 를 사용해야하지만, window 객체의 대부분의 속성이 그러하듯, 줄여서 localStrogae로 로컬 스토리지 객체에 접근 할 수 있습니다. 브라우저의 콘솔창을 열고 다음과 같이 테스트를 해보면 어떻게 사용하는지 금방 감이 잡히실겁니다.

 

> localStorage.getItem('name')
null
> localStorage.getItem('email')
null
> localStorage.setItem('email', 'test@user.com')
undefined
> localStorage.getItem('email')
"test@user.com"
> localStorage.setItem('email', 'test@admin.com')
undefined
> localStorage.getItem('email')
"test@admin.com"
> localStorage.removeItem('email')
undefined
> localStorage.getItem('email')
null

 

주의사항

---

웹 스토리지를 사용할 때 주의해야 할 부분이 있는데요. 오직 문자형(string)데이터 타입만 지원한다는 것입니다.

예를 들어, 숫자형 데이터를 로컬 스토리지에 쓰고 다시 읽어보면 다음과 같이 본래 숫자가 아닌 문자가 나오는 것을 알수 있습니다.

> localStorage.setItem('num', 1)
undefined
> localStorage.getItem('num') === 1
false
> localStorage.getItem('num')
"1"
> typeof localStorage.getItem('num')
"string"

 

이러한 문제가 발생하는 이유는 웹 스토리지는 문자열 데이터 밖에 저장할 수 없기 때문에, 다른 타입의 데이터를 저장하려고 할 떄 문자형으로 변환을 하기 때문입니다.

 

해결방법

---

웹 스토리지를 사용할 때 위와 같은 문제를 피하기 위해서 많이 사용하는 방법 JSON 형태로 데이터를 읽고 쓰는 것입니다.

> localStorage.setItem('json', JSON.stringify({a: 1, b: 2}))
undefined
> JSON.parse(localStorage.getItem('json'))
{a: 1, b: 2}

위와 같이 로컬 스토리지에 쓸 데이터를 JOSN형태로 직렬화(serialization)하고, 읽은 데이터를 JOSN 형태로 역직렬화(deserialization)해주면 원본의 데이터를 그대로 얻을 수 있습니다.

 

배열형 데이터를 로컬 스토리지에 저장할 떄도 동일한 방법을 문제를 예방할 수 있습니다.

> localStorage.setItem('nums', JSON.stringify([1, 2, 3]))
undefined
> JSON.parse(localStorage.getItem('nums'))
[1, 2, 3]

 

데이터 청소

---

로컬스토리지에 저장된 데이터는 웹페이지를 닫는다고 해서 사라지지 않으므로 불필요한 데이터가 남지 않도록 직접 청소해 주는것이 가장 좋습니다.

> localStorage.length
5
> localStorage.key(0)
"email"
> localStorage.removeItem('obj')
undefined
> localStorage.length
4
> localStorage.clear()
undefined
> localStorage.length
0

 

참고로 브라우저의 개발자 도구를 통해서 웹 스토리지에 어떤 데이터가 저장되어 있는지를 쉽게 확인하고 삭제 할 수 있습니다. 예를 들어, 크롬의 경우 Application 탭에 들어가면 왼편에 Stroage 영역이 볼일 것입니다.

 

 

 

Script

---

이번 Calendar를 만들면서 JavaScript의 새로운 기능들을 많이 알게 되었습니다. 항상 DB와 클라우드플랫폼만 사용해왔기에 localStorage와 sessionStroage가 이런 용도로도 사용이 가능한지 알게 되었고 window.onload가 언제 사용되고 <script>를 어디서 어떻게 사용되는지 알게 되는 좋은 작업이 였습니다. 

참고자료

---

https://www.daleseo.com/js-web-storage/