[Javascript] 인터넷 브라우저의 LocalStorage, SessionStorage

 

인터넷 브라우저를 사용하면서 우클릭 - 검사를 누르거나 키보드의 F12를 누르면 개발 툴을 확인할 수 있다.

위의 여러 가지 탭 중에서 애플리케이션을 선택하면 위 사진과 같이 로컬 스토리지, 세션 스토리지가 있는 걸 알 수 있다.

 

• 로컬 스토리지(Local Storage)란 ??
  • 데이터가 만료되지 않음 (크롬의 시크릿 창인 경우 지워짐)
• 세션 스토리지(Session Storage)란 ??
  • 페이지를 닫으면 사라짐

 

스토리지에 저장하는 값들은 key value 형태로 구성되어 있다.

 

아직 로컬 스토리지와 세션 스토리지의 사용처(?)는 학습하지 않았지만 로컬 스토리지와 세션 스토리지에

값을 추가하고, 읽고, 수정하고, 삭제하는 방법에 대해 배웠다.

 

어려운 내용이 아니므로 코드 블럭으로 작성하기로 한다.

 

//  .setItem( data ) : 값 추가
localStorage.setItem('first', 'Louis')

//  .getItem(key) : 값 읽기
const dog = localStorage.getItem('first')

//  .removeItem(key) : 값 삭제
localStorage.removeItem('first')


//   주의
//   객체를 추가할 경우 value 에서 Object 로만 확인이 되므로 JSON형식으로 변환하여 추가해야한다.
localStorage.setItem('user', JSON.stringify(user))

//  .setItem : 값 수정. parse로 객채화 해서 수정 후 문자열화해서 수정'
const str = localStorage.getItem('user')
const obj = JSON.parse(str)
obj.age = 20
console.log(obj)
localStorage.setItem('user', JSON.stringify(obj))