자바스크립트 로컬스토리지 사용법 localStorage ( javascript localStorage ) > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

자바스크립트 로컬스토리지 사용법 localStorage ( javascript localStorage ) 정보

JavaScript 자바스크립트 로컬스토리지 사용법 localStorage ( javascript localStorage )

본문

 

1. window.localStorage 개념

 

 - key-value 형식으로 저장되며 쿠키를 사용하는 것보다 훨씬 직관적으로 설계되었습니다.

 - 저장된 데이터는 브라우저 세션으로 공유됩니다.

 

 

2. localStorage와 sessionStorage 차이점 

 

 localStorage는 브라우저 창이 닫힌 후에도 유지가 되지만 sessionStorage는 닫힌 후에는 유지되지 못합니다.

 

 

3. localStorage 저장 경로

 

  Goole Chrome에서 웹 스토리지 데이터는 사용자 프로필의 하위 폴더에 있는 SQLite파일에 저장됩니다.

 

 - Windows :  \AppData\Local\Google\Chrome\User Data\Default\Local

 - MacOS : ~/Library/Application Support/Google/Chrome/$PROFILE/Local Storage

 

 

4. localStorage 주요 기능

 

 - setItem( key, value ) : key와 value 추가

 - getItem( key ) : setItem을 이용해 지정된 key로 접근하여 아이템을 획득 ( 데이터 접근 ) 

 - removeItem( key ) : setItem을 이용해 지정된 key로 접근하여 아이템을 제거

 - clear() : 모두 지우기

 - key( index ) : index로 Key 이름을 반환

 

 

5. localStorage 사용법

 

 

데이터 추가



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

 

 

데이터 읽기



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

 

데이터 제거

Key 이름이 전달되면 메소드는 해당 Key가 있는 경우 저장소에서 해당 키를 제거합니다. 지정된 Key와 연결된 항목이 없으면 아무 작업도 수행하지 않습니다.



localStorage.removeItem('myCat');

 

전체 제거

이 메소드를 호출하면 해당 도메인에 대한 모든 레코드의 전체 저장소가 지워집니다.



localStorage.clear();

 

Key 이름 얻기



var KeyName = window.localStorage.key(index);

 

6. localStorage 사용시 주의점 및 한계

 

 - 정보가 브라우저에 저장이 되므로 민감한 정보를 저장하지 마십시오.

 - 모든 주요 브라우저에서 5MB로 제한됩니다.

 - 데이터 보호 형식이 없고 웹 페이지의 모든 코드에서 접근할 수 있으므로 매우 안전하지 않습니다.

 - 동기식 방식이여서 호출된 작업이 차례로 실행됩니다.

 

 

저의 개인 티스토리입니다. 많이 놀러와주세요~

https://lifefun.tistory.com/13 

추천
2

댓글 3개

저는 세션 스토리지를 많이 사용합니다. 아주 많이...

localStorage.setItem('myCat', 'Tom'); 는 아래처럼 사용해도 되더군요.
localStorage.myCat = "Tom";
전체 5,125
개발자팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT