22/10/25 TIL __ localstorage

 

 

🚗   localStorage 란?

 

• 브라우저에 데이터를 저장하는 방법
• 웹 스토리지 객체 중 하나.
• 브라우저에 따라 다르지만 최소 2MB 최대 5MB 까지 저장이 가능하다.
• 브라우저나 탭을 닫아도 데이터가 계속 유지된다.
• 사용자가 직접 삭제하지 않는다면 저장된 데이터는 계속 이용 가능하다. 
• 데이터 저장은 key : value  형태로 한다
• 키와 값은 반드시 문자열 이여야 한다.(숫자, 객체 등 다른 자료형을 사용하면 문자열로 자동 변환된다)
• JSON을 사용하면 객체를 쓸 수 있긴 하다. (JSON.stringify({name : 'hehe'})) 이후  .parse() 실행. 
• 클라이언트 측에서 관리되기 때문에 민감정보는 서버측에 안전하게 보관하는 것이 좋다. 
• Map 자료형과 유사하지만, 인덱스를 사용해서 키에 접근 할 수 있다는 점이 다르다. 
• 배열 형태로도 데이터를 저장할 수 있다.(JSON.stringify와 .parse() 실행해서)

 

🚕   sessionStorage 란?

 

• localStorage에 비해 제한적이기 때문에 자주 사용되지 않는다. 
• 현재 떠있는 탭 내에서만 저장된 데이터가 유지된다.
• 페이지를 새로고침 하게되면 데이터가 유지되지만, 탭을 닫고 다시 열면 데이터는 사라진다.

 

 

🚙   storage 이벤트 

 

• localStorage나 SessionStorage 의 데이터가 갱신될 때, storage 이벤트가 발생한다. 
• setItem, remoceItem, clear를 호출하는 경우 이에 해당한다. 

 

 

 

참고한 링크

https://ko.javascript.info/localstorage

localStorage와 sessionStorage

 

https://velog.io/@jessiii/%EC%BD%94%EB%94%A9%EC%95%A0%ED%94%8C-JS-%EA%B8%B0%EC%B4%88-localStorage%EC%97%90-%EB%B0%B0%EC%97%B4-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%80%EC%9E%A5-%EC%88%98%EC%A0%95-%EC%B6%94%EA%B0%80-%EC%82%AD%EC%A0%9C

[코딩애플 JS 기초] localStorage에 배열 데이터 저장, 수정, 추가, 삭제