웹 스토리지 API

웹 스토리지란?
웹 저장소는 더 안전하며 웹 사이트 성능에 영향을 주지 않고 많은 양의 데이터를 사용자의 브라우저에 로컬로 저장할 수 있습니다.

웹 스토리지에는 두 가지 유형의 메커니즘이 있습니다. 그들은

세션 저장

로컬 스토리지

세션 스토리지
탭별로 변경할 수 있습니다. 변경 사항은 탭을 닫을 때까지 현재 페이지에 저장되고 사용할 수 있습니다.

로컬 스토리지
변경 사항은 명시적으로 삭제할 때까지 사용할 수 있습니다. 동일한 출처를 가진 모든 탭에서 사용할 수 있습니다. 브라우저나 탭을 닫거나 OS를 재부팅해도 이러한 변경 사항은 그대로 유지됩니다.

세션 저장소와 로컬 저장소 모두에서 사용할 수 있는 메서드 및 속성은 다음과 같습니다.

세트 아이템

아이템 받기

항목 제거

클리어

키

길이

세트 아이템

두 개의 매개변수 key 및 value 를 사용합니다.

window.localStorage.setItem('name', 'Dev Community');
window.sessionStorage.setItem('name', 'Dev Community');

여기서 name는 키이고 Dev Community는 값입니다. 또한 로컬 저장소와 세션 저장소는 문자열만 저장할 수 있습니다.

배열이나 객체를 저장하려면 문자열로 변환해야 합니다.

이를 위해 setItem에 저장하기 전에 JSON.stringify() 메서드를 사용할 수 있습니다.

const person = {
    name: "Naveen Chandar",
    location: "India"
}
window.localStorage.setItem('user',JSON.stringify(person));
window.sessionStorage.setItem('user',JSON.stringify(person));

저장된 항목은 크롬 개발자 도구의 응용 프로그램 탭에서 액세스할 수 있습니다.

아이템 받기

이 방법을 사용하면 브라우저의 localStorage/sessionStorage 객체에 저장된 데이터에 액세스할 수 있습니다.

값을 저장할 때 주어진 키인 하나의 매개변수만 받아들이고 값을 문자열로 반환합니다.

window.localStorage.getItem('user');
window.sessionStorage.getItem('user');

이것은 값이 있는 문자열을 반환합니다.

"{"name":"Naveen Chandar","location":"India"}"

이 값을 사용하려면 다시 객체로 변환해야 합니다.

이를 위해 JSON 문자열을 JavaScript 객체로 변환하는 JSON.parse() 메서드를 사용합니다.

JSON.parse(window.localStorage.getItem('user'));
JSON.parse(window.sessionStorage.getItem('user'));

항목 제거

이 메서드는 지정된 키가 있는 경우 저장소에서 이를 제거합니다. 지정된 키와 연결된 항목이 없으면 이 메서드는 아무 작업도 수행하지 않습니다.

값을 저장하는 동안 제공된 키인 하나의 매개변수만 허용합니다.

window.localStorage.removeItem('user');
window.sessionStorage.removeItem('user');

분명한

이 방법은 로컬 저장소에 있는 모든 항목을 지웁니다.
매개변수를 허용하지 않습니다.

window.localStorage.clear();
window.sessionStorage.clear();

열쇠

이 방법은 주어진 위치에서 키를 얻는 데 사용됩니다. 키를 반복해야 하는 상황에서 유용하며 키 이름을 검색하기 위해 로컬/세션 저장소에 숫자나 인덱스를 전달할 수 있습니다.

window.localStorage.key(index);
window.sessionStorage.key(index);

길이

이 속성은 지정된 Storage 개체에 저장된 데이터 항목의 수를 반환합니다.

window.localStorage.length;
window.sessionStorage.length;

브라우저 지원

HTML5 사양이며 IE8을 포함한 모든 주요 브라우저에서 지원됩니다. 브라우저가 로컬/세션 스토리지를 지원하는지 확인하려면

if (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}

제한 사항

비밀번호 등과 같은 민감한 사용자 정보를 로컬/세션 저장소에 저장하지 마십시오.

정보가 브라우저(클라이언트 측)에만 저장되므로 서버 기반 데이터베이스의 대안이 아닙니다.

B/w 세션 스토리지와 로컬 스토리지의 차이점

크기

세션 저장 크기는 5MB입니다.
로컬 스토리지 크기는 5MB/10Mb입니다.

접근성

세션 저장소는 동일한 탭에서만 액세스할 수 있습니다.
로컬 저장소는 브라우저 탭 내 어디에서나 액세스할 수 있습니다.(시크릿 모드가 아님).

저장 위치

세션과 로컬 저장소는 모두 브라우저에 저장됩니다.

만료일

탭을 닫으면 세션 저장소가 만료됩니다.
로컬 저장소는 수동으로 제거하지 않는 한 만료되지 않습니다.

세션 스토리지와 로컬 스토리지는 언제 사용합니까?

세션 저장 - 자주 변경되는 내용을 저장해야 할 때 사용해야 합니다.
로컬 저장소 - 데이터가 자주 변경되지 않는 장기 사용을 위해 사용해야 합니다.

이 게시물을 읽어 주셔서 감사합니다. 좋은 하루 되세요 🙂