JS | localStorage알아보기

localStorage는 사용자의 브라우저에 데이터를 저장할 수 있게 해줍니다. localStorage에는 key와 value를 저장할 수 있으며 그 값들은 모두 String으로 저장해야 합니다.

sessionStorage와의 차이점?
세션스토리지는 세션이 종료되면 저장된 데이터가 모두 사라지지만, 로컬스토리지에 저장된 데이터는 만료기간이 없습니다.
즉, 브라우저가 종료되면 세션스토리지에 저장된 데이터는 사라지고 로컬스토리지에 저장된 데이터는 사라지지 않습니다.
세션스토리지는 탭/창 마다 각각 다른 세션 스토리지를 생성합니다.

1. 데이터 저장하기

setItem(key, value)을 이용하여 데이터를 저장합니다.
이 때 로컬스토리지는 모든 값을 문자열로 저장해야 하기 때문에 object를 JSON.stringify()를 이용해 문자열로 변경하여 저장해줍니다.

// Object생성
const userInfo = {
    name: "Russell Westbrook", team: "Houston Rockets", position: "PG"
};

// 저장!
localStorage.setItem("users", JSON.stringify(userInfo));

2. 저장된 데이터 불러오기

저장된 데이터는 getItem()을 이용해 불러올 수 있습니다.

setItem()을 이용해 데이터를 저장할 때 사용한 key값으로 데이터를 불러옵니다.

만약 저장된 값이 Object라면 JSON.prase()를 이용해 다시 변환해줍니다.

const getUser = localStorage.getItem("users");

// 다시 Object로 변환
JSON.parse(getUser);

3. 저장된 데이터 삭제하기

데이터를 삭제하는 메서드는 removeItem()과 clear() 두 가지 입니다.

removeItem()은 특정한 데이터를 삭제할 때, clear()는 로컬스토리지에 저장된 모든 데이터를 삭제할 때 사용합니다.

// removeItem()
localStorage.removeItme("users");

// clear()
localStorage.clear();