쿠키

브라우저에 저장되는 작은 크기의 문자열 데이터 저장 공간

document.cookie 속성

: 브라우저에 저장되어 있는 쿠키의 값

document.cookie= "user=green";

쿠키의 값은 위와 같이 직접 지정할 수도 있다!

setCookie("이름","값","유지시간");

로컬 스토리지

브라우저를 다시 실행해도 저장되어 있는 데이터 저장 공간
❗ key 및 value 값은 문자열로 입력해야한다.

localStorage.setItem(key,value) 키:값 형태로 보관된다.
localStorage.getItem(key) 키에 해당하는 값에 접근
localStorage.removeItem(key) 키와 해당하는 값을 삭제
localStorage.clear() 모든 것을 삭제
localStorage.length 저장된 항목의 갯수

    localStorage.setItem("test",1);
    console.log(localStorage.getItem("test"));
    localStorage.setItem("green","blue");
    let obj1={
      name: "green",
      age: 30,
      numArr: [1,2,3,4,5],
    }
    let newArr= [1,2,6,4,5]
// JSON 객체=>  JSON.stringify(obj) = 객체를 문자로
// JSON 객체=>  JSON.parse(string) = 문자를 객체로
    localStorage.setItem("person",JSON.stringify(obj1))
    localStorage.setItem("newArr",JSON.stringify(newArr))

❗ 로컬 스토리지는 브라우저(도메인) 별 로 저장된다.

 window.addEventListener("storage",function(e){
 })

addEventListener를 이용하면 storage가 변경되면 실행되는 함수를 작성할 수 있다.

세션 스토리지

브라우저 창을 닫는 순간 자동으로 삭제되는 데이터 저장 공간

• 사용자 정보 중 세션을 유지하는 동안에만 참조할 데이터를 저장한다.
• 화면 이동시 전달해야할 피라미터가 많은 경우 저장한다.

sessionStorage.setItem(key,value) 세션 스토리지 생성
sessionStorage.getItem(key) 키에 해당하는 값에 접근
sessionStorage.removeItem(key) 키와 해당하는 값을 삭제