[JavaScript] 웹 스토리지 알아보기 - local storage, session storage

서론

웹 개발을 수행하면서 데이터 저장이 필요할 때가 있습니다. 보통 이런 경우 서버DB 송수신을 쉽게 떠올리 실 텐데, 만약에 저장하려는 데이터가 크게 중요치 않고 사용자의 편의 등을 위해 가볍게(?) 쓰일 목적이라면 웹 스토리지 사용을 고려해볼만 합니다. 여기서, 웹 스토리지는 서버와 송수신 작업을 하지 않고 웹 브라우저 자체에 데이터를 저장하는 기술을 말합니다.

 

 

 

 

목차

• 로컬 스토리지(local storage)
• 세션 스토리지(session storage)
• 사용방법

 

 

 

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

위 서론에서 언급한, 웹 스토리지의 종류는 2가지로 나뉩니다. 로컬 스토리지와 세션 스토리지입니다.

[공통점]

2개 모두 웹 스토리지의 주요 목적인, 서버와 송수신 없이 웹 브라우저 내에 데이터가 저장된다는 공통점이 있습니다.

[차이점]

차이점으로는 데이터 보존기간이 다르다고 말씀드릴 수 있습니다.

먼저, 로컬 스토리지의 경우 저장된 데이터는 사용자가 별도로 삭제를 하지 않는 한 브라우저를 종료하더라도 데이터가 삭제되지 않습니다. 반면, 세션 스토리지의 경우, 이름 그대로 볼 수있듯이 웹 페이지의 세션이 끝나면 데이터도 같이 삭제됩니다. 즉 쉽게 말해 브라우저의 탭이 닫힌 다 든지, 브라우저 창을 종료한다 든지 할 때, 세션 스토리지의 데이터도 같이 삭제됩니다.

 

 

 

 

사용법

1. 스토리지 지원여부 확인

먼저 브라우저의 스토리지 기능은 html5부터 지원합니다. 그렇기에 대부분 지원이 되겠지만, 필요한 경우 아래 코드를 통해 확인 할 수 있습니다.

// Storage 지원여부 확인
if (typeof Storage !== 'undefined'){
	// storage 지원   
}else{
	// storage 미지원
    }

 

 

2. 데이터 저장

아래 코드처럼 스토리지 객체에 setItem 메소드를 통해 입력할 수 있습니다. 입력은 key - value 형태로 입력하며, 모든 데이터는 "문자열"로 저장이 됨을 주의하셔야 됩니다.

// 로컬 스토리지
localStorage.setItem('email', 'storage@gmail.com'); // key, value 순서로 입력

// 세션 스토리지
sessionStorage.setItem('email2', 'session@gmail.com');

 

 

3. 저장된 데이터 조회

아래 코드처럼 getItem 메소드를 통해 얻을 수 있습니다. 파라미터에 키값을 입력하자, 값이 출력됩니다.

그런데 브라우저창을 닫고 새로 열어보니 세션 스토리지의 데이터는 null값을 나타내고 있습니다.

위 차이점에서 설명했듯이, 세션 스토리지는 브라우저 세션이 종료되는 순간 삭제됨을 알 수 있습니다.

// 로컬 스토리지
console.log(localStorage.getItem('email'));

// 세션 스토리지
console.log(sessionStorage.getItem('email2'));

 

 

 

(브라우저를 새로 킨 경우)

 

 

 

 

4. 객체 데이터 저장하기

앞에서 모든 자료는 문자열로 저장된다고 말씀드렸습니다. 그러면 object나 array같은 객체형 자료는 어떻게 저장해야 될까요? 이때는, 서버 송수신할 때 사용하는 JSON 객체 메소드를 이용하면 됩니다.

저장할 때는, JSON.stringfy를 이용해 객체형 데이터를 문자형으로 바꿉니다. 그리고 불러올 때는 JSON.parse메소드를 이용해 다시 문자형 데이터를 객체형 데이터로 변환시켜 줍니다.

 

배열을 아래와 같이 저장하고 나서

// 로컬 스토리지에 배열 데이터 저장
let arr = ['a', 'b'];
localStorage.setItem('arr', JSON.stringify(arr));

 

getItem으로 불러보았습니다. 그냥 불렀을 때, 모양형태는 배열자료형이지만 실제로는 이 전체가 문자화된 문자열 자료형입니다. 따라서 JSON.parse를 추가적으로 써 줘야 문자열을 객체형으로 다시 변환할 수 있습니다.

// 그냥 불렀을 경우, 단지 배열형태의 "문자열"이 반환될 뿐
console.log(localStorage.getItem('arr')); 

// JSON.parse를 통해 배열형태로 재 변환시켜야 된다.
console.log(JSON.parse(localStorage.getItem('arr'))); // 문자열로 받은 arr을 parse를 통해서 다시 객체형태로 변환

(첫번째 출력에서 모양만 배열인 문자열이 나왔고, 두번째 출력에서 진짜 배열 데이터가 출력 되었습니다.)

 

 

 

 

 

 

 

 

5. 스토리지 데이터 삭제하기

로컬 스토리지는 브라우저를 닫는 다고 해서 지워지지 않으니 사용이 끝나면 청소를 직접해주는 것이 좋습니다.

한 개씩 지울 때는 removeItem 메소드를, 전체를 삭제할 때는 clear 메소드를 사용하면 됩니다.

console.log(localStorage.length) // 5 - 5개의 키밸류 존재

// arr 키값 삭제
console.log(localStorage.removeItem('arr'))
console.log(localStorage.length) // 4 - 4개의 키밸류 존재

// 로컬스토리지 전체 삭제
console.log(localStorage.clear())
console.log(localStorage.length) // 0 - 모두 삭제 확인

 

 

 

 

결론

웹 개발시 간단한 정보를 이용할 때, 서버의 데이터를 차지하지 않고 브라우저 내부기능만을 이용하여 데이터를 저장, 활용하는 웹 스토리지 방법에 대해 알아보았습니다. 이 방법은 보안이 취약하기 때문에, 로그인 정보같은 기능을 담을 순 없습니다. 하지만, 보완이 크게 중요치 않은 범위 내에서 사용자의 편의성을 높이는 방향으로 활용할 수 있으며, 또는 시제조 제품이나 개인 프로젝트를 수행함에 있어서 유용할 것으로 생각됩니다.