브라우저 저장소 마스터하기:localStorage와 sessionStorage 비교

웹 애플리케이션에서 처리하는 데이터를 관리하기 위해 반드시 데이터베이스가 필요한 것은 아닙니다. 각 브라우저 저장소 기능은 Chrome(버전 4 이상), Mozilla Firefox(버전 3.5 이상), Internet Explorer(버전 8 이상)와 iOS 및 Android를 포함한 다양한 기타 브라우저에서 지원됩니다.

브라우저 저장에는 localStorage와 sessionStorage라는 두 가지 주요 가능성이 있습니다.

localStorage에 저장된 모든 콘텐츠/데이터 브라우저를 다시 시작한 후에(닫았다가 다시 열림) 개체를 사용할 수 있습니다. 항목을 저장하려면 localStorage까지 , setItem() 메소드를 사용할 수 있습니다 . 이 메소드에는 키와 값이 전달되어야 합니다.

Example: localStorage.setItem("mykey","myvalue");

localStorage에서 항목을 검색하려면 , 메소드 getItem 사용해야 합니다. getItem 메소드에는 검색하려는 데이터의 키가 전달되어야 합니다:

 Example: localStorage.getItem("mykey");

localStorage에서 항목을 제거할 수 있습니다. removeItem()을 사용하여 방법. 이 메소드에는 제거할 항목의 키가 전달되어야 합니다:

 Example: localStorage.removeItem("mykey");

전체 localStorage를 지우려면 , clear()를 사용해야 합니다. localStorage의 메소드 개체:

 Example: localStorage.clear();

세션스토리지

sessionStorage에 저장된 항목 개체는 사용자가 브라우저를 닫을 때까지 유지됩니다. 그러면 저장공간이 비워집니다.

항목을 sessionStorage에 저장할 수 있습니다. , setItem() 메소드를 사용하세요. sessionStorage에서 개체:

Example: sessionStorage.setItem("mykey","myvalue");

sessionStorage에서 항목을 검색하려면 , 메소드 getItem 사용해야 합니다. getItem 메소드에는 검색하려는 데이터의 키가 전달되어야 합니다:

 Example: sessionStorage.getItem("mykey");

sessionStorage에서 항목을 제거할 수 있습니다. removeItem()를 사용하여 방법. 이 메소드에는 제거할 항목의 키가 전달되어야 합니다:

 Example: sessionStorage.removeItem("mykey");

sessionStorage 전체를 지우려면 , clear()을 사용해야 합니다. sessionStorage에 대한 메서드 개체:

 Example: sessionStorage.clear();

localStorage 및 sessionStorage에 배열 저장

단일 값을 localStorage에 저장할 수는 없습니다. 및 sessionStorage 이지만 배열의 내용을 저장할 수도 있습니다.

이 예에는 숫자가 포함된 배열이 있습니다:

var ourArray =[1,2,3,4,5];

이제 localStorage에 저장할 수 있습니다. 또는 sessionStorage setItem() 사용 방법:

localStorage.setItem("ourarraykey",JSON.stringify(ourArray));

또는 sessionStorage의 경우 :

sessionStorage.setItem("ourarraykey",JSON.stringify(ourArray));

저장하려면 먼저 배열을 문자열로 변환해야 합니다. 위에 표시된 예에서는 JSON.stringify를 사용하고 있습니다. 이를 수행하는 방법입니다.

localStorage에서 데이터를 검색할 때 또는 sessionStorage , 다시 배열로 변환:

var storedArray = localStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);

또는 sessionStorage의 경우 :

var storedArray = sessionStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);

무료로 코딩을 배우세요. freeCodeCamp의 오픈 소스 커리큘럼은 40,000명 이상의 사람들이 개발자로 취업하는 데 도움을 주었습니다. 시작하세요