웹 프런트엔드에서만 파일 읽기 및 쓰기

안녕하십니까? 저는 웹 애플리케이션을 만들고 싶지만 서버를 만들고 싶지 않은 웹 프로그래머의 pirosuke입니다.
이번에는 애플리케이션 서버나 데이터베이스를 사용하지 않고 웹 프런트엔드에서만 파일 내용을 읽거나 출력하는 기능을 만드는 방법을 소개한다.
파일의 업로드 기능과 다운로드 기능을 사용합니다.
웹 사이트에서 파일을 업로드하거나 다운로드하는 기능은 대부분 인터넷에 있는 서버에 파일을 보내거나 서버에서 파일을 받는 형식이지만, 실제로는 선택한 파일을 프론트 데스크톱의 자바스크립트로 직접 읽어서 사용한다.Javascript를 사용하여 파일을 출력할 수 있습니다.
이 구조를 사용하면 메모장처럼 파일을 열어 내용을 편집할 수 있으며 편집이 끝난 후 HTML과 자바스크립트의 전단 처리만 하면 저장 기능을 할 수 있습니다.

애플리케이션 설치 예

며칠 전에 제가 딸에게 100인1곡의 승리를 주기 위해 만든'백인1곡 특훈 도구'가 이 앞부분의 파일 입력과 출력 기능을 실현했습니다. 예를 들어 소개합니다.Vue+Vuetify 기반으로 생성 중입니다.
백인 일수 특훈 도구
소스 여기 있어요.
https://github.com/pirosuke/hyakushu-static
이 도구는'특훈 시작'시 화가의 상구를 토대로 10개의 문제를 선정한다
매 곡과 노래의 정확도를 기록하다.
이 정확한 기록은 Vue의state로만 저장되며 브라우저를 닫거나 다른 사이트로 이동하면 사라집니다.
왼쪽 메뉴에서'히스토리 저장'을 클릭하면 스테이트에 저장된 정확도 데이터를 JSON 형태로 다운로드할 수 있고, 다음에 이 특훈 도구를 사용할 때'히스토리 읽기'메뉴에서 다운로드한 JSON을 업로드하면 이전 기록에 다음 특훈 결과가 추가된다.
저장을 잊어버리면 데이터가 사라지고 저장되지 않은 기록이 있는 상태에서 다른 페이지로 이동하려면 확인 대화 상자가 표시됩니다.
이 도구의 기능에서'역사 저장'과'역사 읽기'기능을 통해 상기 파일 업로드와 다운로드 기능을 실현하였다.

입력 출력 JSON 파일

우선 아래 코드로 업로드용 버튼과 다운로드용 버튼을 만듭니다.
(이번 도구는 Vue+Vuetify 기반의 것이기 때문에 사용한 라벨은 매우 독특하지만 테마의 기능과 무관합니다.)

<v-list>
    <v-list-item link @click="saveLog">
        <v-list-item-action>
        <v-icon>mdi-download</v-icon>
        </v-list-item-action>
        <v-list-item-content>
        <v-list-item-title>履歴を保存</v-list-item-title>
        </v-list-item-content>
    </v-list-item>
    <v-list-item>
        <v-list-item-action>
        <v-icon>mdi-upload</v-icon>
        </v-list-item-action>
        <v-list-item-content>
        <v-list-item-title>
            <label>
            履歴を読込
            <input ref="file" class="file-button" type="file" @change="loadLog" />
            </label>
        </v-list-item-title>
        </v-list-item-content>
    </v-list-item>
</v-list>

[작업 내역 저장] 메뉴를 클릭하여 함수 "saveLog"을 실행하고 다운로드 처리를 수행합니다.
'기록 읽기' 메뉴를 누르면 파일 선택 창을 열고 파일을 선택한 후 함수'loadLog '를 실행하여 파일 내용을 가져옵니다.

파일 다운로드 기능 구현

그리고 각 함수를 집행한다.
함수'saveLog'이 실행하는 파일 다운로드 처리는'file-saver'라는 npm 모듈을 사용합니다.
https://www.npmjs.com/package/file-saver
파일에 저장할 데이터를 Blob 객체로 지정하고 다운로드 프로세스를 수행하여 모듈의 함수 "saveAs"에 전달할 수 있습니다.
다음과 같이 함수'saveLog'을 호출할 때'answer log.json'이라는 파일 이름으로 블로그 내용을 포함하는 파일을 다운로드합니다.

