localStorage 및 sessionStorage 소개
소개
웹 저장소 API의 일부인 localStorage
및 sessionStorage
개체는 키/값 쌍을 로컬에 저장하기 위한 두 가지 훌륭한 도구입니다. 저장을 위해 localStorage
및 sessionStorage
를 사용하는 것은 쿠키 사용의 대안이며 다음과 같은 몇 가지 이점이 있습니다.
- 데이터는 로컬에만 저장되며 서버에서 읽을 수 없으므로 쿠키에 존재하는 보안 문제가 제거됩니다.
- 훨씬 더 많은 데이터를 저장할 수 있습니다(대부분의 브라우저에서 10mb).
- 구문은 간단합니다.
또한 모든 최신 브라우저에서 지원되므로 현재 문제 없이 사용할 수 있습니다. 쿠키는 특히 인증과 관련하여 여전히 유용하지만 localStorage
또는 sessionStorage
를 사용하는 것이 더 나은 대안일 수 있는 경우가 있습니다.
전제 조건
이 자습서를 완료하려면 다음이 필요합니다.
- 컴퓨터에 설치된 최신 버전의 Node. Node를 설치하려면 이 Node.js 설치 방법 튜토리얼에 설명된 단계를 따르세요.
- JavaScript로 코딩하는 방법에 대한 기본 이해.
1단계 - localStorage와 sessionStorage의 이해
localStorage
와 sessionStorage
는 거의 동일하며 동일한 API를 사용합니다. 차이점은 sessionStorage
를 사용하면 창이나 탭이 닫힐 때까지만 데이터가 유지된다는 것입니다. localStorage
를 사용하면 사용자가 수동으로 브라우저 캐시를 지우거나 웹 앱이 데이터를 지울 때까지 데이터가 유지됩니다. 이 자습서에서는 localStorage
를 다루지만 sessionStorage
의 구문은 동일합니다.
이 지식으로 이제 localStorage
에서 키/값 쌍을 만들고 읽고 업데이트할 수 있습니다.
2단계 - 항목 생성, 읽기 및 업데이트
setItem()
메서드를 사용하여 localStorage
개체에 대한 항목을 만들 수 있습니다. setItem()
메서드는 키
와 해당 값의 두 가지 인수를 사용합니다.
let key = 'Item 1';
localStorage.setItem(key, 'Value');
항목을 읽으려면 getItem()
메서드를 사용하십시오. getItem()
메서드는 키여야 하는 하나의 인수를 사용합니다. 이 함수는 해당 값을 문자열로 반환합니다.
let myItem = localStorage.getItem(key);
이 코드는 myItem
을 key
에 해당하는 값인 Value
와 동일하게 설정합니다.
항목 업데이트는 setItem()
메서드로 수행됩니다. 다시 말하지만 두 가지 인수가 필요합니다. key 인수는 기존 키이고 value 인수는 새 값입니다.
localStorage.setItem(key, 'New Value');
이제 key
의 localStorage
값은 Value
가 아닌 New Value
입니다.
localStorage
개체에서 항목을 만들고 읽고 업데이트할 수 있습니다. 개별 항목을 삭제하고 localStorage
의 모든 항목을 지울 수도 있습니다.
3단계 - 항목 삭제 및 지우기
removeItem()
메서드를 사용하여 항목을 삭제할 수 있습니다. removeItem()
메서드는 localStorage
개체의 키가 될 하나의 인수를 사용합니다.
localStorage.removeItem(key);
localStorage
의 모든 항목을 지울 수도 있습니다. 이것은 clear()
메소드로 수행할 수 있습니다:
localStorage
에 저장된 모든 항목을 지우는 방법은 다음과 같습니다.
localStorage.clear();
이러한 메서드를 사용하면 localStorage
에서 항목을 빠르게 제거하고 지울 수 있는 더 많은 기능을 사용할 수 있습니다. 그러나 localStorage
에는 몇 가지 제한이 있습니다. localStorage
와 sessionStorage
모두 문자열만 저장할 수 있습니다. 이 문제를 해결하려면 JSON 메서드를 사용해야 합니다.
4단계 — JSON으로 문자열이 아닌 값 저장
localStorage
는 문자열 값만 저장할 수 있습니다. 개체 또는 배열을 localStorage
에 값으로 저장하려는 경우 JSON.stringify()
를 사용하여 문자열로 변환할 수 있습니다. localStorage
에서 키/값 쌍을 생성하거나 업데이트할 때 JSON.stringify()
를 개체 또는 배열과 함께 인수로 사용하세요.
let myObj = { name: 'Skip', breed: 'Labrador' };
localStorage.setItem(key, JSON.stringify(myObj));
myObj
는 개체이지만 JSON.stringify(myObj)
는 이를 문자열로 변환합니다. 따라서 myObj
는 이제 유효한 localStorage
값입니다.
문자열화된 값을 읽고 반환하려면 JSON.parse()
메서드를 사용하세요. JSON.parse()
메서드는 JSON 문자열을 받아 JavaScript 객체로 변환합니다. JSON.parse()
는 .getItem()
을 인수로 사용합니다.
let item = JSON.parse(localStorage.getItem(key));
이제 item
은 key
의 값과 동일하게 설정됩니다. 이전 코드 조각에서 key
의 값은 myObj
의 문자열화된 버전으로 설정되었습니다. JSON.parse
를 사용하면 myObj
가 다시 객체로 변환됩니다. 따라서 item
은 문자열이 아닌 객체로서 myObj
와 동일하게 설정됩니다.
JSON.stringify
를 사용하여 배열과 개체를 문자열로 변환하고 JSON.parse
를 사용하여 다시 변환할 수 있다는 것은 매우 유용합니다. localStorage
가 비어 있는지 확인하는 방법도 알아야 합니다.
5단계 - 항목 확인
이 단계에서는 localStorage
에 항목이 있는지 테스트합니다. if
문을 사용하여 localStorage
가 항목을 보유하고 있는지 또는 비어 있는지 확인할 수 있습니다. 이렇게 하려면 localStorage
의 길이를 확인하십시오.
if (localStorage.length > 0) {
// ...
}
localStorage.length
가 0
보다 크면 localStorage
개체 내에 항목이 있는 것입니다. localStorage
에 항목이 없는 경우 else
문을 포함합니다.
if (localStorage.length > 0) {
// ...
} else {
// ...
}
if
및 else
문에 적용할 코드를 포함할 수 있습니다. localStorage
의 항목을 반복할 수 있습니다.
6단계 - 항목 반복
localStorage
및 sessionStorage
개체는 forEach
메서드를 지원하지 않습니다. localStorage
의 항목을 반복하려면 for
루프를 사용하세요.
for (let i = 0; i < localStorage.length; i++){
}
key()
메서드는 정수를 인수로 사용하고 해당 키를 반환합니다. for
루프를 사용하여 i
를 key()
의 정수로 전달합니다.
for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
}
getItem
메서드를 사용하여 key
에 해당하는 값을 반환합니다.
for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let value = localStorage.getItem(key);
}
console.log
문을 만들어 key
와 value
를 모두 화면에 출력합니다.
for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let value = localStorage.getItem(key);
console.log(key, value);
}
key()
는 for
루프를 사용하여 localStorage
를 반복하는 데 매우 유용합니다. 일부 브라우저는 localStorage
를 지원하지 않습니다.
7단계 - 지원 확인
if
문을 사용하여 window
개체에서 사용할 수 있는지 확인하여 localStorage
지원을 테스트할 수 있습니다.
if (window.localStorage) {
// localStorage supported
}
Can I use… 웹사이트를 사용하여 주요 브라우저에서 localStorage
지원을 확인할 수도 있습니다.
결론
localStorage
또는 sessionStorage
개체를 사용하여 키/값 쌍을 저장할 수 있습니다. localStorage
내의 항목과 상호 작용할 수 있는 메서드가 있습니다. 이 자습서를 사용하여 localStorage
내에서 항목을 생성, 제거 및 업데이트했습니다. 또한 배열 및 개체 데이터를 문자열로 변환하고 JSON 메서드를 사용하여 다시 변환했습니다.
때때로 localStorage
또는 session
대신 쿠키를 사용하는 것이 가장 좋을 수 있습니다. 쿠키란 무엇이며 JavaScript를 사용하여 쿠키를 사용하는 방법은 이 주제를 철저히 다루며 훌륭한 다음 단계입니다.