노트 작성을 통한 스토리지 API 학습

간단한 HTML, CSS, 자바스크립트를 사용하여 작은 필기 프로그램을 구축함으로써 window.localStorage을 알아보겠습니다.작은 UI를 작성하여 사용자의 설명을 브라우저에 자동으로 저장합니다.나의 동료는 그의 모든 부분을 이런 물건에 저장했다.나는 그가 50-60행 코드에서 얻은 이정수를 믿을 수 없다.
대부분의 클라이언트 메모리 상호작용은 과거에 쿠키 조작과 관련이 있었지만 다행히도 우리는 현재 현대적인 API를 가지고 있다.쿠키가 있으면 사용자는 모든 요청에 저장된 모든 내용을 발송할 수 있으며 이는 쌍방의 성능이 떨어진다는 것을 의미한다.
입력: localStorage.window 객체에서 사용할 수 있는 키/값 API입니다.sessionStorage과 달리 localStorage은 페이지 세션 기간 동안 유효하며 algoliasearch-client-js은 기한이 지나지 않았다.
모든 키와 값이 문자열로 변환됩니다.키를 추가하고, 업데이트하고, 삭제한 다음, 빈 키에서 읽어 봅시다.이것은 컨트롤러 입력이기 때문에 명령을 따라가는 값을 되돌려줍니다.

// Add key - or overwrite existing key
window.localStorage.setItem('foo', 'bar')
> undefined

// Read a value from a key
window.localStorage.getItem('foo')
> "bar"

// Delete key - deleting empty yields same return value
window.localStorage.removeItem('foo')
> undefined

// Read from a deleted or unknown key
window.localStorage.getItem('foo')
> null

localStorage와 상호작용하는 다른 방법은 모든 키를 지우고 기존 키를 옮겨다니는 것입니다.

// Get the read-only length
window.localStorage.length
> 6

// Get the nth key
window.localStorage.key(0)
> "algoliasearch-client-js"

// Delete all keys
window.localStorage.clear()
> undefined

// Iterate through all keys
for (let i = 0; i < window.localStorage.length; i++) {
    console.log(window.localStorage.key(i));
}

개발자 콘솔에서 그 중 일부를 시도할 수 있습니다.내가 글을 쓸 때, DEV는 나에게 다음 로컬 저장 키를 저장해 주었다.하지만 그 중 어떤 내용도 삭제하지 않도록 하세요!config_body_class , current_user , https://dev.to/new , pusherTransportTLS , localStorage .

응용 프로그램

이것은 우리가 해야 할 일이다.소형이지만 실용적인 필기 응용 프로그램간격을 제외하고는 스타일을 거의 사용하지 않는다(send a pull request).중요한 것은 응용 프로그램이 클라이언트의 브라우저 저장소와 어떻게 통신하는가이다.

우리가 필요로 하는 newNote() 방법을 생각해 주셨으면 합니다.기존 HTML 템플릿을 사용하여 사용할 함수를 명명합니다.

<h5>Tiny Note Taker</h5>
<div>
    <button onclick="newNote()">New</button>
        <select id="notes" onchange="changeNote()"></select>
        <button onclick="deleteNote()">Delete</button>
</div>
<textarea id="editor" rows="10" onkeyup="saveNote()"
    onkeydown="checkEmpty()" autofocus></textarea>
<script src="./index.js"></script>

이 함수들이 우리가 방금 본 저장 방법과 어떤 관계가 있는지, 그리고 DOM을 어떻게 조작할지 생각해 보는 데 시간이 좀 걸린다.changeNote()은 노트 이름을 입력하고 만들라는 메시지를 표시합니다.deleteNote() 선택한 요소가 변경되면 새 주석으로 전환합니다.saveNote()에서 현재 선택한 주석을 삭제합니다.checkEmpty()은 현재 선택한 주석을 사용자 형식으로 저장합니다.""--그건 뚜렷하지 않아요.
사용자가 새 노트를 만들기 전에 페이지에 도착하여 입력을 시작하면 이름은 untitled이고 빈 문자열입니다.141560은 104790 이전의 주석이 아닌 현재 형식으로 저장됩니다.우리는 여기서 논리를 간소화하고 이를 두 사건으로 나눈다.onkeydown에서 빈 노트를 확인하고 필요한 경우 수정합니다.즉, onkeyup은 별도의 검사 없이 노트만 저장하면 됩니다.따라서 checkEmpty().
알림: 관건적인 이벤트는 almost always입니다. 이 순서대로 onkeydown -> onkeypress -> onkeyup을 호출하면 모두 자신의 위치가 있습니다!
우리 기본적인 상황부터 시작합시다.사용자가 입력할 때 주석을 저장합니다.스크립트include를 HTML 밑에 두었기 때문에, 문서가 이벤트를 불러올 때까지 기다리지 않고 필요한 두 요소에 대한 인용을 얻을 수 있습니다.

const notes = document.querySelector('#notes');
const editor = document.querySelector('#editor');

