개발자 도구 [Application]-[web local storage] 저장하기/가져오기

 

웹 브라우저는 Application 에 web local storage 에 정보가 남아있는데, 여기서 가져올 것 ! 가져오는 함수가 있음 !

단점 : 다른 웹 브라우저 사용시 보여지지 않음

[저장하기 / 가져오기]
<문법>
localStorage.setItem(key, value);
localStorage.setItem('문자열', '문자열');
localStorage.getItem(key);
localStorage.getItem('문자열');

 

값 저장하기/가져오기

// 1-1. 저장하기
localStorage.setItem('name', '홍길동');

 

확인해보면 개발자 도구에서 Application 에 Storage -> local storage 에 보면 저장된 값을 확인할 수 있다 !

새로 고침해도 저장된 값이 지워지지 않는다 ! 보통 일주일정도 저장되는데 

삭제를 원하는 경우 해당 값을 클릭하여 키보드 deldte 하면 된다. 삭제 됐는지 확인해볼라면 새로 고침 해보세용

 

근데 만약 똑같은 key명일 경우 추가가 되는 게 아니라 값 변경이 된다

저장된 값을 가져오기 위해서는 getItem 을 쓰면 된다 !

// 1-2. 가져오기
const value = localStorage.getItem('name');
console.log('[key] name >> ', value);

 

콘솔창 확인

 

객체 저장하기/가져오기

// 2-1. 객체 저장하기
obj = {
  name : '이미자',
  age : 55,
}

 

하지만 자바스크립트로 만든 객체를 Json 형태로 만들어야 한다

문자열 형태로 만들어 통일화하여 직렬화를 할 것 !

• object type -> JSON
• 직렬화
• JSON.stringify(객체)

obj_string = JSON.stringify(obj);
console.log('obj_string type >> ', typeof obj_string);
console.log(obj_string);
localStorage.setItem('obj', obj_string);

 

// 2-1. 객체 가져오기
obj_value = localStorage.getItem('obj');
console.log(obj_value);
console.log(typeof obj_value);

 

문자열을 가져오면 안된다 ! type 이 object 형태로 가져와야한다. 그럼 문자열을 object 변환해주자

• JSON -> object type
• 역직렬화

// 2-1. 객체 가져오기
obj_value = JSON.parse(localStorage.getItem('obj'))
console.log(typeof obj_value);
console.log(obj_value);
console.log(obj_value.name);