웹스토리지

웹 스토리지

• 웹 스토리지는 브라우저에 데이터를 저장할 수 있도록 지원하는 HTML5의 기능입니다.
• 웹 스토리지 종류로는 로컬 스토리지와 세션 스토리지가 있습니다.
  key-value 자료 구조 형태로 데이터가 저장됩니다.

1. 로컬 스토리지(local Storage)

• 브라우저에 반 영구적으로 데이터를 저장합니다.
• 브라우저를 종료해도 데이터가 유지됩니다.(컴퓨터를 껐다 켜도 유지됩니다)
• 도메인이 다른 경우에는 접근할 수 없습니다.
  • 예) www.naver.com에서 로컬스토리지에 저장한 정보를 www.google.com에서 접근할 수 없습니다.
• 쿠키(cookie)와 비슷한 역할입니다.
  • 쿠키는 데이터를 4KB 까지만 저장 가능했지만, 로컬 스토리지는 5MB까지 저장할 수 있습니다.
• 입력할 때는 localStorage.setItem(입력자료) / 받아올 때는 localStorage.getItem(입력자료)

// 로컬 스토리지에 저장
localStorage.setItem('userName', '홍길동'); // key:'userName', value:'홍길동'
localStorage.setItem('userAge', 20);
 
// 로컬 스토리지에서 데이터 불러와 콘솔에 출력
console.log(localStorage.getItem('userName')); // 홍길동
console.log(localStorage.getItem('userAge')); // 20

• object로 받아오고 싶다면?
  : 원래는 string 값만 받아옴. 그래서 object를 그냥 넣어준다면
  object라고 갚을 받아오지 못합니다.

const product ={id:3, name:"머그잔", price: 5000}
localStorage.setItem{'userName', product}; //[object object]

• 그래서 아래와 같이 JSON을 활용해서 입력해주어야 합니다.
  입력할 때에는 JSON.stringfy(입력 자료), 받아올 때는 JSON.parse(입력자료)로 사용해야 합니다.

const product ={id:3, name:"머그잔", price: 5000}
localStorage.setItem{'userName', JSON.stringfy(product)}

const currentProduct = localStorage.getItem('userName')
JSON.parse(currentProduct)

2. 세션 스토리지(session Storage)

• 각 세션마다 데이터가 개별적으로 저장됩니다.
  • 예를 들어, 브라우저에서 여러개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장됩니다.
  • 세션 스토리지는 로컬 스토리지와 다르게, 세션(브라우저 탭)을 종료하면 데이터가 자동으로 제거되며, 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없습니다.
  • 문법은 로컬 스토리지와 거의 동일합니다.
• 입력할 때는 sessionStorage.setItem / 받아올 때는 sessionStorage.getItem

**세션 스토리지(session Storage)**

- 각 세션마다 데이터가 개별적으로 저장됩니다.
    - 예를 들어, 브라우저에서 여러개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장됩니다.
    - 세션 스토리지는 로컬 스토리지와 다르게, 세션(브라우저 탭)을 종료하면 데이터가 자동으로 제거되며, 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없습니다.
    - 문법은 **로컬 스토리지**와 거의 동일합니다.

참고
코멘토 웹개발 직무부트캠프 과제