자바스크립트로 웹 개발을 하다보면 데이터를 어딘가에 저장해야 할 일이 생깁니다. 대부분 데이터베이스(Database) 서버나 클라우드(Cloud)에 데이터를 저장하거나 경우가 많을 것입니다. 하지만 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있습니다. 이번 포스팅에서는 브라우저 내에서 데이터를 저장할 수 있는 웹 스토리지 기술인 로컬 스토리지(localStorage), 세션 스토리지(sessionStorage) 에 대해서 알아보도록 하겠습니다.
1. 로컬 스토리지(localStorage) VS 세션 스토리지(sessionStorage)
로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소입니다. 간단한 키와 값을 저장할 수 있으며, key-value 형태의 스토리지의 형태입니다. 이 두 개의 매커니즘의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있습니다. 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면에, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다.
다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸합니다. 반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있습니다.
하지만 이러한 로컬 스토리지의 데이터 영속성(persistence) 어디까지나 계속해서 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당합니다. 즉, 같은 컴퓨터에서 다른 브라우저를 사용하거나 또는 다른 컴퓨터에서 같은 브라우저를 사용하는 경우에는 서로 다른 두 개의 로컬 스토리지에 데이터가 저장될 것입니다.
두 스토리지 공통점은 모두 window 객체 안에 들어 있습니다. Storage 객체를 상속받기 때문에 메소드가 공통적으로 존재합니다. 도메인 별 용량 제한도 있습니다.(프로토콜, 호스트, 포트가 같으면 같은 스토리지를 공유합니다) 브라우저별로, 기기별로 다르긴 하지만 모바일은 2.5mb, 데스크탑은 5mb~10mb라고 생각하시면 됩니다.
2. 로컬 스토리지
로컬 스토리지는 window.localStorage에 위치합니다. 키 밸류 저장소이기 때문에 키와 밸류를 순서대로 저장하면 됩니다. 값으로는 문자열, 불린, 숫자, null, undefined 등을 저장할 수 있지만, 모두 문자열로 변환됩니다. 키도 문자열로 변환됩니다.
|
//로컬 스토리지에 값 세팅
//로컬 스토리지에 값 가져오기 localStorage.getItem('name');
localStorage.getItem(birth'); //로컬 스토리지에 값 삭제 localStorage.removeItem(birth'); localStorage.getItem(birth'); /로컬 스토리지 전체삭제 localStorage.clear(); |
메소드를 간단히 설명하자면, localStorage.setItem(키, 값)으로 로컬스토리지에 저장한 후, localStorage.getItem(키)로 조회하면 됩니다. localStorage.removeItem(키)하면 해당 키가 지워지고, localStorage.clear()하면 스토리지 전체가 비워집니다.
웹 스토리지를 사용할 때 주의 사항 및 해결방법
- 오직 문자형(string) 데이터 타입만 지원한다는 것입니다.
- 숫자형 데이터를 로컬 스토리지에 쓰고 다시 다시 읽어보면 다음과 같이 본래 숫자가 아닌 문자가 나오는 것을 알 수 있습니다
- 웹 스토리지를 사용할 때 위와 같은 문제를 피하기 위해서 많이 사용하는 방법이 JSON 형태로 데이터를 읽고 쓰는 것입니다.
|
localStorage.setItem('json', JSON.stringify({name: '홍길동', birth: 1984}));
JSON.parse(localStorage.getItem('json'));
|
3. Vue에서 보안성을 높인 로컬 스토리지 작성방법
src폴더에 로컬 스토리지에 담을 파일을 생성합니다. 저는 utils 폴더를 만들고 globalinfo.js 파일을 추가하였습니다. 아래처럼 globalinfo.js파일을 작성해줍니다.
|
//사용자정보
class UserInfo {
//이름
static get name() {
return localStorage.getItem('NM') || '';
}
static set name(value) {
localStorage.setItem('NM', value);
}
//출생년도
static get birth() {
return localStorage.getItem('BT') || '';
}
static set birth(value) {
localStorage.setItem('BT', value);
}
//초기화
static Clear() {
localStorage.setItem('NM', '');
localStorage.setItem('BT', '');
}
}
export default { UserInfo }
|
이전의 Axios.vue 화면에서 화면을 mounted()할때 로컬 스토리지에 값을 넣어보도록 하겠습니다.
아래의 코드를 화면의 위치에 붙여 넣습니다.
|
mounted() {
this.SetLogin();
},
//SetLogin 메소드
SetLogin(){
globalinfo.UserInfo.name = '홍길동';
globalinfo.UserInfo.birth = '1984';
}
|
프로젝트 빌드후 해당 화면에 가서 F12로 개발자 도구의 애플리케이션 -> 로컬 스토리지를 보시면 값이 들어간것을 확인하실 수 있습니다. 하지만 위에서 보안성 강화를 위해 키값을 다른명칭으로 바꾸었기 때문에 해당값이 어떤 필드의 값인지는 유추하기 어렵습니다.
4. 세션 스토리지
세션 스토리지는 window.sessionStorage에 위치합니다. clear, getItem, setItem, removeItem, key 등 모든 메소드가 같습니다. 단지 로컬스토리지와는 다르게 데이터가 영구적으로 보관되지는 않을 뿐입니다.
여기까지 웹 스토리지(localStorage, sessionStorage) 사용 방법에 대한 포스팅을 마치도록 하겠습니다.
'개발 Recording > vue.js & javascript' 카테고리의 다른 글
| [Node.js] PM2를 이용한 Node.js 서비스 (0) | 2021.12.17 |
|---|---|
| [Vue.js] Vue instance prototype 추가하기 (0) | 2021.12.14 |
| [Vue.js] Vue에서 Axios 사용 (0) | 2021.12.10 |
| [Vue.js] Vuetify v-data-table로 만드는 CRUD actions (0) | 2021.12.06 |
| Node.js + Express Router 클래스를 이용한 라우팅 (0) | 2021.12.03 |