[Javascript] localStorage

💡localStorage

웹 브라우저에서 데이터를 클라이언트 측에 저장하고 유지할 수 있는 웹 스토리지(web storage) 방식 중 하나

쉽게 말해 localStorage를 사용하면 사용자의 브라우저에 데이터가 서로 공유되며, 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아있을 수 있다.

localStorage의 특징과 동작 방식

1. 키-값 저장
localStorage는 키(key)와 값(value)쌍으로 데이터를 저장한다.
각각의 데이터는 고유한 키를 가지며, 이 키를 사용하여 해당 데이터를 식별한다.
2. 영구보관
localStoorage에 저장한 데이터는 브라우저를 종료해도 계속 유지된다.
브라우저를 재시작하거나 컴퓨터를 껐다 켜도 저장한 데이터가 삭제되지 않는다.
3.도메인 제한
localStorage에 저장된 데이터는 동일한 도메인 내에서만 접근이 가능하다.
ex) 같은 컴퓨터 안의 각기 다른 브라우저(크롬/사파리)
같은 브라우저, 다른 컴퓨터(회사컴 크롬/집컴 크롬)
이 두 경우 모두 서로 다른 브라우저이므로 데이터가 서로 공유되지 않는다.
4. 문자열 저장
localStorage에 저장하는 데이터는 문자열 형태로 저장된다.
따라서 복잡한 데이터 구조는 JSON.stringify()를 사용해 문자열로 변환해야 한다.
5.보안주의
localStorage는 클라이언트 측에 데이터를 저장하는 메커니즘이므로 민감한 정보나 보안에 취약한 정보는 저장하지 않는 것이 좋다.

localStorage사용 예시

// 데이터 저장
localStorage.setItem('username', 'kim');

// 데이터 불러오기
const username = localStorage.getItem('username');
console.log(username); // 'kim'이 출력됨

// 데이터 삭제
localStorage.removeItem('username');

// 모든 데이터 삭제
localStorage.clear();

setItem , getItem

localStorage.setItem(key, value)

setItem	localStorage에 키-값을 저장한다.
key	저장할 데이터의 식별자로 사용되는 문자열 이 키를 사용해 나중에 데이터를 불러올 수 있다.
value	저장할 데이터 값. 문자열 형태로만 저장된다. object나 배열을 string으로 바꾸려면 JSON.stringify()를 사용해 문자열로 변환해야 한다.

value는 string타입이라 .join(',') | .split(',')작업이 필요하다.

localStorage.getItem(key)

getItem	특정 키의 값을 가져온다.
key	가져올 데이터의 식별자로 사용한 문자열.

setItem을 통해 데이터를 저장하고,
getItem을 통해 저장한 데이터를 불러올 수 있다.





💡 localStorage는 간단한 데이터를 사용자의 브라우저에 유지하고자 할 때 유용한 도구이나, 복잡한 상태관리나 더 많은 데이터를 저장하길 원한다면 다른 데이터베이스나 상태관리 라이브러리를 사용하는 것이 더 적합하다.