위대했어이 인용들은 스크립트의 전체 생명 주기를 지속할 것입니다. 왜냐하면 우리는 이 요소들을 영원히 삭제하지 않기 때문입니다.다음에 만약 사용자가 먼저 New 단추를 누르지 않고 내용을 입력하지 않았다면, 빈 명칭 주석을 untitled라고 명명해야 합니다.

/**
 * Check for empty note title.
 */
function checkEmpty() {
    if (notes.length === 0) {
        const untitled = document.createElement('option');
        untitled.innerText = 'untitled';
        notes.appendChild(untitled);
    }
}

여기에서 자바스크립트를 사용하여 옵션 요소를 만들고 select 드롭다운 목록에 제공합니다.몇 밀리초 후에 사용자가 현재 키에서 손가락을 들어올릴 때 이런 상황이 발생할 수 있도록 저장할 필요가 없습니다.
몇 밀리초 후.

/**
 * Save editor text to storage under the current note.
 */
function saveNote() {
    window.localStorage.setItem(notes.value, editor.value);
}

localStorage.setItem이 있습니다!우리는 그것의 작용을 안다.이것은 주석 텍스트를 값으로 저장하고 주석 제목("untitled")을 키로 저장합니다.지금 우리는 해결해야 할 문제가 하나 있다.사용자가 떠나서 돌아오면, 드롭다운 목록을 선택하면 비어 있습니다.더 심각한 것은 그들이 "untitled" 노트를 덮을 것이다.
스크립트가 실행될 때, 이 요소들의 인용을 얻은 후, 사용자가 저장한 모든 주석으로 select 밑에 있는 목록을 채웁니다.

const notes = document.querySelector('#notes');
const editor = document.querySelector('#editor');

// Load user's saved notes
for (let i = 0; i < window.localStorage.length; i++) {
    const newNote = document.createElement('option');
    newNote.innerText = window.localStorage.key(i);
    notes.appendChild(newNote);
}
changeNote();

여기서 우리는 length의 읽기 전용 localStorage 속성과 그 방법 key()을 사용한다.저장된 모든 노트는 선택 드롭다운 목록에 로드됩니다.우리는 HTML을 우리의 상태로 실행시켰다.그러면 JavaScript의 주석을 추적할 필요가 없습니다.간단한 함수를 사용하여 DOM을 스토리지 API에 연결했습니다.
마지막 부분의 밑에 있는 changeNote()을 보았습니다. 현재 선택한 주석을 편집기의textarea 요소 a.k.a에 불러옵니다.새 주석을 만든 후에도 이 함수를 호출하여 편집기를 지웁니다.새 주석은 빈 문자열로 초기화됩니다.

/**
 * Change editor text to the currently selected note.
 */
function changeNote() {
    editor.value = window.localStorage.getItem(notes.value);
}

스토리지 API는 많은 부담을 덜어줍니다.
주석을 명명하고 만드는 방법이 필요합니다.newNote() 이렇게 하는 거야.Element#insertBefore을 사용하여 새 노트를 선택 상자의 맨 위에 놓습니다.부모 요소에서 이 방법을 호출합니다.var insertedNode = parentNode.insertBefore(newNode, referenceNode); . 이 방법의 장점은 빈 값을 두 번째 매개 변수로 받아들이는 데 있다.이것은 우리가 빈 부원소에 insertBefore을 호출할 수 있다는 것을 의미한다.

/**
 * Ask the user to name their new note then create it.
 * Add this note to the select div then focus to it.
 */
function newNote() {
    const note = prompt('Name of note?');
    window.localStorage.setItem(note, '');

    const noteElem = document.createElement('option');
    noteElem.innerText = note;
    notes.insertBefore(noteElem, notes.firstChild);

    // Focus this note
    notes.value = note;
    changeNote();
}

우리의 노트 프로그램이 곧 완성될 것이다.필요한 마지막 기능은 주석을 삭제하는 것입니다.사용자가 주석을 완성한 후에, 그들은 그것을 선택한 다음, 삭제 단추를 눌러도 된다.이 함수의 가장 까다로운 부분은 select 밑에 있는 목록에서 삭제할 정확한 주석을 찾는 것입니다.상태의 단점 중 하나로 DOM을 사용합니다.우리는 모든 옵션을 순환해서 검사해야 한다. value을 검사해야 한다.

/**
 * Delete currently selected note
 */
function deleteNote() {
    const note = notes.value;
    window.localStorage.removeItem(note);
    editor.value = '';
    for (let i = 0; i < notes.length; i++) {
        const option = notes[i];
        if (option.value === note) {
            notes.removeChild(option);
        }
    }
}

우리는 CDN을 통해 무한히 확장할 수 있는 기능이 완비된 필기 프로그램을 가지고 있다.강력한 Storage API을 사용하고 응용 프로그램 상태로 DOM을 사용하는 방법을 배웠습니다.가자!🙌
최종 애플리케이션 코드 here과 라이브 버전 here을 확인합니다.
150여 명을 가입하여 저의 newsletter 프로그래밍과 개인 성장에 관한 등록!
나는 트위터에서 과학 기술에 대해 이야기했다.