웹 저장소 API - 다섯 살 때처럼 설명

오늘날 웹 브라우저에는 다양한 기능이 있으며 점점 더 많은 기능이 제공될 것입니다.

우리는 모두 브라우저의 쿠키에 대해 알고 있지만 오늘날의 브라우저에는 일시적 또는 영구적으로 값을 저장할 수 있는 Web Storage API라는 특수 기능이 있습니다.

웹 스토리지 API란 무엇입니까?

Web Storage API는 키-값 형식으로 데이터를 저장할 수 있는 브라우저 기능입니다. 이 브라우저 API의 목적은 사이트를 쿠키보다 더 직관적으로 만드는 것입니다.

Web Storage API의 큰 장점은 사용자가 브라우저를 닫아도 값이 저장된다는 것입니다.

그러나 데이터는 어디에 저장됩니까? Web Storage API를 사용하여 저장된 데이터는 사용자 로컬 폴더의 SQLite 파일에 저장됩니다.
localStorage 및 sessionStorage에 저장된 데이터는 JavaScript 코드를 사용하여 애플리케이션의 어디에서나 액세스할 수 있습니다.

localStorage와 sessionStorage의 차이점

Web Storage API에는 localStorage 및 sessionStorage 의 두 가지 데이터 저장 기능이 있습니다. 이 두 기능의 주요 차이점은 localStorage가 삭제될 때까지 브라우저에 저장된 상태로 유지된다는 것입니다(영구적일 수도 있음). 그러나 SessionStorage는 사용자가 브라우저를 닫을 때까지만 저장됩니다. 쿠키 대신 브라우저에 일부 값을 저장하려는 경우 SessionStorage가 유용합니다.

이 기사에서는 localStorage 에 중점을 둘 것이지만 거의 모든 기능과 특징은 sessionStorage 와 동일합니다.

로컬 스토리지

앞에서 언급한 것처럼 LocalStorage는 키-값 형식으로 데이터를 저장합니다.
localStorage는 애플리케이션 내 어디에서나 사용할 수 있는 5가지 주요 기능을 알고 있습니다.

이러한 기능은 다음과 같습니다.

setItem() , 이 함수를 사용하면 localStorage ,

에 값을 저장할 수 있습니다.

getItem() , localStorage ,

에서 특정 값을 검색할 수 있습니다.

removeItem() , 이 함수를 사용하면 localStroage ,

에서 값이 있는 키를 제거할 수 있습니다.

clear() , 함수는 모두 지웁니다 localStorage ,

key() .

setItem()

이 기능을 사용하면 localStorage에 값을 저장할 수 있습니다.

기능을 사용하는 것은 매우 간단합니다. 이 함수는 두 개의 매개변수를 허용합니다. 첫 번째는 키이고 두 번째는 이 키의 값입니다.

window.localStorage ("key", "value");

localStorage에서는 string, int, bool, object 등과 같은 다양한 데이터 유형을 저장할 수 있습니다.
JSON.stringify 함수를 사용하면 JSON 개체를 localStorage에 저장할 수 있습니다.

const user = {
    id: 12345,
    name: "John Doe",
    email: "[email protected]",
}

window.localStorage.setItem('user', JSON.stringify(user));

getItem()

이 함수를 사용하면 localStorage에 저장된 값을 얻을 수 있습니다. 이 함수는 메모리에서 가져오려는 값인 하나의 매개 변수를 허용합니다.

window.localStorage.getItem ('user');

이 함수는 값이 포함된 문자열을 반환합니다.

"{" id ": 12345," name ":" John Doe "," email ":" [email protected] "} '

이러한 문자열은 우리 애플리케이션에서 사용할 수 없으므로 JSON 개체로 반환해야 합니다. 이것은 JSON.parse() 함수로 수행됩니다.

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

항목 제거()
removeItem() 함수는 localStorage에서 하나의 요소만 제거하는 데 사용됩니다.

이 함수는 localStorage 에서 제거하려는 키의 이름인 하나의 매개변수만 허용합니다. 키가 있으면 항목을 제거합니다.

window.localStorage.removeItem ('user');

분명한()
clear() 함수를 사용하여 localStorage 의 모든 요소를 ​​제거합니다.

이 함수는 매개변수를 허용하지 않습니다.

window.localStorage.clear();

localStorage의 단점

모든 것에는 단점이 있으며 단점도 있습니다localStorage. 가장 큰 단점 중 하나는 저장할 수 있는 데이터의 양을 5MB로 제한하는 것입니다.

또 다른 단점은 localStorage가 동기적이라는 것입니다. 즉, 항목에 점진적으로 액세스할 수 있습니다.


다른 방식으로 브라우저에 데이터를 저장하는 방법을 소개했길 바랍니다.

연결하자:

🔹

🔹

🔹 GitHub

🔹 PolyWork