[WebDevCurriculum] local/session storage을 활용한 data persist

Hyo Kyun Lee·2021년 11월 16일

목록 보기

22/44

1. fileReader를 통해 data 확보

fileReader를 통해 text / image file을 확보한다.

text → fileRead를 통해 read한 data그대로 활용 가능.

image → fileRead를 통해 read, URL변환 이후에 활용 가능.

기본적으로 fileBuffer, getFile()을 통해 data를 확보하도록 한다.

[fileBuffer] = await window.showOpenFilePicker();
let fileData = await fileBuffer.getFile();

1-1. text

fileBuffer에서 읽어온(getFile()) data를 그대로 읽어오기 가능

let text = await fileData.text();
            textArea.innerText = text;

getFile().text()를 통해 별도의 encode/decode 없이 그대로 txt 내용을 가져올 수 있고, 이를 innerText에 그대로 전달할 수 있다(화면에 내용 구현).

1-2. image

확보한 data를 URL로 바꾸어야 하는데, 이는 FileReader()라는 내장된 class를 활용한다.

let fileRead = new FileReader();

FileReader()을 통해 확보한 data를 URL로 바꿔주고, 이를 image src에 전달해주면 image를 화면에 구현할 수 있다
※ fileReader().result에 해당 data URL이 저장되어 있다.

//fileReader가 fileData를 먼저 읽어야 한다.
            await fileRead.readAsDataURL(fileData);
            imageArea.src = fileRead.result;

2. localstorage

localStorage를 활용한 data 저장 및 persist

2-1. data 저장

localStorage에 txt/URL data 저장한다.

setItem('key', 'value')

이후 value값을 그대로 가져오기 위해 key값을 활용한다.

localStorage는 browser가 닫혀도 그대로 data는 그대로 유지됨을 기억한다.

localStorage.setItem('recent-txt', text)
localStorage.setItem('recent-image' , fileRead.result);
            //console.log(fileRead.result);
            //console.log(imageArea.src);

2-2. data persist

localStorage에 저장되어 있는 data를 전달받고, 이를 그대로 활용한다.

document.addEventListener('DOMContentLoaded', ()=>{

먼저 browser가 닫히거나 새로고침하였을때, data를 가져오도록 하는 logic을 구성한다.
이를 위해 DOMContentLoaded Event에 대해 addListener 한다.

localStorage.getItem

이후 value값을 getItem을 통해 가져오고, 여기서의 data 값을 화면에서 구현하는데 그대로 활용하면 data persist 할 수 있다.

※ local storage에 data가 저장되어 있는 상태

//when window loaded after file read
    document.addEventListener('DOMContentLoaded', ()=>{
        let imageDATA = localStorage.getItem('recent-image');
        let txtDATA = localStorage.getItem('recent-txt');

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