JS_09_웹스토리지

1. 종류

---

sessionStorage

• 브라우저가 실행되는 동안만 저장되며 브라우저를 닫으면 데이터가 사라짐
• ex) 일회성 정보, 이전 페이지 기록

localStorage

• 사용자가 직접 삭제하거나 브라우저 캐시, 쿠키 등을 청소하지 않는 한 영구 저장
• ex) 설정 정보, 팝업창(다시 보지 않기), 테마, 자동로그인 etc

2. 사용법

---

1) 자료 대입

sessionStorage.setItem( '속성명/key' , '값/value' );

2) 자료 호출

sessionStorage.getItem( '속성명/key' );
속성이 존재하지 않으면 null, 존재하면 value를 반환

3) 자료 삭제

sessionStorage.removeItem( '속성명/key' );
속성만 삭제

localStorage.clear();
전체삭제

3. 확인 방법

---

• 웹 브라우저 F12 > application tab > local/sesssion strorage
• 도메인 별로 웹스토리지가 할당

4. JSON (JavaScript Object Notation)

---

자바스크립트 객체 문법의 형식

• 자바 객체를 문자열 타입이지만, 객체형식(모양)으로 표현한 것
  ex) 3 : 숫자타입, 숫자모양 vs "3" : 문자열타입, 숫자모양
• { age : 40 } 객체타입, 객체모양 vs "{age:40}" 문자열타입, 객체모양

1) Storage, HTTP

Storage, HTTP은 객체지향이 아님
문자열과 바이트만 전송 가능함.
따라서, [객체 > 문자열] >> [문자열 > 객체] 로의 타입변환이 필요

2) 사용법

(1) JSON.stringify (자료);  : 해당 자료를 문자열 타입으로 반환
(2) JSON.parse(자료);       : 해당 자료를 JS 타입으로 반환

5. 예제

---

예제 1. localStorage에 데이터 저장하고 불러오기

localStorage에 <input> 으로 입력받은 사용자의 아이디를 저장하고,
페이지를 새로고침해도 그 값이 유지되는 것을 확인하시오.

<input id="userInput" type="text" placeholder="ID를 입력하세요."/>
<button onclick="func1()"> 예제1 버튼</button>

function func1(){
    console.log('func1 exe');

    let userInput = document.querySelector('#userInput');
    let user = userInput.value
    console.log(user);

    localStorage.setItem('user', user);
    console.log(localStorage)
};

예제 2. localStorage에 객체 저장하기 (JSON.stringify)

아래 사용자의 환경 설정(객체)을 문자열로 변환하여 localStorage에 저장 하시오.

const userSettings = { theme: 'dark', notifications: true, language: 'ko' };
console.log(JSON.stringify(userSettings));

const data = JSON.stringify(userSettings);
localStorage.setItem("data", data)

console.log(localStorage)

예제 3: localStorage에서 객체 불러오기 (JSON.parse)

localStorage에 문자열로 저장된 사용자 설정(userSettings) 을 다시 객체로 변환하여 사용 하시오.

let getData = JSON.parse(localStorage.getItem('data'));
console.log(getData);

예제 4: 데이터 삭제하기 (removeItem, clear)

스토리지에 저장된 특정 데이터(userSettings) 또는 전체 데이터를 삭제 하시오.

localStorage.removeItem("data");
// localStorage.clear();

console.log(localStorage)

5) 예제 5: 방문 횟수 카운터 만들기

페이지가 로드될 때마다 sessionStorage를 사용하여 방문 횟수를 1씩 증가시키시오.
현재 방문 횟수를 id="visitCount"인 span 태그에 "이번 세션에서 O번째 방문입니다." 형식으로 출력하시오.
(페이지를 새로고침하면 숫자가 올라가고, 브라우저 탭을 닫았다 다시 열면 1로 초기화되어야 합니다.)

<span id="visitCount"></span>

// 1. 기존 웹 스토리지 불러오기
let visit = sessionStorage.getItem('visit');
console.log(visit);

// 2. 새로운 웹스토리지에 값 저장
if ( visit == null ) {                   // 2. 속성명 X = 최초방문 = 속성명을 만들기 
    sessionStorage.setItem('visit', 1);     
} else{                                  // 3. 이미 존재한다면
    visit = Number(visit) + 1 ;
    sessionStorage.setItem('visit', visit);
}

document.querySelector("#visitCount").innerHTML = `이번 세션에서 ${visit}번째 방문입니다. `