import { saveAs } from "file-saver"

...

saveLog () {
    const blob = new Blob([JSON.stringify(<保存したいオブエクト>)], {
        type: "application/json"
    })

    saveAs(blob, "answer_log.json")
},

파일 업로드 기능 설치

함수'loadLog'에서 실행되는 파일 업로드 프로세스에서는 먼저 파일 구성 요소에서 선택한 파일을 가져와 내용을 확인한 후 FileReader로 읽습니다.
FileReader는 최근 브라우저에서 기본적으로 사용할 수 있는 파일 읽기 API입니다.
https://developer.mozilla.org/ja/docs/Web/API/FileReader
다음 설치를 통해 업로드된 파일의 내용을 텍스트로 읽고 JSON으로 변환하여 사용할 수 있습니다.

async loadLog (event) {
    const files = event.target.files || event.dataTransfer.files
    const file = files[0]

    if (!this.checkFile(file)) {
        alert("ファイルを読み込めませんでした")
        return
    }

    const logData = await this.getFileData(file)

    const logJson = JSON.parse(logData)
},

getFileData(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsText(file)
        reader.onload = () => resolve(reader.result)
        reader.onerror = error => reject(error)
    })
},

checkFile(file) {
    if (!file) {
        return false
    }

    if (file.type !== 'application/json') {
        return false
    }

    const SIZE_LIMIT = 5000000 // 5MB
    if (file.size > SIZE_LIMIT) {
        return false
    }
    return true
}

FileReader의 사용 방법은 다음과 같은 Qita 기사를 참고하였다.
https://qiita.com/itoshiki/items/511d58b827f4ce2129fc
이번에 JSON 파일의 읽기와 쓰기를 진행했는데 호출된 함수와 전송된 파라미터를 변경하면 텍스트 파일이든 이미지 파일이든 똑같은 읽기와 쓰기를 할 수 있습니다.

저장된 것을 잊어버리지 않도록 방지하는 기능 추가

지금까지는 파일을 읽고 쓸 수 있었지만 지금의 기능이라면 파일 다운로드를 잊고 브라우저를 닫거나 다른 사이트로 이동하면 데이터가 사라진다.
저장을 잊어버리지 않도록.

데이터 변경 후 저장 여부를 확인하는 기능

저장하지 않고 이동하면 확인 대화상자를 보내는 기능

추가합니다.

저장된 편집 확인용 분류 추가

이번 도구는 다음과 같은 '저장 후 구분 편집 여부 (ised After Save)' 를 추가했습니다.

state: {
    isEditedAfterSave: false,
},

예를 들어 응답이 증가하면 이 구분은'진짜'가 된다.

다른 페이지로 이동할 때 검사 추가

다른 화면으로 이동할 때 무엇을 검사하려면'beforeunload'이벤트에서 트리거를 설정하십시오.

created () {
    window.addEventListener("beforeunload", this.confirmSave)
},

destroyed () {
    window.removeEventListener("beforeunload", this.confirmSave)
},

이벤트 처리 함수에 저장 후 편집 후 확인 대화상자 보이기 처리를 추가합니다.
확인 정보는 설정되어 있지만 대화 상자의 정보는 크롬에 표시되지만 고정된 정보는 표시됩니다.

confirmSave (event) {
    if (this.$store.state.isEditedAfterSave) {
        event.returnValue = "履歴を保存せずにページを離れようとしています。このまま移動しますか？"
        return "履歴を保存せずにページを離れようとしています。このまま移動しますか？"
    }
},

beforeunload 활동에 관하여 아래의 Qita 문장을 참고하였다.
https://qiita.com/mimoe/items/ccd57821c3ae6b4f8495

끝맺다

데스크톱 응용 프로그램처럼 파일을 지정하지 않고 한 번만 클릭하면 저장할 수 있는 덮어쓰기 저장 기능은 어렵지만, 먼저 앞에서 파일을 저장하고 읽을 수 있다.
이렇게 하면 간단한 데이터 저장 도구일 뿐이라면 번거로운 서버 운용 없이도 할 수 있다.