로컬 스토리지란 무엇입니까?어떻게 사용합니까?

필요한 경우:

페이지를 새로 고칠 때마다 0

으로 재설정하지 말고 계수기의 값을 저장합니다.

사용자 입력을 저장합니다.어딘가에 가치가 있다(당신이 필요하기 때문에)

브라우저 새로 고침 후 화면에 동적으로 생성된 데이터 보존

또는 유사

좋은 소식: 이게 localStorage의 목적!!!🤩

우리 깊이 연구합시다

내가 여기서 사용할 항목은 나의 업무 목록이다. 왜냐하면 이것이 바로 우리가 진정으로 localStorage를 사용해야 하는 상황이기 때문이다.
대기 프로그램에서 사용자가 목록에 추가할 내용을 입력하면 (입력 필드에서) 추가 또는 제출 단추를 누르면 화면에 추가됩니다.
이를 실현하기 위해 DOM을 조작합니다.😈, 다음 방법 중 하나를 사용합니다.

createElement() + appendChild()

또는 내 마음속에서 가장 사랑하는 사람: insertAdjacentHTML() .

DOM 작업에 익숙하지 않은 경우 둘 중 하나를 클릭하여 추가 정보를 볼 수 있습니다.

차갑다
그러나 문제가 하나 있다. 우리가 페이지를 새로 고칠 때마다 그것은 사라진다...우리가 추가한 항목은 화면에 지속성이 없습니다.
브라우저의 새로 고침 단추를 누르면 목록이 비어 있습니다.🔄 😭 우리는 이 문제를 해결해야 한다!

이게 바로 localStorage 역할을 발휘할 때다!
로컬 저장소는 브라우저 데이터베이스로서 데이터를 문자열(키/값 대 객체)로 저장할 수 있습니다.
"콘솔"대신 devtools에서 로컬 저장소를 볼 수 있습니다😉, 응용 프로그램으로 이동합니다(오른쪽에 있는 작은 화살표를 눌러야 접근할 수 있습니다).
이것은 다음과 같습니다.

이것은 우리가 데이터를 저장할 수 있는 곳이다!!

다음은 방법입니다.

스토리지를 생성하려면 다음과 같이 하십시오.localStorage.setItem("mySuperStorage","yay!")브라우저에서 새 탭을 열고 컨트롤러에 이 코드를 입력하면 다음과 같습니다.🤩:

이렇게 간단해.
저장된 데이터를 검색하려면 다음과 같이 하십시오.localStorage.getItem("mySuperStorage")

네, 이게 도대체 어떻게 된 일입니까?

엔진 덮개 아래:

localStorage는 Windows 객체

의 속성입니다.

데이터를 영구적으로 저장합니다. (삭제하지 않으면 아래에서 사용법을 볼 수 있습니다.)

사이트/도메인당 로컬 스토리지 1개

이것은 만약에 당신이 같은 사이트의 여러 개의 옵션 카드를 열었다면 이것은 중요하지 않다는 것을 의미한다. 당신이 이 사이트에 있었다면 그것은 같은 로컬 저장소였다. (이것은 정말 훌륭하다!)

의 최대 크기는 약 5mb이다. (키/값을 저장하기에 충분하다. 문자열일 뿐, 매우 가볍다!)

저희 코드에 localStorage는 다섯 가지 내장 방법을 추가했습니다.
우리가 계속 사용할 것은 다음과 같다.

localStorage.setItem(name, content): setItem()에서 스토리지를 생성할 수 있습니다.첫 번째 파라미터는 메모리에 주고 싶은 이름이고, 두 번째 파라미터는 이 메모리에 넣고 싶은 이름입니다.당신은 임의의 수량의 저장소를 만들 수 있습니다!

localStorage.getItem(name): getItem()은 스토리지에 저장된 데이터를 검색하는 데 사용됩니다.필요한 데이터의 이름을 지정해야 합니다(= 스토리지에 제공된 이름).

localStorage.clear(): clear() 메모리의 모든 내용을 삭제합니다.파라미터가 필요 없고 빠르고 간단합니다!

이제 TODO 응용 프로그램의 예시에서 실현합시다!

다음을 수행합니다.

create a storage with localStorage.setItem()

store each new task added by the user, in that storage!

display all the todos stored in the storage after the user refreshes the browser or closes the window and comes back!

현재, 우리의 로컬 저장소는 비어 있다.아직 초기화되지 않았습니다.

1- Let's create a storage with localStorage.setItem()

const todoStorage = [];  
localStorage.setItem("TODO-app storage", JSON.stringify(todoStorage)); 

행 코드:const todoStorage = []: 사용자가 입력한 모든 TODO를 저장하는 빈 그룹을 만듭니다

.

이제 두 번째 줄 코드를 두 부분으로 나누자.

