localstorage
Localstorage 란?
크롬 개발자도구의 Application 탭에 있는 저장공간
-
Local Storage / Session Storage (key : value 형태로 문자, 숫자 데이터 저장가능)
-
Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능, 문법더러움)
-
Cookies (유저 로그인정보 저장공간)
-
Cache Storage (html css js img 파일 저장해두는 공간)
Local Storage / Session Storage 는
문자, 숫자만 key : value 형태로 저장가능하고
5MB까지만 저장가능
Local Storage는 브라우저 재접속해도 영구적으로 남아있는데 Session Storage는 브라우저 끄면 사라진다.
유저가 브라우저 청소하지 않는 이상 반영구적으로 데이터저장이 가능
Localstorage 사용법
localStorage.setItem('name','kim'); // localStroage 에 값을 추가
localStorage.getItem('name'); // localStroage 에 있는 값을 가져옴
localStorage.removeItem('name'); // localStroage 에 있는 값을 삭제
- 문자 / 숫자만 저장가능
- sessionStorage. 로 변경 시 Session Storage에 저장가능Localstorage array/object 저장법
array/object를 로컬스토리지에 저장하면 강제로 문자로 바꿔서 저장된다.
array/object를 JSON으로 바꾸면 문자취급을 받기 때문에 안전하게 로컬스토리지에 저장할 수 있다.
var arr = [1,2,3];
var newArr = JSON.stringify(arr);
localStorage.setItem('num', newArr);
localStorage.getItem('num');
- JSON.stringify() 안에 array/object 집어넣으면 JSON으로 바꿔준다.
JSON으로 저장되어 문자로 저장된 array/object 를 다시 array/object로 변환하기 위해서는
JSON.parse() 문법을 사용하면 된다.
var newArrout = localStorage.getItem('num');
newArrout = JSON.parse(newArrout);
console.log(newArrout);
- 결론 -
array/object -> JSON 변환하고 싶으면 JSON.stringify()
JSON -> array/object 변환하고 싶으면 JSON.parse()
FrontEnd