JavaScript 도구: localStorage 및 sessionStorage

Pranay Kapgate2022-06-01 · 8 min read

JavaScript 도구: localStorage 및 sessionStorage

JavaScript (흔히 JS로 약칭됨)는 현대 웹 인프라의 기반 중 하나입니다. 이는 일급 함수를 지원하는 가볍고 인터프리트되는 객체 지향 프로그래밍 언어입니다. JavaScript는 주로 동적 웹 페이지에서의 구현으로 잘 알려져 있습니다. 그러나 그 특징 덕분에 JavaScript는 브라우저가 아닌 환경에서도 사용됩니다.

이 가이드에서는 두 가지 JavaScript 객체인 : localStorage 및 sessionStorage.

localStorage 및 sessionStorage 개요

객체 localStorage 및 sessionStorage는 웹 스토리지 API의 일부로 제공됩니다. 이는 키-값 쌍의 로컬 저장에 유용한 도구입니다. localStorage 및 sessionStorage을 사용하는 것은 쿠키의 훌륭한 대안입니다. 이 접근 방식은 몇 가지 추가적인 이점을 제공합니다:

데이터가 로컬에 저장되며 서버에서 읽을 수 없습니다. 이로 인해 쿠키와 관련된 보안 문제가 제거됩니다.
더 높은 저장 용량을 허용합니다(대부분의 최신 브라우저에서 최대 10MB).
간단하고 직관적인 구문.

이러한 객체는 모든 최신 웹 브라우저에서 지원되므로 브라우저 호환성 문제가 없습니다. 쿠키는 인증과 같은 많은 상황에서 여전히 유용합니다. 하지만 localStorage 및 sessionStorage이 더 나은 솔루션을 제공하는 상황이 있습니다.

전제 조건

이 튜토리얼에 표시된 단계를 수행하려면 다음 구성 요소가 필요합니다:

