[JavaScript] Web Storage

Web Storage 에는 LocalStorage 와 SessionStorage 가 있다. 데이터는 키와 값(key-value)으로 저장하며 값은 문자열로 저장된다.

 

✅ 공통 메소드와 프로퍼티

• setItem(key, value)
• getItem(key)
• removeItem(key)
• clear()
• key(index) : index에 해당하는 key
• length

---

Local Storage

데이터를 사용자의 로컬에 보존하는 방식이다. 데이터를 저장, 덮어쓰기, 삭제 등 조작이 가능하며 자바스크립트로만 조작할 수 있다.

 

🍪 Cookie와의 차이점

• 유효기간이 없고 영구적으로 이용 가능
• 단순 문자열 외에 객체 정보 저장 가능
• 용량제한이 없음 ( 쿠키는 도메인당 20개의 쿠키 수가 제한되면 4KB까지 )
• 쿠키와는 다르게 네트워크 요청 시 서버로 전송되지 않음
• 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음
• 웹 스토리지는 origin(프로토콜, 포트, 도메인)이 다르면 접근 불가

    // localStorage 데이터 추가 방법 3가지
    localStorage.username = "남경민";
    localStorage["username"] = "남경민";
    localStorage.setItem("username", "남경민");


    // 데이터 읽기
    var data = localStorage.usesrname;
    var data = localStorage["username"];
    var data = localStorage.getItem("username");

    // 데이터 삭제
    localStorage.removeItem("username");

    // 데이터 전체 삭제 
    localStorage.clear();

SessionStorage

데이터가 현재 떠 있는 탭에서만 유지되는 방식이다. 페이지 새로고침시에는 유지되지만 탭을 닫고 새로 열었을 경우에는 제거가 된다.

localStorage vs sessionStorage

• 로컬 스토리지는 저장한 데이터를 지우지 않는 이상 영구적 보관이 가능하다. 즉, 세션이 끊겨도 가능하다.
• 로컬 스토리지는 도메인만 같으면 전역적으로 공유가 가능하다.
• 세션 스토리지는 브라우저가 종료되면 데이터도 같이 삭제된다. 즉, 같은 세션에서만 사용이 가능하다.
• 세션 스토리지는 같은 사이트의 같은 도메인이더라도 브라우저가 다르면 서로 다른 영역으로 인식한다.