브라우저 저장공간이 여러개 있는데
크롬 개발자도구의 Application 탭 들어가보면 구경가능합니다.
Local Storage / Session Storage (key : value 형태로 문자, 숫자 데이터 저장가능)
Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능, 문법더러움)
Cookies (유저 로그인정보 저장공간)
Cache Storage (html css js img 파일 저장해두는 공간)
골라쓰면 되는데 우린 범용적으로 쓸 수 있는 Local Storage를 써봅시다.
Local Storage / Session Storage 는
문자, 숫자만 key : value 형태로 저장가능하고
5MB까지만 저장가능합니다.
Local Storage는 브라우저 재접속해도 영구적으로 남아있는데 Session Storage는 브라우저 끄면 날아갑니다.
유저가 브라우저 청소하지 않는 이상 반영구적으로 데이터저장이 가능합니다.
로컬스토리지 사용법
localStorage.setItem('이름', 'kim') //자료저장하는법
localStorage.getItem('이름') //자료꺼내는법
localStorage.removeItem('이름') //자료삭제하는법이게 끝입니다. 수정하는 법은 없어서 꺼내서 수정하고 다시 저장하면 됩니다.
진짜로 저장 잘 되는지 개발자도구에서 테스트해봅시다.
- 근데 문자나 숫자만 저장할 수 있습니다.
- sessionStorage.어쩌구로 바꾸면 Session Storage에 저장가능
로컬스토리지에 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/object 집어넣으면 JSON으로 바꿔줍니다. 그럼 문자취급받음
- 그걸 localStorage에 저장하라고 코드짰습니다.
그럼 깨지지 않게 저장가능합니다.
그냥 저장하는거랑 비교해보십시오 진짜임
var arr = [1,2,3];
var newArr = JSON.stringify(arr);
localStorage.setItem('num', newArr);
//꺼내서 쓸 땐
var 꺼낸거 = localStorage.getItem('num');
꺼낸거 = JSON.parse(꺼낸거);
console.log(꺼낸거);JSON으로 저장했으니 꺼내도 JSON입니다.
그래서 꺼낸걸 다시 array/object로 바꾸고 싶으면
JSON.parse() 안에 넣으면 됩니다.
아무튼 결론은
array/object -> JSON 변환하고 싶으면 JSON.stringify()
JSON -> array/object 변환하고 싶으면 JSON.parse()
쓰면 됩니다.
