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.setItem('name', 'kim') // 자료 저장
localStorage.setItem('name') // 자료 꺼내기
localStorage.removeItem('이름') // 자료 삭제

• 수정하는 방법은 따로 없기 떄문에 꺼내서 수정하고 다시 저장해야 합니다.

로컬스토리지에 array/object 저장하려면

• 로컬스토리지에 저장하면 강제로 문자로 바꿔서 저장됨
• array/object를 JSON으로 바꾸면 문자취급을 받기 때문에 안전하게 로컬스토리지에 저장할 수 있습니다.

var arr = [1,2,3];
var newArr = JSON.stringify(arr);

localStorage.setItem('num', newArr)

1. JSON.stringify() 안에 array/object 집어넣으면 JSON으로 바꿔줍니다. 그럼 문자취급받음
2. 그걸 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()