[javascript] localStorage로 브라우저에 데이터 보관하기

개발자 도구를 눌러 Application에 들어가면 브라우저가 새로고침되어도 사라지지 않는 데이터를 보관할 수 있게 해주는 localStorage 가 있다. sessionStorage와 다른 점은,

- localStorage: 새로고침해도 정보가 사라지지 않는다. 유저가 고의로 삭제하지 않는 한.

- sessionStorage: 브라우저를 껐다 켜면 정보가 사라진다. 임시저장소.

 

localStorage 사용방법

localStorage에 데이터를 저장할 때는 key, value 형식으로 저장한다. localStorage에는 숫자와 문자 데이터만 저장할 수 있다.(최대 5MB)

localStorage.setItem('name', 'Minji');//문자또는 숫자 저장
localStorage.getItem('name');//저장해 놨던 자료를 출력가능.
localStorage.removeItem('name');//저장해 놨던 자료를 삭제

자료가 저장된 모습

 

localStorage에 배열이나 객체를 보관하고 싶다면?

위에서 말했듯이 localStorage에는 문자와 숫자 데이터만 보관할 수 있다. 배열과 객체를 보관하려면 이를 '문자화'시켜 보관해야 한다. 수정할 때도 역시

'문자화된 배열' -> 다시 '배열화' -> 배열 수정 -> 다시 문자화 

이 단계를 거쳐서 수정해야 한다.

 

//localstorage에 arr,obj저장
let arr = [1,2,3];

//배열을 json화하여 문자로 저장
let newArr = JSON.stringify(arr);

localStorage.setItem('num', newArr);
//newArr는 문자이다. 배열이 아니다.

//json을 다시 배열로 바꾸기
JSON.parse(localStorage.getItem('num'))