Firebase - localStorage

- localstorage에 userData를 담아서 refresh해도 userData가 계속 남아 있을 수 있도록 하기 

 

- 개발자 도구 - source - localsorage, sessionstorage 

sessionstorage: 페이지 세션이 끝날때(창을 닫을때 )  데이터는 사라짐 

localstorage: 데이터가 만료되지 않음 

 

1) localStorage 사용방법

 

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

Window.localStorage - Web API | MDN

 

1.  항목 추가

-localStorage에 접근후 setItem()을 이용하여  항목 추가 

- 키,갑을 통한 저장

( "myCat"이 "키" , 'Tom"이 "값")

- 텍스트로 저장 

 

localStorage.setItem("myCat", "Tom");

 

- 객체나 배열로 저장시에는 텍스트로 저장해주는 JSON.stringify 팔요 

 

텍스트가 아니므로 undefined

 

const handleAuth = () => {

signInWithPopup(auth,provider)

.then(result => {

setuserData(result.user);

localStorage.setitem("userData", JSON.stringify(result.user));

})

.catch(error => {

console.log(error);

})

}

//로그인시 유저정보를 localStorage에 저장

 

2. 항목 읽는법

 

- getItem() 이용

 

const cat = localStorage.getItem("myCat");

 

- JSON.parse() : 문자열을 js 객체로 변환 필요 

 

const initialUserData = localtStorage.getItem("userData") ?

JSON.parse(localStorage.getItem("userData")) : {};

// localStorage.getItem("userData")가 존재한다면, JSON.parse()를 사용하여 해당 값을 JavaScript 객체로 변환

 

const [userData, setuserData] = useState({initialUserData});

// refresh해도 유저 정보가 사라지지 않음   

 

3. 제거 

 

localStorage.removeItem("myCat");

 

- 전체 제거

 

localStorage.clear();