13. localStorage
1. localStorage란?
localStorage는 브라우저에 데이터를 저장하는 공간입니다.
페이지를 새로고침하거나 브라우저를 다시 실행해도 데이터가 유지됩니다.
예를 들어
로그인 유지
좋아요
다크모드
최근 본 상품
예약 정보
등을 저장할 때 많이 사용합니다.
2. localStorage 특징
브라우저에 저장
새로고침 후에도 유지
문자열(String)만 저장 가능
서버 없이 사용 가능
3. 데이터 저장
문법
localStorage.setItem(
"key",
"value"
);
예제
localStorage.setItem(
"name",
"홍길동"
);
저장 완료
4. 데이터 읽기
문법
localStorage.getItem("name");
예제
const name = localStorage.getItem("name");
console.log(name);
결과
홍길동
5. 데이터 삭제
localStorage.removeItem("name");
전체 삭제
localStorage.clear();
6. React에서 저장하기
좋아요
const [liked,setLiked]=useState(false);
const handleLike=()=>{
const next=!liked;
setLiked(next);
localStorage.setItem(
"liked",
next
);
}
좋아요를 누르면
State와 localStorage가 함께 변경됩니다.
7. React에서 읽기
컴포넌트가 시작될 때
useEffect(()=>{
const saved=
localStorage.getItem("liked");
if(saved){
setLiked(saved==="true");
}
},[]);
새로고침해도
좋아요가 유지됩니다.
8. 객체 저장
localStorage는
문자열만 저장합니다.
객체는
JSON으로 변환해야 합니다.
const reserve={
name:"홍길동",
course:"EAST"
};
저장
localStorage.setItem(
"reserve",
JSON.stringify(reserve)
);
9. 객체 읽기
const reserve=
JSON.parse(
localStorage.getItem(
"reserve"
)
);
결과
{
name:"홍길동",
course:"EAST"
}
10. 배열 저장
const list=[
"EAST",
"WEST"
];
저장
localStorage.setItem(
"courses",
JSON.stringify(list)
);
읽기
const list=
JSON.parse(
localStorage.getItem(
"courses"
)
);
11. 동부산CC 좋아요
const [liked,setLiked]=useState(false);
useEffect(()=>{
const saved=
localStorage.getItem(
"courseLike"
);
if(saved){
setLiked(
saved==="true"
);
}
},[]);
버튼
<button
onClick={handleLike}
>
{
liked
?
"♥"
:
"♡"
}
</button>
새로고침해도
좋아요가 유지됩니다.
12. 예약 저장
예약 완료
localStorage.setItem(
"reserve",
JSON.stringify(form)
);
다시 접속
useEffect(()=>{
const data=
JSON.parse(
localStorage.getItem(
"reserve"
)
);
if(data){
setForm(data);
}
},[]);
예약 정보가 자동으로 복원됩니다.
13. 다크모드
저장
localStorage.setItem(
"theme",
"dark"
);
불러오기
useEffect(()=>{
const theme=
localStorage.getItem(
"theme"
);
},[]);
사용자가 설정한 테마가 유지됩니다.
14. 최근 본 코스
저장
localStorage.setItem(
"lastCourse",
"EAST COURSE"
);
읽기
const last=
localStorage.getItem(
"lastCourse"
);
메인 화면에서
최근 본 코스를 보여줄 수 있습니다.
15. 실행 흐름
사용자 클릭
↓
State 변경
↓
localStorage 저장
↓
새로고침
↓
useEffect 실행
↓
localStorage 읽기
↓
State 복원
↓
화면 유지
16. React에서 자주 사용하는 localStorage
기능 저장 내용
좋아요 true / false
로그인 사용자 정보
예약 예약 객체
다크모드 dark / light
최근 본 코스 코스 이름
게시판 임시저장 글 내용
17. localStorage 주의사항
✔ 문자열만 저장 가능
✔ 객체는 JSON.stringify()
✔ 읽을 때 JSON.parse()
✔ 브라우저에만 저장
✔ 용량 제한(약 5MB)
✔ 중요한 개인정보는 저장하지 않는 것이 좋습니다.
18. JSON 변환
객체
↓
JSON.stringify()
↓
문자열
↓
localStorage 저장
↓
JSON.parse()
↓
객체 복원
정리
localStorage는 브라우저에 데이터를 저장하여 새로고침이나 브라우저 재실행 후에도 데이터를 유지할 수 있는 기능입니다.
React에서는 localStorage를 useState와 useEffect와 함께 사용하는 경우가 많습니다.
데이터를 저장할 때는 localStorage.setItem()을 사용하고, 읽을 때는 localStorage.getItem()을 사용합니다.
객체나 배열은 JSON.stringify()로 문자열로 변환하여 저장하고, 읽을 때는 JSON.parse()로 다시 객체로 복원합니다.
동부산CC 프로젝트에서는 좋아요, 예약 정보, 다크모드, 최근 본 코스 등 다양한 기능을 localStorage를 이용하여 구현할 수 있습니다.
1. localStorage란?
localStorage는 브라우저에 데이터를 저장하는 공간입니다.
페이지를 새로고침하거나 브라우저를 다시 실행해도 데이터가 유지됩니다.
예를 들어
로그인 유지
좋아요
다크모드
최근 본 상품
예약 정보
등을 저장할 때 많이 사용합니다.
2. localStorage 특징
브라우저에 저장
새로고침 후에도 유지
문자열(String)만 저장 가능
서버 없이 사용 가능
3. 데이터 저장
문법
localStorage.setItem(
"key",
"value"
);
예제
localStorage.setItem(
"name",
"홍길동"
);
저장 완료
4. 데이터 읽기
문법
localStorage.getItem("name");
예제
const name = localStorage.getItem("name");
console.log(name);
결과
홍길동
5. 데이터 삭제
localStorage.removeItem("name");
전체 삭제
localStorage.clear();
6. React에서 저장하기
좋아요
const [liked,setLiked]=useState(false);
const handleLike=()=>{
const next=!liked;
setLiked(next);
localStorage.setItem(
"liked",
next
);
}
좋아요를 누르면
State와 localStorage가 함께 변경됩니다.
7. React에서 읽기
컴포넌트가 시작될 때
useEffect(()=>{
const saved=
localStorage.getItem("liked");
if(saved){
setLiked(saved==="true");
}
},[]);
새로고침해도
좋아요가 유지됩니다.
8. 객체 저장
localStorage는
문자열만 저장합니다.
객체는
JSON으로 변환해야 합니다.
const reserve={
name:"홍길동",
course:"EAST"
};
저장
localStorage.setItem(
"reserve",
JSON.stringify(reserve)
);
9. 객체 읽기
const reserve=
JSON.parse(
localStorage.getItem(
"reserve"
)
);
결과
{
name:"홍길동",
course:"EAST"
}
10. 배열 저장
const list=[
"EAST",
"WEST"
];
저장
localStorage.setItem(
"courses",
JSON.stringify(list)
);
읽기
const list=
JSON.parse(
localStorage.getItem(
"courses"
)
);
11. 동부산CC 좋아요
const [liked,setLiked]=useState(false);
useEffect(()=>{
const saved=
localStorage.getItem(
"courseLike"
);
if(saved){
setLiked(
saved==="true"
);
}
},[]);
버튼
<button
onClick={handleLike}
>
{
liked
?
"♥"
:
"♡"
}
</button>
새로고침해도
좋아요가 유지됩니다.
12. 예약 저장
예약 완료
localStorage.setItem(
"reserve",
JSON.stringify(form)
);
다시 접속
useEffect(()=>{
const data=
JSON.parse(
localStorage.getItem(
"reserve"
)
);
if(data){
setForm(data);
}
},[]);
예약 정보가 자동으로 복원됩니다.
13. 다크모드
저장
localStorage.setItem(
"theme",
"dark"
);
불러오기
useEffect(()=>{
const theme=
localStorage.getItem(
"theme"
);
},[]);
사용자가 설정한 테마가 유지됩니다.
14. 최근 본 코스
저장
localStorage.setItem(
"lastCourse",
"EAST COURSE"
);
읽기
const last=
localStorage.getItem(
"lastCourse"
);
메인 화면에서
최근 본 코스를 보여줄 수 있습니다.
15. 실행 흐름
사용자 클릭
↓
State 변경
↓
localStorage 저장
↓
새로고침
↓
useEffect 실행
↓
localStorage 읽기
↓
State 복원
↓
화면 유지
16. React에서 자주 사용하는 localStorage
기능 저장 내용
좋아요 true / false
로그인 사용자 정보
예약 예약 객체
다크모드 dark / light
최근 본 코스 코스 이름
게시판 임시저장 글 내용
17. localStorage 주의사항
✔ 문자열만 저장 가능
✔ 객체는 JSON.stringify()
✔ 읽을 때 JSON.parse()
✔ 브라우저에만 저장
✔ 용량 제한(약 5MB)
✔ 중요한 개인정보는 저장하지 않는 것이 좋습니다.
18. JSON 변환
객체
↓
JSON.stringify()
↓
문자열
↓
localStorage 저장
↓
JSON.parse()
↓
객체 복원
정리
localStorage는 브라우저에 데이터를 저장하여 새로고침이나 브라우저 재실행 후에도 데이터를 유지할 수 있는 기능입니다.
React에서는 localStorage를 useState와 useEffect와 함께 사용하는 경우가 많습니다.
데이터를 저장할 때는 localStorage.setItem()을 사용하고, 읽을 때는 localStorage.getItem()을 사용합니다.
객체나 배열은 JSON.stringify()로 문자열로 변환하여 저장하고, 읽을 때는 JSON.parse()로 다시 객체로 복원합니다.
동부산CC 프로젝트에서는 좋아요, 예약 정보, 다크모드, 최근 본 코스 등 다양한 기능을 localStorage를 이용하여 구현할 수 있습니다.
#13. localStorage