[JavaScript] Window.lacalStorage와 Window.sessionStorage

localStorage와 sessionStorage

로컬 스토리지와 세션 스토리지는 자바 스크립트에서 사용되는 웹 스토리지 옵션입니다. 이 두 가지 기능은 웹 브라우저에서 키와 값으로 이루어진 데이터를 저장하는 데에 사용됩니다.

쿠키와의 차이점

웹 브라우저에 데이터를 저장하는 것이 쿠키와 유사하다고 생각할 수 있지만 다음과 같은 차이점이 존재합니다.

• 쿠키와 달리 네트워크 요청 시 서버로 전송되지 않는다
• 개발자가 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다
• 쿠키와 달리 HTTP 헤더를 통해 객체를 조작할 수 없다
• 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다

제공하는 프로퍼티와 메서드

공통 프로퍼티

• localStorage.length 및 sessionStorage.length: 스토리지에 저장된 항목 수를 반환합니다

메서드

• setItem(key, value): 지정된 키(key)와 값을(value) 스토리지에 저장합니다.
• getItem(key): 지정된 키(key)에 해당하는 값을 스토리지에서 가져옵니다.
• removeItem(key): 지정된 키(key)에 해당하는 값을 스토리지에서 삭제합니다.
• clear(): 스토리지 내의 모든 데이터를 삭제합니다.

// 로컬 스토리지에 데이터 저장
localStorage.setItem('username', 'john_doe');
localStorage.setItem('email', 'john@example.com');

// 데이터 불러오기
var username = localStorage.getItem('username');
var email = localStorage.getItem('email');

console.log('Username:', username);
console.log('Email:', email);

// 데이터 삭제
localStorage.removeItem('email');

// 저장된 항목 수 출력
console.log('로컬 스토리지의 항목 수:', localStorage.length);

// 모든 데이터 삭제
localStorage.clear();

// 저장된 항목 수 다시 출력 (이제 0이어야 함)
console.log('로컬 스토리지의 항목 수:', localStorage.length);

LocalStorage

로컬 스토리지는 영구적으로 데이터를 저장하는 데 사용됩니다. 웹 페이지가 닫히거나 브라우저를 다시 시작해도 데이터가 유지됩니다. 이 데이터는 도메인별로 저장되고, 다른 도메인의 스트립트에서는 접근할 수 없습니다.

 

키와 값은 모두 문자만 저장할 수 있고, 다른 데이터 값을 저장할 시 문자열로 변환되어 저장됩니다.

 

사용 예

// 데이터 저장
localStorage.setItem('키', '값');

// 데이터 불러오기
var data = localStorage.getItem('키');

// 데이터 삭제
localStorage.removeItem('키');

SessionStorage

세션 스토리지는 세션이 존재하는 동안 데이터를 저장하는 데 사용됩니다. 세션은 브라우저 창이 열려 있는 동안 유지되며, 브라우저를 닫으면 세션 스토리지의 데이터가 삭제됩니다. 세션 스토리지도 도메인별로 저장되며 다른 도메인에서 접근할 수 없습니다.

 

키와 값은 모두 문자만 저장할 수 있고, 다른 데이터 값을 저장할 시 문자열로 변환되어 저장됩니다.

 

사용 예

// 데이터 저장
sessionStorage.setItem('키', '값');

// 데이터 불러오기
var data = sessionStorage.getItem('키');

// 데이터 삭제
sessionStorage.removeItem('키');

순회하기

로컬 스토리지와 세션 스토리지에서 키와 값을 순회하는 방법은 for...in 루프나 Object.keys() 메서드를 사용하여 가능합니다.

for...in

for...in 루프를 사용할 때 hasOwnProperty()를 사용하여 객체의 속성인지 확인하는 것이 좋습니다. 이렇게 하면 브라우저의 내장 객체와 사용자가 설정한 데이터 사이에 충돌을 방지할 수 있습니다.

for (var key in localStorage) {
    if (localStorage.hasOwnProperty(key)) {
        var value = localStorage[key];
        console.log(key + ': ' + value);
    }
}

Object.keys()

var keys = Object.keys(localStorage);
for (var i = 0; i < keys.length; i++) {
    var key = keys[i];
    var value = localStorage.getItem(key);
    console.log(key + ': ' + value);
}

 

 

참고 자료

https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage

https://ko.javascript.info/localstorage