localStorage.setItem("TODO-app storage",: 이 코드는 로컬 저장소에 "TODO app storage"라는 저장소를 만들었습니다.

JSON.stringify(todoStorage): 이 부분은 우리가 메모리에 넣은 데이터를 문자열로 변환합니다.
localStorage에서 모든 내용은 문자열이지만, 우리의 자바스크립트 코드에서, 백그라운드에서, 우리의 데이터는 사실상 JSON 형식(JavaScript 대상 표현법)이라는 것을 잊지 마세요.따라서 localStorage에 저장하려면 문자열로 변환해야 합니다.
이를 위해, 고맙게도 우리는 내장된 JSON.stringify() 방법이 있다!
"지금 당신은"그럼, local Storage에서 데이터를 검색하려면 반대의 일을 해야 합니다. 맞습니까? 문자열을 JSON 형식으로 바꾸시겠습니까?"라고 물어볼 수 있습니다.네, 절대!!!성공했어!
그것은 JSON.parse() 방법으로 완성되었다.
우리는 곧 쓸 것이다.

이 때 로컬 저장소를 확인하면🤩:

우리의 저장소는 우리가 원하는 대로'TODO app storage'라고 불리는데, 이것은 빈 진열[]이다.
2- Let's store each new task added by the user, in the storage!
1-const todo = { task: input.value };: 사용자가 입력한 내용입니다. 화면에 표시합니다.우리는 "todo"변수를 하나의 대상으로 성명합니다. 이 대상은 우리가 선택한 "task"속성을 가지고 있으며, 이 속성은 사용자가 입력한 값 (텍스트) 을 저장합니다.
2-todoStorage.push(todo);: 간단한 수조 방법push()으로 todo를 우리가 이전에 만든 빈 todo 수조에 추가합니다.
3-localStorage.setItem("TODO-app storage", JSON.stringify(todoStorage));: 이제 로컬 스토리지 컨텐츠를 저장할 스토리지의 컨텐츠로 설정합니다!
이 모든 것을 storeTodos () 를 호출할 수 있는 함수에 봉인합니다.

function storeTodos(){
const todo  = {task: input.value};
todoStorage.push(todo);
localStorage.setItem("TODO-app storage", JSON.stringify('todoStorage'));
}

예를 들어, 제출 단추를 눌렀을 때 이 함수를 호출합시다!
우리는 우리의 로컬 저장소가 실행 중인 것을 보아야 한다.

3- Let's display all the todos stored in the localStorage after the user refreshes the browser or even closes the window and comes back!
우리는 두 가지 절차를 통해 이 점을 실현할 것이다.
1 - 다음과 같은 기능을 제공합니다.

function displayTodos() {
 const todoStorage = JSON.parse(localStorage.getItem('TODO-app storage')) || [];
 todoStorage.forEach((todo) => {
    const userItem = `<li class="my-css">
                      <i class="far fa-square"></i>                     
                      <p class="my-css">${todo.task}</p>
                      <i class="far fa-trash-alt"></i>
                     </li>`;
    document.querySelector(".todo-list").insertAdjacentHTML("beforeend", userItem);
  }
}

이 코드의 빠른 분해:

JSON.parse(localStorage.getItem('TODO-app storage')): JSON입니다.parse () 방법, 우리는 전에 토론한 적이 있다!스토리지에 데이터를 저장할 때: JSON이 필요합니다.stringify().
스토리지에서 데이터를 가져올 때 JSON이 필요합니다.parse().

||[]: todoStorage가 JSON이라는 의미입니다.todoStorage의 parse() 또는 || 비어 있는 그룹입니다 (저장되지 않은 경우)

보시다시피 나머지 부분은 템플릿 문자(동적으로 만들어진 HTML을 매우 편리하게 표현) + insertAdjacentHTML() 방법을 사용하는 DOM 작업입니다!

<i class="far fa-square"></i>와<i class="far fa-trash-alt"></i> 모두 Fontawesome에서 왔어요!<i> 탭은 "아이콘"을 나타내며 라이브러리 아이콘을 표시할 수 있습니다!
만약 당신이 모른다면, here을 클릭하여 보십시오!

2 - 페이지가 새로 고침되었는지 확인하기 위해 이벤트 탐지기를 창에 추가합니다.DOMContentLoaded 이벤트라고 합니다.이것은 우리가 들을 수 있는 또 다른 사건이다. 예를 들어'클릭'이나'버튼 누르기'!
DisplayTodos 함수를 호출합니다.

window.addEventListener('DOMContentLoaded', displayTodos);

aa 이것은 하나의 총결이다!!우리의 TODO 응용 프로그램 사용자는 페이지를 새로 고치거나 닫고 브라우저를 다시 열 수 있습니다. 그들의 목록은 화면에 표시됩니다. 마치 진정한 응용 프로그램처럼!😎

이것이 바로 오늘 로컬 저장소에 관한 내용입니다!
나는 이 문장이 너에게 도움이 되거나 너 자신의 프로젝트에 영감/아이디어를 제공할 수 있기를 바란다.
만약에 제가 더 발전하기를 원하거나 질문/비고/건의가 있으면 아래의 평론에서 저에게 알려주십시오.
지금 읽어 주셔서 감사합니다.
다음 문장 다음 주!🤙🏾