로컬 스토리지란
- 만료기간이 존재하지 않으며 페이지를 변경하거나 브라우저를 닫아도 반 영구적으로 유지되는 저장소를 말한다
- 사용자가 삭제하지 않는 이상 영구적 저장
- 이 저장소는 브라우저,도메인 별로 관리가 되기 때문에 크롬 엣지 웨일 파이어폭스 사파리 등 같은 페이지라도 다르게 저장 할 수 있음
- 브라우저별로 관리하나 저장 공간은 거의 동일 Internet Explorer 11 (구형) 만 10MB를 저장하고 나머지는 5MB로 동일함
로컬스토리지 메서드
1. setItem(key, value) 키(key)와 값(value)을 기반으로 저장
2. getItem(key) (key) 값을 기반으로 값(value)을 불러옴
3. key(index) 스(index) 값을 기반으로 값(value)을 불러옴
4. removeItem(key) (key) 값을 기반으로 해당 로컬 스토리지를 제거
5. clear() 스토리지들을 초기화
6. length 스토리지에 저장된 데이터 개수를 반환
특징
key, value는 항상 문자열(string) 다른 타입으로 저장을 하고 싶다면
json으로 변환필요함.
예시
// 객체 저장
var user = { id: 123, name: "홍길동" }; // json형태 객체 생성 및 데이터 입력
localStorage.setItem("user", JSON.stringify(user)); // 로컬스토리지에 user 라는 이름의 키,user의 값을 json 으로 저장하겠다 ~
// 객체 읽기
var data = JSON.parse(localStorage.getItem("user")); // 로컬스토리지에 담긴 user를 꺼내서 json형태로 data에 담는다
console.log(data.name); // data 안에 있는 이름이라는 키의 값을 꺼내겠다 ~
