Javascript 및 React에서 localStorage 사용에 대해 알아보기

이 게시물에서는 JavaScript 및 React.js의 localStorage에 대해 설명합니다.

localStorage를 데이터베이스로 사용하여 first react project을 만들었습니다.

반응에서와 같이 페이지를 다시 로드하면 상태가 사라지므로 localStorage는 정적 반응 앱에서 데이터를 유지하는 가장 좋은 방법입니다.

node.js와 mongoose(mongodb)로 만들까 생각했는데 localStorage가 저같은 프론트엔드 개발자에게 좋은 솔루션이었습니다.

LocalStorage에는 네 가지 방법이 있습니다.

localStorage.setItem("데이터",데이터)

localStorage.getItem("데이터")

localStorage.removeItem("데이터")

localStorage.remove()

또한 이 게시물에서도 JSON.parse() 및 JSON.stringify()를 사용하고 논의할 것입니다.

1. localStorage.setItem("데이터",데이터)

setItem()을 사용하여 페이지를 다시 로드한 후에도 지속되는 항목을 localStorage로 설정할 수 있습니다.

아래는 그 예입니다.



작은 사용 사례는 버튼을 클릭할 때 데이터가 localStorage에 추가될 수 있다는 것입니다.

const click = () =>{
localStorage.setItem('data','data')
}
return(
<button onClick = {click}>Click</button>
)

개체, 문자열 또는 배열을 localStorage에 설정할 수 있습니다.

localStorage 항목이 있는 위치를 확인하려면 아래 단계를 따르십시오.

마우스 오른쪽 버튼을 클릭하고 검사를 클릭합니다.

응용 프로그램으로 이동하면 현재 있는 웹 사이트 이름에서 항목을 찾을 수 있습니다.

2. localStorage.getItem("데이터")

데이터를 설정한 후 localStorage.getItem("data")을 사용하여 데이터에 액세스할 수 있습니다.

여기에서 JSON.stringify()를 사용하여 문자열로 요소를 가져오거나 문자열에서 JSON.parse()를 사용하여 객체로 요소를 가져올 수 있습니다.

const data = JSON.stringify(localStorage.getItem('data'))

그런 다음 이 데이터를 사용하여 프런트엔드 또는 원하는 로직에 매핑할 수 있습니다.

3. localStorage.removeItem("데이터")

localStorage.removeItem('data')을 사용하여 localStorage 항목을 제거할 수 있습니다.

사용 사례는 setItem()과 유사합니다. 항목을 제거하려는 경우 해당 기능을 수행하기 위해 버튼을 클릭합니다.

const remove = () =>{
localStorage.removeItem('data')
}
return(
<button onClick = {remove}>Click</button>
)

4. localStorage.remove()

이 기능을 사용하면 한 번에 모든 항목을 제거할 수 있습니다.

const removeall = () =>{
localStorage.remove
}
return(
<button onClick = {removeall}>Click</button>
)

다음은 프로젝트에서 localStorage를 사용하는 방법에 대한 몇 가지 방법 및 사용 사례입니다.

프론트엔드 개발자로서 localStorage는 정적 앱에서 GET, POST와 같은 경로를 사용하기 위해 node.js 및 mongodb와 같은 백엔드 및 데이터베이스 개념을 알 필요가 없기 때문에 생명의 은인입니다.

내 previous project에서 이 정확한 개념을 사용했기 때문에 이 게시물이 개인 프로젝트에서 localStorage를 사용하는 데 도움이 되기를 바랍니다.

내 다음 게시물에서는 내 react project neo-budget에서 사용한 개념인 반응 후크를 사용하여 데이터를 유지할 수 있는 방법에 대해 논의할 것입니다

제 다음 포스팅 링크입니다

읽어 주셔서 감사합니다!!

내 포트폴리오 확인: Gautham's portfolio

내 블로그 확인: coding-magnified.tech

예산 책정에 대한 React 프로젝트 확인: neo-budget

저에게 감사하거나 저를 응원하고 싶다면 아래 링크로 저에게 커피를 사주실 수 있습니다.

내 다른 기사:

.

.