올바르게 구성된 Linux 서버. 이 가이드에서는 CloudSigma에서 자체 Ubuntu 서버를 설정하는 방법을 보여줍니다..
Node.js를 JavaScript 런타임으로 사용합니다. 다음에 대해 자세히 알아보세요: Ubuntu에 Node.js 설치하기.
최신 웹 브라우저(예: Google Chrome 또는 Firefox.

데모를 위해 JS 스크립트가 첨부된 샘플 웹 페이지를 준비했습니다. 다음에 대해 자세히 알아보세요: HTML 파일에 JavaScript 추가하기:

tree_struct

VS 1

텍스트 편집기로는 다음을 사용합니다: Visual Studio Code:

Web 1

localStorage와 sessionStorage의 차이점은 무엇인가요?

두 localStorage 및 sessionStorage 모두 동일한 API에서 기원합니다. 동작 또한 동일합니다. 유일한 차이점은 각 객체가 데이터를 유지하는 방식입니다. sessionStorage의 경우, 창이나 탭이 닫힐 때까지 데이터가 유지됩니다. localStorage의 경우, 브라우저 캐시가 지워지거나 웹 앱이 이를 지울 때까지 데이터가 유지됩니다.

이 튜토리얼에서는 주로 localStorage에 초점을 맞출 것입니다. 하지만 sessionStorage의 구문도 동일합니다. 우리는 localStorage를 사용하여 키/값 쌍을 생성, 읽기, 업데이트하는 방법을 보여드릴 것입니다..

1단계 – 항목 생성

우리는 localStorage 객체에 항목을 선언할 수 있습니다. 이때 setItem()을 사용합니다. 이 메서드는 키와 그에 해당하는 값이라는 두 개의 인수를 받습니다. 메서드 구조는 다음과 같습니다:

localStorage.setItem(<key>, <value>)

1	localStorage.setItem(<key>, <value>)

다음 예제에서는 key 변수를 생성했습니다. setItem() 메서드를 사용하여 새로운 key를 설정하고 그 값을 ‘value로 설정했습니다.’:

let key = 'item_1';
localStorage.setItem(key, 'value');

1 2	let key = 'item_1'; localStorage.setItem(key, 'value');

VS 2

2단계 – 항목 읽기

이제 키에 저장된 값을 어떻게 읽을까요? localStorage에서 키를 가져오려면 getItem() 메서드를 사용합니다. 이 메서드는 키의 이름을 인수로 받아 해당 키에 저장된 값을 반환합니다. 가져온 콘텐츠를 표시하기 위해 alert() 메서드를 사용하겠습니다:

let myItem = localStorage.getItem(key);
alert(myItem);

1 2	let myItem = localStorage.getItem(key); alert(myItem);

VS 3

다음으로, 웹 브라우저에서 웹 페이지를 엽니다. 그러면 key에 저장된 값이 표시될 것입니다.:

Web 2

3단계 – 항목 업데이트

값이 한 번 설정되면 변경되지 않는 한 그대로 유지됩니다. 만약 동일한 setItem() 메서드를 동일한 key에 다시 사용하면, 기존 값을 새 값으로 자동으로 대체합니다.

다음 예제에서 key는 먼저 ‘value 값으로 초기화됩니다.’ 그 다음 줄에서 우리는 setItem()을 다시 호출하여 값을 ‘새로운 값으로 설정했습니다.’:

let key = 'item_1';
localStorage.setItem(key, 'value');
localStorage.setItem(key, 'new value');
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

localStorage.setItem(key, 'value');

localStorage.setItem(key, 'new value');

let myItem = localStorage.getItem(key);

alert(myItem);

VS 4

이 코드를 브라우저에서 실행하면 어떻게 되는지 살펴보겠습니다:

Web 3

보시다시피, 키의 값이 다음과 같이 설정됩니다. ‘새로운 값’.

4단계 – 항목 삭제하기

만약 localStorage (그리고 sessionStorage 도 마찬가지로) 더 이상 필요하지 않은 항목이 있다면, 나중에 이를 지우는 것이 좋습니다. 이렇게 하면 나중에 사용할 수 있는 공간이 더 늘어납니다. 또한 앱의 메모리 효율성도 높아집니다.

다음에서 항목을 삭제하려면 localStorage, 전용 메서드인 removeItem()이 있습니다. 이 메서드는 key를 인수로 받아 다음에서 제거합니다. localStorage 데이터 풀:

localStorage.removeItem(<key_to_remove>)

1	localStorage.removeItem(<key_to_remove>)

스크립트에 이를 구현해 보겠습니다:

let key = 'item_1';
localStorage.setItem(key, 'value');
localStorage.removeItem(key);
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

localStorage.setItem(key, 'value');

localStorage.removeItem(key);

let myItem = localStorage.getItem(key);

alert(myItem);

VS 5

실행하면 출력 결과에 null이 표시되는데, 이는 다음 key에 대한 값이 존재하지 않기 때문입니다.:

Web 4

5단계 – 항목 비우기

이전 예제에서는 하나의 키만 제거했습니다. 하지만 localStorage를 사용하면 한 번에 저장된 모든 항목을 비울 수 있습니다. 모든 항목을 비우기 위해 localStorage는 다음 메서드를 제공합니다. clear(). 이 메서드는 인수를 받지 않습니다:

localStorage.clear();

1	localStorage.clear();

메서드를 실제로 적용해 보겠습니다:

let key = 'item_1';
localStorage.setItem(key, 'value');
localStorage.clear();
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

localStorage.setItem(key, 'value');

localStorage.clear();

let myItem = localStorage.getItem(key);

alert(myItem);

VS 6

이전과 마찬가지로 다음에서 모든 항목을 제거하므로, localStorage의 key 값에 접근할 때 null을 반환합니다.:

Web 5

6단계 – JSON 작업하기

객체 및 배열 저장하기

The localStorage 및 sessionStorage 객체는 문자열 값만 저장할 수 있습니다. 하지만 객체나 배열을 다뤄야 할 때가 있습니다. 이 경우, 이를 문자열로 변환해야 합니다.

JavaScript에는 다음과 같은 기능이 제공됩니다. JSON.stringify() 는 배열/객체를 가져와 문자열로 변환합니다. 이 글에서는 JSON 형식에 대한 빠른 개요를 제공합니다. 더 자세한 가이드는 다음을 읽어보세요. JSON in JavaScript.

이 예제에서는 sampleObj 객체를 생성하고 두 개의 필드 name 및 location을 정의했습니다. 이를 문자열로 변환하여 다음 key에 저장하겠습니다.:

let key = 'item_1';
let sampleObj = { name: "Jason", location: "Sweden" };
localStorage.setItem(key, JSON.stringify(sampleObj));
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

let sampleObj = { name: "Jason", location: "Sweden" };

localStorage.setItem(key, JSON.stringify(sampleObj));

let myItem = localStorage.getItem(key);

alert(myItem);

VS 7

여기서 출력 결과는 객체의 데이터를 포함하는 문자열이 됩니다:

Web 6

객체 및 배열 읽기

저장할 때 객체와 배열을 문자열로 변환했습니다. 이 문자열을 다시 원래 형식으로 변환할 수도 있습니다. 그렇게 하기 위해 다음 메서드를 사용합니다. JSON.parse(). 이 메서드는 문자열을 받아 다시 JSON 형식으로 변환합니다:

let key = 'item_1';
let sampleObj = { name: "Jason", location: "Sweden" };
localStorage.setItem(key, JSON.stringify(sampleObj));
let myItem = JSON.parse(localStorage.getItem(key));
alert(JSON.stringify(myItem, null, " "));

let key = 'item_1';

let sampleObj = { name: "Jason", location: "Sweden" };

localStorage.setItem(key, JSON.stringify(sampleObj));

let myItem = JSON.parse(localStorage.getItem(key));

alert(JSON.stringify(myItem, null, " "));

VS 8

출력 결과의 경우, 더 보기 좋게 만들기 위해 다시 문자열로 변환하고 형식을 지정했습니다:

Web 7

7단계 – localStorage에 항목이 있는지 확인하기

이 섹션에서는 localStorage 및 sessionStorage를 사용할 수 있는지 확인하는 간단한 테스트를 보여드리겠습니다. 항목이 포함되어 있는지 여부입니다. 간단한 if 문을 사용하면 다음의 길이를 확인할 수 있습니다: localStorage 또는 sessionStorage. 항목이 존재하면 길이는 0보다 크게 됩니다.

먼저 다음 예제를 구현해 보세요:

let key = 'item_1';
localStorage.setItem(key, 'new_value');
if(localStorage.length > 0){
alert('true');
}
else{
alert('false');
}

let key = 'item_1';

localStorage.setItem(key, 'new_value');

if(localStorage.length > 0){

alert('true');

}

else{

alert('false');

}

VS 9

여기서 출력은 ‘true’입니다. 왜냐하면 다음의 위치에 하나의 키가 존재하기 때문입니다: localStorage:

Web 8

단계 8 – 항목 반복하기

The localStorage 및 sessionStorage 객체는 키를 배열과 유사한 구조로 저장합니다. 이들은 forEach 메서드를 지원하지 않으므로, 각 항목을 반복하기 위해 기존의 for 루프를 사용하는 방법을 따라야 합니다.

다음 예제에서는 localStorage가 비어 있는지 여부를 확인합니다. 비어 있지 않다면 각 항목을 반복합니다:

let key = 'item_1';
localStorage.setItem(key, 'new_value');
if(localStorage.length > 0){
for(i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let myItem = localStorage.getItem(key);
alert(key);
}
}
else{
alert('false');
}

let key = 'item_1';

localStorage.setItem(key, 'new_value');

if(localStorage.length > 0){

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

let key = localStorage.key(i);

let myItem = localStorage.getItem(key);

alert(key);

}

else{

alert('false');

}

VS 10

출력 결과는 모든 항목을 하나씩 보여줍니다:

Web 9

단계 9 – 브라우저 지원 확인

다음과 같이 localStorage (및 sessionStorage) 지원 여부는 window 객체에서 사용 가능한지 확인하여 체크할 수 있습니다. 간단한 if 문이면 충분합니다:

if(window.localStorage){
alert(true);
}
else{
alert(false);
}

if(window.localStorage){

alert(true);

}

else{

alert(false);

}

VS 11

웹 브라우저에서 코드를 실행해 보세요:

Web 10

마치며

이 가이드에서는 브라우저에 키/값 쌍을 저장하기 위해 JavaScript에서 localStorage 및 sessionStorage 객체를 사용하는 방법을 설명했습니다. 이 구문들은 다루기가 훨씬 간단합니다. 키/값 쌍을 생성, 제거 및 업데이트하는 방법을 보여드렸습니다. 또한 객체와 배열을 문자열로 변환하여 저장하는 방법(및 그 반대)도 다루었습니다.

JavaScript에 대한 지식을 더 넓히고 싶다면, 저희 블로그:

즐거운 코딩 하세요!

Pranay Kapgate

작성자 · CloudSigma

Preslav Dobrev는 CloudSigma의 크리에이티브 디자이너로서, 전통적이고 혁신적인 마케팅 채널을 활용하여 일관된 비즈니스 정체성을 구축하는 데 중점을 두고 있습니다. 그는 영향력 있는 브랜드 내러티브를 창출하기 위해 예술적 비전과 전략적 마케팅을 결합하는 데 능숙합니다.

JavaScript 도구: localStorage 및 sessionStorage

localStorage 및 sessionStorage 개요

전제 조건

localStorage와 sessionStorage의 차이점은 무엇인가요?

1단계 – 항목 생성

2단계 – 항목 읽기

3단계 – 항목 업데이트

4단계 – 항목 삭제하기

5단계 – 항목 비우기

6단계 – JSON 작업하기

객체 및 배열 저장하기

객체 및 배열 읽기

7단계 – localStorage에 항목이 있는지 확인하기

단계 8 – 항목 반복하기

단계 9 – 브라우저 지원 확인

마치며

Pranay Kapgate

댓글