Web의 LocalStorage를 알아보자

브라우저의 개발자모드 애플리케이션에 가면 로컬저장소(LocalStorage)를 확인할수 있다.

 

쿠키처럼 값을 저장할 수 있는 특징이 있다.
하지만 객체는 저장이 불가능하다.

 

구성.

쿠키나 세션과 비슷하게 key값과 value값으로 구성되어있다.

 

간단 사용방법

localStorage.setItem("내키", "1654");   // .setItem(key, value) 값 저장하기
localStorage.setItem("내키", "333");      // 이미있는 key값을 사용하면 값이 덮어쓰기 되어버린다.
alert(localStorage.getItem("내키"));      // .getItem(key) 값(value) 가져오기
localStorage.setItem("다른키", "2222");
alert(localStorage.length);               // .length 로컬스토리지에 저장된 key의 개수
localStorage.removeItem("내키");          // .removeItem key 삭제
localStorage.key(0);      // .key(index) i 번째 값 가져오기
                          //(로컬호스트에 순서가 일정한걸 보장하지않는다.)
localStorage.clear();     // .clear 모든 키 삭제

축약 사용

  localStorage.fbi = "FBI";       // .setItem 같음
  alert(localStorage.fbi);        // .getItem
  delete localStorage.fbi;        // removeItem

 

 

LocalStorage는 객체를 저장하지 못한다.

  localStorage.clear();
  let testArr = [2, 5, 7, 9];
  localStorage.setItem("test", JSON.stringify(testArr));
  alert(JSON.parse(localStorage.getItem("test"))[2]);

- Json을 이용해 저장하도록 하자.