Programming/Javascript

[Javascript] 웹 스토리지 Web Storage

Bam_t 2021. 10. 2. 15:51
728x90

DB 공부를 하다가 문득 생각해 봅니다. 웹 개발을 하다가도 잠깐 저장하고 싶은 정보가 있는데 그럴때마다 DB를 연동하고 서버를 켜두는 것은 굉장한 낭비가 될거같은데 어디다 저장해야하지? 하는 생각에 찾아보니까 스토리지(Storage)라는 기술이 존재하고 있었습니다.

1. 웹 스토리지

사실 웹에서 정보를 저장해 두는 수단엔 대표적으로 '쿠키'라는 것이 존재합니다. 하지만 이 쿠키는 크기가 매우작고 네트워크 통신이 필요하기에, 쿠키의 최대 크기(약 4KB)보다 큰 정보를 담거나, 네트워크 통신이 필요하다면 사용하는데 문제가 발생합니다. 무엇보다 쿠키는 자바스크립트만으로 조작하는 것이 어렵다는 단점이 있습니다. 그래서 이런점을 보완하기 위해 웹 스토리지를 이용하게 되었습니다.

웹 스토리지는 브라우저에 내장된 데이터 저장소입니다. 객체처럼 [key-value]쌍으로 이루어져 있어서 자바스크립트에 익숙하다면 사용하기 편리하다는 점도 있습니다. 실제로 잠시뒤에 써보면 실제 문법이 간단하다는 것을 알 수 있습니다.

하지만 DB에 비해 유실될 가능성이 높기 때문에 웹 스토리지에 저장하는 데이터는 중요성이 낮거나 유실되도 무방한 데이터들만 저장하는 것을 추천드립니다.

 

 

 

2. 로컬 스토리지와 세션 스토리지

웹 스토리지에는 로컬 스토리지와 세션 스토리지 두 종류가 있습니다. 두 방식의 차이는 데이터의 유효 기간과 범위에서 차이를 보입니다.

로컬 스토리지는 웹 페이지의 세션(접속 시간)이 종료되어도 데이터가 남습니다. 다시말해서 명시적으로 데이터 삭제과정을 거치지 않는 이상은 데이터가 쭉 남아있습니다. 다른 특징은 한 번에 여러개의 탭이나 창을 열어놔도 데이터가 서로간에 공유되어 데이터가 유지됩니다.

세션 스토리지는 웹 페이지의 세션이 종료되는 시점에 데이터가 지워집니다. 그리고 다른 창이나 탭에서 같은 페이지를 열어도 서로간의 공유가 안되기때문에 따로 저장되고 불러와집니다.

이렇게 두 개로 나뉘지만 실제로 사용할 때는 세션 스토리지 사용을 추천드립니다. 로컬 스토리지의 데이터가 쭉 남는다는 점이나 탭/창 구분없이 데이터가 공유되는 경우 변수명이 충돌할 가능성이 있기 때문입니다.

 

 

 

3. 웹 스토리지 사용하기

로컬 스토리지와 세션 스토리지는 각각 localStorage/sessionStorage 프로퍼티로 접근이 가능합니다. 두 메소드의 프로퍼티만 다르고 호출 메소드의 조작방법은 동일하기 때문에 필요한 스토리지 종류에 따라서 프로퍼티만 변경해 주시면 됩니다. (제가 로컬 스토리지 활용이 필요해서 예시는 로컬 스토리지로 이용하겠습니다.)

 

3-1. 데이터 보관

데이터 보관은 총 세가지 방식이 있습니다. 편한 방법을 이용하는 것도 좋지만, 첫번째 storage.키 형식의 프로퍼티 구문은 식별자로 사용불가능한 문자를 키값으로 넣을 수 없다는 점이 있습니다. 그래서 두번째나 세번째 방식을 이용해서 키와 값의 설정을 하시는 것을 추천드립니다.

Storage.키 = '값';
Storage['키'] = '값';
Storage.setItem('키', '값');
localStorage.key1 = '고양이';
localStorage['key2'] = '강아지';
localStorage.setItem('key3', '곰');

 

3-2. 데이터 취득

Storage.getItem('키');
localStorage.getItem('key1');
'고양이'
localStorage.getItem('key2');
'강아지'
localStorage.getItem('key3');
'곰'

 

추가적으로 이렇게 저장한 스토리지 내용은 구글 크롬 브라우저 기준으로 개발자도구의 Application탭의 로컬 혹은 세션 스토리지 메뉴에서 확인가능합니다.

 

또한 length를 이용해서 현재 스토리지의 크기를 취득할 수도 있습니다.

Storage.length;

 

3-3. 데이터 삭제

세션 스토리지는 탭을 닫으면 데이터가 삭제 되지만, 로컬 스토리지 같은 경우에는 명시적으로 선언해 주어야 데이터가 삭제된다고 했었습니다. 다음 세 가지 방법 중에서 편한 것 이용하시면 됩니다.

Storage.removeItem('키');
delete storage.키;
delete storage['키'];

 

혹은 한번에 지우기 위해 clear() 메소드를 호출하여도 됩니다.

Storage.clear();

 

 

 

4. 웹 스토리지의 문제점과 해결하기 (객체 저장하기)

웹 스토리지의 단점은 오직 문자형 데이터 타입만이 저장된다는 큰 단점이 있습니다. 물론 표면상으로는 숫자, 객체, 함수 등 얼마든지 삽입할 수 있지만 스토리지 객체의 내부 동작에서 toString을 통해 문자열화 되어서 저장되기 때문에 반환 되는 값은 무조건 문자열이 될 수 밖에 없습니다.

그래서 이런 단점을 해결하기 위해 JSON형을 이용해서 복원시키는 방법을 이용해야합니다. 갑자기 배우지도 않은 JSON이야기가 나와서 당황스러울 수도 있는데 어렵지 않습니다.

우리는 데이터를 변환하고 복원하기 위해 JSON.stringfy 메소드를 이용하려고 합니다.

[객체(혹은 다른 자료형) 저장]
Storage.setItem('키', JSON.stringfy(값));

[값 불러오기]
JSON.parse(Storage.getItem('키'));
localStorage.setItem('obj', JSON.stringify({key1: '과자', key2: 123}));

JSON.parse(localStorage.getItem('obj'));

/*
{key1: '과자', key2: 123}
key1: "과자"
key2: 123
[[Prototype]]: Object
*/

객체
숫자
배열

알아두면 편리한 웹 스토리지에 대한 소개였습니다.

728x90