브라우저에는 저장 공간이 여러개 있다.
크롬 개발자 도구의 Application 탭에 들어가면 확인할 수 있다.
[Local Storage / Session Storage] : key : value 형태로 문자, 숫자 데이터 저장 가능
[Indexed DB] : 크고 많은 구조화된 데이터를 DB처럼 저장 가능
[Cookies] : 유저 로그인 정보 저장 공간
[Cache Storage] : html, css, img 파일 저장해 두는 공간
Local Storage / Session Storage는 문자, 숫자만 key : value 형태로 저장 가능하고, 5MB까지만 저장 가능하다.
Local Storage는 브라우저에 재접속해도 영구적으로 남아 있어 유저가 브러우저 청소하지 않는 이상 반영구적으로 데이터 저장이 가능하고, Session Storage는 브라우저를 끄면 데이터가 사라진다.
로컬스토리지 사용법
localStorage.setItem('key', 'value') //자료저장하는법
localStorage.getItem('key') //자료꺼내는법
localStorage.removeItem('key') //자료삭제하는법- 로컬스토리지에 저장한 데이터를 수정하는 문법은 없기 때문에 수정하고 싶으면 데이터를 꺼내서 수정하고 다시 저장하면 된다.
- 문자나 숫자만 저장할 수 있다.
- sessionStorage로 바꾸면 Session Storage에 저장 가능하다.
localStorage.setItem('이름', 'kim')
console.log(localStorage.getItem('이름'));
▲ 로컬스토리지에 자료가 저장되고 출력된 모습
로컬스토리지에 array/object 저장하기
array/object를 로컬스토리지에 저장하려면 강제로 문자로 바꿔서 저장하면 된다.
문자로 바꾸지 않고 저장하면 자료가 깨진다.
그래서 array/object를 JSON으로 바꾸면 문자 취급을 받기 때문에 안전하게 로컬스토리지에 저장할 수 있다.
JSON은 그냥 따옴표 친 array/object이다.
var arr = [1,2,3];
var newArr = JSON.stringify(arr);
localStorage.setItem('num', newArr);▲ JSON.stringify() 안에 array/objcet를 집어넣으면 JSON으로 바꿔 주면 문자 취급을 받게 된다. 그걸 localStorage에 저장한다. 이렇게 하면 깨지지 않게 저장 가능하다.
var arr = [1,2,3];
var newArr = JSON.stringify(arr);
localStorage.setItem('num', newArr);
// 꺼내서 사용할 때
var output = localStorage.getItem('num');
output = JSON.parse(output);
console.log(output);▲ 데이터를 JSON으로 저장했으니 다시 꺼내도 JSON이다. 그래서 꺼낸 데이터를 다시 array/object로 바꾸고 싶으면 JSON.parse() 안에 넣으면 된다.
JSON.stringify() : array/object → JSON 변환
JSON.parse(): JSON → array/object 변환
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
