localStorage로 브라우저에 데이터 저장하기

localstorage는 자바스크립트를 통해 데이터를 저장 할 수  있는데  데이터를 브라우저에 저장하면 브라우저를 종료 후 재시작해도 데이터가 여전히 남아있다는 특징이 있다. 

 

데이터 저장하는 방법

localStorage.setItem(‘Key’,’Value’)

key값와 value값을 localStorage.setItem을 이용하여 저장해준다.

저장된 데이터 가져오기

localStorage.getItem(‘Key’)

데이터를 가져올땐 getItem을로 Key값을 입력하면 된다.

데이터 삭제하기

localStorage.removeItem(‘name’)

 

localStorage vs sessionStorage

 

웹 스토리지에는 localStorage뿐 아니라 sessionStorage도 존재한다. localStorage와 sessionStorage의 공통점은 두개 모두 데이터를 브라우저에 저장한다는 것인데 데이터 유지기간에 차이가 있다.

 

sessionStorage는 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면 여러개의 셔션 스토리지에 데이터가 따로 저장이되고 각 탭이나 창이 닫히면 저장해 둔 데이터도 함께 소멸한다. 때문에 웹페이지의 세션이 끝날때 저장된 데이터가 지워지는 특징이 있다.

 

반면, localStorage는 여러 탭이나 창을 열었을때 데이터는 서로 공유되기 때문에 웹페이지의 세션이 끝나더라도 데이터가 지워 지지 않는다. 단, 같은 컴퓨터에서 같은 브라우저를 사용할 때만 해당한다는 특징이 있다. 다른 브라우저일 경우, 각각 따로 localStorage에 저장이 될 것이다. 

 

데이터를 객체 또는 배열로 사용하고 싶은 경우

로컬 스토리지에 쓸 데이터를 JSON 형태로 직렬화 하고, 읽은 데이터를 JSON 형태로 역직렬화해주면 원본의 데이터 모습 그대로 얻을 수 있다.

localStorage.setItem("fruit", JSON.stringify({name : 'apple', price: '5000'}));
undefined
JSON.parse(localStorage.getItem("fruit"));
{name : 'apple', price: '5000'}