JavaScript - cookie, sessionStorage, localStorage

<목차>

1. cookie
2. sessionStorage
3. localStorage

 

---

1. cookie

쿠키는 브라우저를 종료시켜도 쿠키의 유효 기간까지 데이터가 남아있다.

쿠키 CRUD 함수는 정형화되어 있는 느낌이라 보통 만들어져 있는 함수를 검색해 가져와 사용한다.

 

쿠키를 제거 : 쿠키의 유효시간을 과거 시간으로 변경하는 게 쿠키의 제거방법이다.

 

쿠키 수정 : 존재하는 쿠키의 키(key)에 다른 값(value)을 주면 내용이 변경된다.

 

cookie생성 함수 예시

//set
function createCookie(name, value, time) {
    // expire에 넣은 시간이 지나면 유효하지 않다.
    // 시간을 넣지 않고 쿠키를 생성하면 세션 쿠키 지속, 만료되지 않는 쿠키
    let date = new Date();
    // 밀리세컨드로 시간을 증가된 값으로 만들어서
    // 1000 === 1초

    // 1일 동안 지속되는 쿠키 시간 생성
    // 매개변수 time === 지속시키고 싶은 일
    // time === 2 2일
    date.setTime(date.getTime() + time * 24 * 60 * 60 * 1000);
    // toUTCString 문자열로 반환되는 국제 표준시 메서드 
    document.cookie = name + "=" + value + ";" + "expires=" + date.toUTCString() + ";" + "path=/";
}

 

---

2. sessionstorage

세션스토리지에 저장된 값은 브라우저를 종료시키면 데이터가 사라진다.(휘발성 데이터)

세션은 객체와 유사하게 key와 value로 저장된다. 

 

1. setItem() : 세션에 값을 저장하는 메서드

sessionstorage.setItem("key", "value");

 

 

2.getItem() : 세션의 값을 호출하는 메서드

sessionStorage.getItem("key")

저장되어 있는 키(key)로 저장된 데이터 값(value)을 불러올 수 있다.

 

3.removeItem : 키와 일치하는 세션 제거

sessionStorage.removeItem("key");

이렇게 작성하면 "데이터 이름"으로 저장된 데이터  값을 삭제할 수 있다.

 

4.clear() : 세션 전체 삭제

sessionStorage.clear();

 

5.key() : 세션스토리지 인덱스로 호출

sessionStorage.key(index);

 

 

---

 

3. localStorage

localstorage는 브라우저를 종료시켜도 데이터가 남아있다.

localStorage는 cookie에 저장하기 힘든 큰 데이터를 저장할 때 사용한다.

 

1. setItem() : localStorage에  값을 저장하는 메서드

localStorage.setItem("key", "value");

 

 

2.getItem() : localStorage의 값을 호출하는 메서드

localStorage.getItem("key")

저장되어 있는 키(key)로 저장된 데이터 값(value)을 불러올 수 있다.

 

3.removeItem : 키와 일치하는 localStorage제거

localStorage.removeItem("key");

이렇게 작성하면 "데이터 이름"으로 저장된 데이터  값을 삭제할 수 있다.

 

4.clear() : localStorage 전체 삭제

localStorage.clear();

 

5.key() : localStorage 인덱스로 호출

localStorage.key(index);