웹사이트 검색

localStorage 및 sessionStorage 소개


소개

웹 저장소 API의 일부인 localStoragesessionStorage 개체는 키/값 쌍을 로컬에 저장하기 위한 두 가지 훌륭한 도구입니다. 저장을 위해 localStoragesessionStorage를 사용하는 것은 쿠키 사용의 대안이며 다음과 같은 몇 가지 이점이 있습니다.

  • 데이터는 로컬에만 저장되며 서버에서 읽을 수 없으므로 쿠키에 존재하는 보안 문제가 제거됩니다.
  • 훨씬 더 많은 데이터를 저장할 수 있습니다(대부분의 브라우저에서 10mb).
  • 구문은 간단합니다.

또한 모든 최신 브라우저에서 지원되므로 현재 문제 없이 사용할 수 있습니다. 쿠키는 특히 인증과 관련하여 여전히 유용하지만 localStorage 또는 sessionStorage를 사용하는 것이 더 나은 대안일 수 있는 경우가 있습니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

  • 컴퓨터에 설치된 최신 버전의 Node. Node를 설치하려면 이 Node.js 설치 방법 튜토리얼에 설명된 단계를 따르세요.
  • JavaScript로 코딩하는 방법에 대한 기본 이해.

1단계 - localStorage와 sessionStorage의 이해

localStoragesessionStorage는 거의 동일하며 동일한 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);

이 코드는 myItemkey에 해당하는 값인 Value와 동일하게 설정합니다.

항목 업데이트는 setItem() 메서드로 수행됩니다. 다시 말하지만 두 가지 인수가 필요합니다. key 인수는 기존 키이고 value 인수는 새 값입니다.

localStorage.setItem(key, 'New Value');

이제 keylocalStorage 값은 Value가 아닌 New Value입니다.

localStorage 개체에서 항목을 만들고 읽고 업데이트할 수 있습니다. 개별 항목을 삭제하고 localStorage의 모든 항목을 지울 수도 있습니다.

3단계 - 항목 삭제 및 지우기

removeItem() 메서드를 사용하여 항목을 삭제할 수 있습니다. removeItem() 메서드는 localStorage 개체의 키가 될 하나의 인수를 사용합니다.

localStorage.removeItem(key);

localStorage의 모든 항목을 지울 수도 있습니다. 이것은 clear() 메소드로 수행할 수 있습니다:

localStorage에 저장된 모든 항목을 지우는 방법은 다음과 같습니다.

localStorage.clear();

이러한 메서드를 사용하면 localStorage에서 항목을 빠르게 제거하고 지울 수 있는 더 많은 기능을 사용할 수 있습니다. 그러나 localStorage에는 몇 가지 제한이 있습니다. localStoragesessionStorage 모두 문자열만 저장할 수 있습니다. 이 문제를 해결하려면 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));

이제 itemkey의 값과 동일하게 설정됩니다. 이전 코드 조각에서 key의 값은 myObj의 문자열화된 버전으로 설정되었습니다. JSON.parse를 사용하면 myObj가 다시 객체로 변환됩니다. 따라서 item은 문자열이 아닌 객체로서 myObj와 동일하게 설정됩니다.

JSON.stringify를 사용하여 배열과 개체를 문자열로 변환하고 JSON.parse를 사용하여 다시 변환할 수 있다는 것은 매우 유용합니다. localStorage가 비어 있는지 확인하는 방법도 알아야 합니다.

5단계 - 항목 확인

이 단계에서는 localStorage에 항목이 있는지 테스트합니다. if 문을 사용하여 localStorage가 항목을 보유하고 있는지 또는 비어 있는지 확인할 수 있습니다. 이렇게 하려면 localStorage의 길이를 확인하십시오.

if (localStorage.length > 0) {
  // ...
}

localStorage.length0보다 크면 localStorage 개체 내에 항목이 있는 것입니다. localStorage에 항목이 없는 경우 else 문을 포함합니다.

if (localStorage.length > 0) {
  // ...
} else {
  // ...
}

ifelse 문에 적용할 코드를 포함할 수 있습니다. localStorage의 항목을 반복할 수 있습니다.

6단계 - 항목 반복

localStoragesessionStorage 개체는 forEach 메서드를 지원하지 않습니다. localStorage의 항목을 반복하려면 for 루프를 사용하세요.

for (let i = 0; i < localStorage.length; i++){

}

key() 메서드는 정수를 인수로 사용하고 해당 키를 반환합니다. for 루프를 사용하여 ikey()의 정수로 전달합니다.

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 문을 만들어 keyvalue를 모두 화면에 출력합니다.

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를 사용하여 쿠키를 사용하는 방법은 이 주제를 철저히 다루며 훌륭한 다음 단계입니다.