본문으로 바로가기

localStorage

category Programming Language/🟨 Javascript 2020. 4. 7. 01:57
 

Storage

The Storage interface of the Web Storage API provides access to a particular domain's session or local storage. It allows, for example, the addition, modification, or deletion of stored data items.

developer.mozilla.org

 

localStorage 객체를 통해서 로컬 스토리지를 관리할 수 있습니다. 

 

 

 

 

로컬 스토리지는 보통 쿠키의 대안으로 생각됩니다. 

 

  HTML5가 나온 이후, cookies의 많은 사용 방법들은 LocalStorage의 사용으로 대체되었습니다. LocalStorage는 cookies보다 더 많은 장점이 있기 때문입니다. 가장 중요한 차이점 중 하나는 cookies와는 달리모든 HTTP 요청에서 데이터를 주고받을 필요가 없다는 것입니다. HTTP 요청에서 데이터를 주고받지 않고 LocalStorage를 이용하면 클라이언트와 서버간의 전체 트래픽과 낭비되는 대역폭의 양을 줄일 수 있습니다.

 

  (실제로 저는 JWT 관련 인증 작업을 처리한 후 토큰을 LS에 저장해둡니다.)


  데이터가 유저의 로컬 디스크에 저장되어 있으면 인터넷이 끊어져도 데이터가 삭제되거나 지워지지 않기 때문입니다.
또한 앞에서 언급했듯이 LocalStorage는 최대 5MB의 정보를 저장할 수 있습니다. 이것은 cookies가 보유할 수 있는 4KB보다 훨씬 더 많습니다.

 

  LocalStorage의 만료 조건은 permanent cookies처럼 동작합니다. Javascript 코드를 통해 삭제하지 않으면 데이터는 자동으로 삭제되지 않습니다. 이 방식은더 오랜 시간동안 저장해야하는 큰 데이터에 유용합니다. 또한 LocalStorage를 사용하면 문자열 뿐만아니라 javascript의 primitives와 object도 저장할 수 있습니다.


darren, dev blog
블로그 이미지 DarrenKwonDev 님의 블로그
VISITOR 오늘 / 전체