자바스크립트 로컬스토리지 사용법 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로 제한됩니다.
- 데이터 보호 형식이 없고 웹 페이지의 모든 코드에서 접근할 수 있으므로 매우 안전하지 않습니다.
- 동기식 방식이여서 호출된 작업이 차례로 실행됩니다.
저의 개인 티스토리입니다. 많이 놀러와주세요~
2
댓글 3개
localStorage.setItem('myCat', 'Tom'); 는 아래처럼 사용해도 되더군요.
localStorage.myCat = "Tom";
유효기간 설정과 그렇지 않다는점. 용량차이?
