[TIL220127] localStorage

 

 

 

 

---

 

localStorage

 

웹페이지를 새로고침하면 모든 state는 리셋된다.

state 데이터를 DB로 저장하면 되는데, 좀 더 간단한 방법으로 localStorage가 있다.

사이트마다 5MB정도의 텍스트, 숫자 데이터를 저장할 수 있다.

 

 

 

 

---

local Storage / Session Storage

 

개발자 도구에서 Application - Storage

 

local Storage : 유저가 브라우저 청소를 하지않는 이상 영구적으로 남아있다.

Session Storage : 브라우저를 끄면 날라간다.

 

 

 

 

 

---

 

localStorage 조작

 

 

localStorage.setItem('key', 'value');   //추가
localStorage.getItem('key');            //읽기
localStorage.removeItem('key')          //삭제

 

 

🔻 텍스트 자료만 저장가능하므로 array나 obejct는 JSON 형태로 저장해야 한다.

     JSON.stringify ({ key : value})

localStorage.setItem('obj', JSON.stringify({name:'kim'}) );

 

✔️ 꺼내서 사용하려면 " " 제거 

   JSON.parse( "~~~" )

localStorage.setItem('obj', JSON.stringify({name:'kim'}) );


//꺼내서 " " 제거
let a = localStorage.getItem('obj')
JSON.parse(a)

//출력 : {name:'kim'}

 

 

 

 

---