Javascript - LocalStorage에 대해..

LocalStorage...

LocalStorage의 기능을 알고 있으면 프론트엔드 개발자로써 유용한 기능을 확장 시켜 나갈 수 있다.
LocalStorage는 말 그대로 로컬의 영역에서 브라우저상에 데이터를 저장 한다.
데이터를 브라우저에 저장을 해둔다면 사용자의 편의성이 증대된다.

우선 스토리지는 여러 종류가 있지만 로컬과 세션을 비교해 보자면,

localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다.

사용자가 로그인을 해두고 창을 닫았다가 다시 접속하게 된다면 로그인이 자동으로 이루어지는 기술이 이 방법이다!

localStorage는 항상 키와 벨류를 가지고 String의 형태로 저장한다.
이 점을 이용해서 나는 객체형태의 데이터를 로컬 스토리지에 저장한뒤 필요한 곳에 뽑아 쓰는 형식으로 사용한다.

사용방법

localStorage.setItem("Phillip", true); : Key가 "Phillip"이고 value가 true인 데이터를 저장.

localStorage.getItem("Phillip"); : key의 value를 찾아 리턴한다. 여기서 리턴값은 true이다

setItem 메서드로 저장하고 싶은 데이터를 키와 벨류값으로 저장하고 getItem으로 원하는 데이터를 뽑아온다!

내가 사용한 실제 코드

const commentObj = {text, id: newId, num };

데이터들을 객체형태로 관리하여

function local() { localStorage.setItem(pushCommentLocal, JSON.stringify(comment));}

setItem으로 string형식으로 저장해 준다.

function getLoadList() {
const getList = localStorage.getItem(pushCommentLocal);
if (getList !== null) {
const paresList = JSON.parse(getList);
paresList.forEach((comment) => {
pushComment(comment.text);});
}
}

getItem으로 저장된 데이터들을 뿌려주고, 수정이나 변경이 되는 데이터는 filter함수를 통해 setItem의 배열을 다시 짠뒤 저장시켜 데이터가 변화 되더라도 새로운 정보를 업데이트 시켜 로컬에 저장하는 방식 ! 자바스크립트는 참 재미있다ㅎ