로컬 스토리지의 기초

소프트웨어 엔지니어링 경력 초기에 내가 가졌던 첫 번째 질문 중 하나는 나중에 사용할 수 있도록 클라이언트의 컴퓨터에 데이터를 저장하는 방법이었습니다. 이 데이터는 현재 작업 중인 브라우저에서만 사용할 수 있으며 페이지를 다시 로드하면 쉽게 액세스할 수 있습니다. 내 학습의 이 단계에서 나는 아직 백엔드 프로그래밍에 대한 액세스 권한이 없었고 이를 수행하는 방법을 몰랐습니다. 이것은 로컬 저장소가 들어오는 곳입니다.

로컬 스토리지란 무엇입니까?

로컬 저장소는 사용자의 브라우저에서 사용할 수 있는 키/값 데이터베이스입니다. 이 데이터베이스는 무한정 지속되거나 수동으로 삭제될 때까지 유지될 수 있습니다. 로컬 저장소는 현재 문자열만 허용하므로 배열이나 개체를 저장하는 경우 먼저 문자열로 변환하기 위해 JSON.stringify()를 사용해야 합니다.

로컬 저장소를 사용하지 않는 경우는 언제입니까?

로컬 저장소에는 많은 용도가 있지만 민감한 정보를 저장하지 않는 것이 중요합니다. 여기에는 암호, API 키, 인증 토큰 등이 포함됩니다. 악의적인 제3자가 이 정보에 쉽게 액세스하여 자신의 이익을 위해 사용할 수 있습니다.

언제 로컬 저장소를 사용합니까?

앞에서 언급했듯이 로컬 저장소는 웹 사이트에서 지속성을 제공합니다. 사이트를 새로 고치더라도 사이트가 계속 가질 수 있어야 하는 정보를 저장하는 데 사용됩니다. 이것은 일반적으로 UI 테마와 같은 사용자 기본 설정을 저장하기 위해 수행됩니다. 로컬 저장소를 사용하여 게임 통계를 저장할 수도 있습니다. 최근의 예는 인기 있는 게임Wordle입니다. 매일 게임을 플레이하면 추측 수, 현재 연승 및 승률과 같은 항목이 저장됩니다. 다른 브라우저나 컴퓨터에서 게임을 열려고 하면 모든 통계가 사라진다는 것을 알게 될 것입니다.

또 다른 예

Dev.to의 예를 살펴보겠습니다. 프로필이 있는 웹 사이트 방문자는 사이트 테마 및 글꼴과 같은 모양 설정을 변경할 수 있습니다. 브라우저 개발자 도구를 열면 현재 개발자 도구에 저장된 내용을 볼 수 있습니다.



위에서 우리는 브라우저가 현재 로컬 스토리지 내부에 저장된 여러 키를 가지고 있음을 볼 수 있습니다. config_body_class 키 안에는 dark-theme과 sans-serif 값이 있습니다. 설정에서 테마와 글꼴을 변경하는 경우 이 변경 사항은 config_body_class 키에 반영되고 페이지를 다시 로드해도 지속됩니다.

로컬 저장 방법

localStorage.key(인덱스)

이 메서드는 특정 인덱스에서 값을 검색하는 데 사용할 수 있습니다. 인덱스 번호를 전달하면 해당 특정 인덱스의 모든 값이 반환됩니다.

let key = localStorage.key(0)
//This will get the value of the first item in localStorage

localStorage.setItem(키, 값)

이렇게 하면 키/값 쌍을 브라우저에 저장할 수 있습니다.

localStorage.setItem("key", "value")
//This will add a key called "key" 
//with a value of "value" to localStorage

문자열 이외의 것을 추가하려면 다음 구문을 사용할 수 있습니다.

const movies = [
  "Star Wars",
  "Lord of the Rings",
  "Harry Potter"]

localStorage.setItem("key", JSON.stringify((movies)))

localStorage.getItem(키)

그러면 지정된 키에 대한 로컬 저장소의 데이터를 읽습니다. 키가 존재하지 않으면 null을 반환합니다.

localStorage.getItem("key")
//To retrieve a specific key from
//local storage, you can pass in the key 
//as a variable into getItem

문자열 이외의 값을 가진 키를 검색하려면 먼저 다음 구문을 사용하여 키를 구문 분석해야 합니다.

JSON.parse(localStorage.getItem("key"))

localStorage.removeItem(키)

이 메서드는 localStorage에서 지정된 키를 제거합니다. 지정된 키가 존재하지 않으면 메서드는 undefined를 반환합니다.

localStorage.clear()

이 메서드는 매개변수를 사용하지 않으며 단순히 localStorage에서 모든 키를 제거합니다. 이러한 키에 다시 액세스하려면 다시 추가해야 합니다.

결론

로컬 저장소는 브라우저 내에서 액세스할 수 있는 키/값 쌍의 데이터베이스입니다. LocalStorage 내부에 민감한 데이터를 저장하지 않는 것이 매우 중요합니다. LocalStorage 내부에 개체를 저장할 때 JSON.stringify()를 사용하여 개체를 문자열로 변환해야 한다는 점을 기억해야 합니다. JSON.parse()를 사용하여 이 개체를 검색할 수 있습니다. LocalStorage를 사용하면 가능성이 무궁무진합니다.

향후 프로젝트에서 LocalStorage를 사용할 수 있는 몇 가지 방법은 무엇입니까?