[WebDevCurriculum] local storage를 통한 data create/persist/load

1. 유저정보 저장

INSERT USER DATA : local storage에 유저 정보를 저장

• INSERT USER DATA의 input 란에 ID/PW를 입력하여 local storage에 각각 key, value 값으로 저장한다.

const insertID = document.getElementById('insertID');
const insertPW = document.getElementById('insertPW');
const insertBTN = document.getElementById('insertBTN');

    //USE DATA INSERT
    insertBTN.addEventListener('click', ()=>{
        let key = insertID.value;
        let value = insertPW.value;

        if(key && value){
            localStorage.setItem(key, value);
            alert('Successfully inserted!');
            location.reload();
        }
    })

2. 로그인

local storage에 저장되어있는 유저정보를 log in 입력란의 value와 비교 후 로그인

• local storage에 저장되어 있는 유저정보와 비교, 해당 key/value가 존재하는지 확인한다.
• 존재할 경우 작업공간(editor)으로 이동(location.href(*GET method)), 존재하지 않을 경우 alert 발생한다.

//LOG IN and page link(href)
    const loginID = document.getElementById('loginID');
    const loginPW = document.getElementById('loginPW');
    const loginBTN = document.getElementById('loginBTN');

    loginBTN.addEventListener('click', ()=> {
        
        if(loginID.value && loginPW.value){
        for(i=0; i<localStorage.length; i++){
            //console.log(localStorage.key(i));
            //ID and PW check
            if(loginID.value == localStorage.key(i)){
                let getPW = localStorage.getItem(localStorage.key(i));
                if(loginPW.value == getPW){
                    location.href = `index/${loginID.value}`
                    break;
                }else{
                    alert('INCORRECT PW');
                    break;
                }
            }
            if(i == localStorage.length - 1){
                //console.log(localStorage.key(i));
                alert('INCORRECT ID');
            }   
        }
        
    }
    })

3. data persist / load

localstorage에서 유지하고 있는 data를 load 및 persist(유지)

• window가 load되는 시점에서 addEvent, 이때 local storage 내 user data를 그대로 불러온다.
• 이때 url request에 username를 넘겨받는데, 이를 활용하여 user에 맞는 작업 data를 load하도록 한다.

//when window loaded after file read
    //persist data
    //and get file data with URL user data
    let userName = document.URL.split('/').pop();

    document.addEventListener('DOMContentLoaded', ()=>{
        let imageDATA = localStorage.getItem(`${userName}forimg`);
        let txtDATA = localStorage.getItem(`${userName}fortxt`);

        if(imageDATA || txtDATA){
            textArea.innerText = txtDATA;
            imageArea.src = imageDATA;
        }else{
            return;
        }
    })

• user에 해당하는 data가 local storage에 저장되도록 식별자와 함께 저장하도록 한다.
• 식별자는 url request로 부터 받은 user name를 활용하며, 이후 저장된 data는 영구적으로 유지된다(persist).

//read file data
    let fileData = await fileBuffer.getFile();
    console.log(fileData);

    if(fileData.type !== 'image/png'){
        //interface file data
        //await fileRead.readAsDataURL(fileData)
        let text = await fileData.text();
        textArea.innerText = text;

        afterTxtRead(text);
        

    }else if(fileData.type == 'image/png' || 'image/jpeg'){
        //fileReader가 fileData를 먼저 읽어야 한다.
        await fileRead.readAsDataURL(fileData);
        imageArea.src = fileRead.result;
        //fileRead - null, fileRead.result - image URL.
        //upload event를 부여할 경우에만 fileRead에서 data를 읽어올 수 있다.

        afterImageRead();
        
    }else{
        return;
    }

    function afterTxtRead(text){
        localStorage.setItem(`${userName}fortxt`, text)
    }

    function afterImageRead(){
        fileRead.addEventListener('load', () => {
        localStorage.setItem(`${userName}forimg` , fileRead.result);
        //console.log(fileRead.result);
        //console.log(imageArea.src);
        })
    }
}

4. 참조링크

localstorage key/value 이용하기 / login logic 기본 개념
https://www.youtube.com/watch?v=k8yJCeuP6I8