INPUT에서 선택한 이미지를 localStorage에 저장후

[오진희]

INPUT에서 선택한 이미지를 localStorage에 저장후 
다시 localStorage에서 빼와서 프로필 이미지처럼 보여줄려구 합니다..
그런데 ...
여러 방법으로 시도 하다
URL.createObjectURL()함수가 1회성 이더라구요...
로드 되면 저장한 이미지 사진이 보이도록 하기위해  저장할때 URL.createObjectURL() 를이용해 URL로 바꾼후 로컬 스토리지에 저장했구,
useEffect 안에서 로컬스토리지에 있던 값을 빼와서 img src에 넣어주는 로직 인데 ... 페이지를 벗어나면... url이 없어지더라구요 ㅠㅠ.

그래서 방법을 바꿔서 input에서 받은 file 객체를 아예 로컬스토리지에 JSON.stringify로 변환후 저장했더니 이번에는
아예 로컬스토리지에 {} 빈객체로 저장되더라구요 ㅠㅠ. 왜 JSON.stringify를 시키면 file객체가 => 빈객체로 바뀌어 
버리는건가요? 선생님....ㅠㅠㅠ
아 ㅠㅠ
 
예시 ) 코드 일부 
let imgFile = e.target.files[0];
SETUserImg(e.target.files[0]);  

localStorage.setItem('profile', JSON.stringify(UserImg));
const profile = localStorage.getItem('profile');

혹시 저장된 이미지가 다른페이지 이동후 본페이지로 돌아올때나, 리로드 되도 보이도록 하는게 목표인데 ㅠㅠ 
다른방법이 있을까요?. 선생님 ㅠㅠㅠ 
몇일 동안 고민하고 바꿔도 되질않아서 여쭈어 봅니다 ㅠㅠ.. 감사합니다...

[codingapple]

이미지는 로컬스토리지에 저장하기엔 대부분 너무 큽니다 
createObjectURL 써도 임시 url일 뿐이라 재접속하면 원래 안될 수도 있을걸요 

[오진희]

네ㅠㅠ. 임시 url 이라서 그런지 잠깐만되고. 그뒤로는 안되더라구요 ㅠㅠ.
하나의 이미지만 선택해서 저장되구 보여주기위해. 이렇게 로직을 짰어욤..

1.)그럼 input에서 받은 file 객체를 아예 로컬스토리지에 JSON.stringify로 변환후 저장했더니 
아예 로컬스토리지에 {} 빈객체로 저장되는이유는 왜일까요?ㅠㅠ 
JSON.stringify를 시키면 file객체가 => 빈객체로 바뀌는 이유가....

2.) 그럼 이런 input에서 받은 이미지를 저장하고, 새로고침할때나, 새로 로드
되도 저장된 이미지를 보여주게 하려면 어떤방법들을 사용하나요?? 선생님~~.
답변해주셔서 감사합니다 ㅠㅠ

[codingapple]

file데이터에 JSON.stringify는 사용불가능합니다 
보통 이미지를 서버로 보내서 저장시킵니다

[오진희]

허걱...ㅠㅠ 그렇군욥 ㅠㅠ.....
애플샘 답해주셔서 감사합니당 ㅠㅠ.!!

[글쓴이]

글