JS(JavaScript) 웹 스토리지, 로컬 스토리지(local Storage)

웹 스토리지

웹 스토리지는 브라우저 상에 데이터를 저장할 수 있는 기술이다.
개발을 시작하면 DB서버나 Cloud 플랫폼에 데이터를 저정하는 경우가 많은데,
브라우저에 저장할 필요가 있나?

개인적인 생각으로 무족건 필요하다고는 볼 수 없는데, 개발 시작단계에서 가볍게 테스트하기 좋다고 생각하고있다.
그리고 모든 데이터(사소한 것까지)를 DB에 저장하는 것은 낭비라고 생각해 웹 스토리지에 저장하는 경우가 있다고 한다.
소실 될 수 있으니 중요하지 않은, 없어져도 되는 데이터만 저장하자

웹 스토리지는 2가지로 나뉠 수 있다.

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

두 기술의 차이는 간단하게 저장 기간(?) 이다.

세션 스토리지의 경우 세션마다 저장을 한다고 볼 수 있다. 그래서 여러 창을 띄우면 우리는 각 페이지 마다 다른 공간에(세션 스토리지) 데이터를 저장하고, 그 창을 종료하게 되면 데이터는 사라진다.
로컬 스토리지는 브라우저에 저장하는 데이터이다. 따라서 창을 닫더라도 데이터가 유지되고 각 페이지에 데이터를 공유 할 수 있다.
당연한 얘기지만 브라우저 상에 저장하는 것이기 때문에, 브라우저가 다르면 데이터 공유는 불가능하다.

 

localStorage

 

구글 개발자 도구 > Application > Local Storage에서 로컬 스토리지 저장 내역을 확인 할 수 있다.

 

localStorage 사용법

데이터는 key, value로 이루어진 데이터를 저장할 수 있고, value에는 문자열만 저장이 가능하다.

localStorage.setItem('key', value); // 저장할 때 (저장할 키와 값 입렵)
localStorage.getItem('key'); // 가져올 떄 (키로 데이터 가져오기)
localStorage.removeItem('key'); // 삭제할 때 (해당 키 데이터 삭제)
localStorage.clear(); // 모든 키 데이터 삭제

 

배열이나 객체 문자열로 저장하는 법

앞서 value 값에는 문자열만 들어갈 수 있다고 했다.
하지만 우리는 [{},{},{},{}]이렇게 배열이나 객체 혹은 둘에 혼합 상태에서 데이터를 저장할 필요가 있을 것이다.

핵심

1. JSON형태로 직렬화 하여 저장하기.
2. 데이터를 받아 역직렬화 하여 사용하기.

let x = [{'name':'btae', 'age': 20}, {'name':'tom', 'age': 30}]
localStorage.setItem('user', JSON.stringify(x)); // 배열 x를 문자열로 직렬화 하여 저장
JSON.parse(localStorage.getItem('user);)  // 직렬화된 데이터를 역직렬화 하여 사용

여기서 JSON.stringify(), JSON.parse()를 기억해주면 된다.

JSON.stringify()는 문자열로 변환시켜 줄 것이며, JSON.parse()는 그 문자열을 원래 배열로 바꿔줄 것이다. 단순히 문자열과 배열을 푸는게 아니라 JSON형식으로 변하게 하는 개념이라 본다.

 

 

모질라 페이지

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage