로컬 스토리지를 적어보자!
기본적인 명령어들
localStorage.setItem( 'key' , 'value' ) 로컬함수에 데이터를 저장한다. 키값과 그에따르는
벨류값을 저장시킨다. 저렇게 적으면 끝 주의사항 string형으로만 저장된다.
localStorage.getItem( 'key' ) 이번에는 로컬함수에 저장한 데이터를 불러온다.
setItem으로 저장한 key값에 따르는 벨류 값이 호출된다. 사용할때 저 겟아이템을 변수화
시켜서 쓰면 용의 하다 예를 들어 const abc = localStorage.getItem( 'key' ) 요로케
localStorage.removeItem( 'key' ) 해당 키값으로 저장되어 있는 데이터를 삭제한다. .
이렇게 하면 그 키 값으로 getitem해도 데이터가 없어서 undefined된다.
localStorage.clear() 로컬스토리지에 저장된 모든 키와 벨류를 날려버린다.
빈값으로 만들기 때문에 아무 데이터를 갖고 있지 않다.
적용 예 <팀원의 코드인데 해석해보장>
import {createSlice} from '@reduxjs/toolkit';
const initialState = {
isLogin: !!localStorage.getItem('accessToken'), // 앞에 느낌표 두개는 불리언 만드는 로직
displayName: localStorage.getItem('displayName'), //데이터가 있으면 트루 없으면 폴스
uid: localStorage.getItem('uid'),
photoURL: localStorage.getItem('photoURL'), //전부 로컬스토리지에서 겟아이템 했다.
email: localStorage.getItem('email'),
};
const AuthSlice = createSlice({
name: 'auth',
initialState,
reducers: {
login: (state, action) => {
const {displayName, uid, photoURL, email} = action.payload;
localStorage.setItem('displayName', displayName); //여기는 이제 로그인할때
localStorage.setItem('uid', uid); //얻게 되는 데이터를 셋아이템 해서 저장시킨다.
localStorage.setItem('photoURL', photoURL);
localStorage.setItem('email', email);
state.isLogin = true; //그와동시에 액션 페이로드로 얻어온 유저데이터를
state.displayName = displayName; //구조분해 할당으로 스테이트에 푸쉬푸쉬
state.uid = uid; //요렇게 재할당해도 불변성 유지된다. 이모인가 고모인가가
state.photoURL = photoURL; //설정되어 있다고함 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 쿠쿠
state.email = email;
}, //내가 개인과제할때는 로그아웃 온클릭 버튼에 직접 로컬셋아이템
logout: (state, action) => { //해줬는데 이게 더 깔끔한거 같다.
localStorage.clear(); //로그아웃 로직일때 로컬을 ㄹ비워준다.
return (state = {});
},
},
});
export const {login, logout} = AuthSlice.actions;
export default AuthSlice.reducer;
// 이제 다른 페이지에서 유저정보를 얻고 싶으면 useSelector로 로그인유저값을 가져와도 되고
//귀찮으면 로컬스토리지에서 바로 꺼내써도 된다.
{fakedata.map(item => {
return (
<List key={item.id} onClick={() => navigate(`/detail/${item.id}`)}>
<PhotoWrapper></PhotoWrapper>
<UserInfo>
<Avatar>
{' '}
<img src={item.avatar} alt="아바타이미지" />
</Avatar>
<NicknameAndDate>
<p>{item.nickname}</p>
<time>{item.createdAt}</time>
</NicknameAndDate>
</UserInfo>
<Content>{item.content}</Content>
</List>
);
//아 새로운 발견 맵함수를 돌리면 return 안의 태그중에 최상단 태그에 key값을 달아야한다.
<List key={item.id}>
// 습과적으로 최상단에 <></>을 두는 습관때문에 그동안 오류(경고)가 났었는데 이유를 알았다.