File System Access API로 browser에서 local file 수정하기

원래는 보안상의 문제로, browser에서 local file을 직접적으로 수정할 수 없었다.

애초에 Wep App 이라면 로컬에 파일을 남길 이유가 없다. (캐시용 임시파일, 쿠키값 제외)

서버의 db( 파일, RDBMS 등)에 기록하면 되니까.

 

근데, 단순 로컬 파일 하나에 "현재 상태 기록"만 할 수 있으면 되는데,

localhost에서 도는 서버 하나 띄우고(이거 띄우려고 언어별 프레임워크 설치하고... ), url 라우팅하고,

request/response 로직 만들고, 여간 귀찮은게 아니다. 그래서 검색도중 저걸 발견했다.

 

1. 파일 내용 읽어서 <textarea> 에 넣기

let _fileHandle;
async function openFile() {
	//1) 파일 선택기에서 파일 선택
	[_fileHandle] = await window.showOpenFilePicker();

	//2) file 객체 얻기
	const file = await _fileHandle.getFile();

	//3) USVString( Unicode scalar values ) 으로 파일 내용 가져오기
	const contents = await file.text();

	//4) text box에 내용 넣기
	document.getElementById("textbox").textContent = contents;
}

[그림1] 파일을 읽어서 textarea에 넣은 모습

 

2. <textarea>에서 수정하여 다시 파일에 저장하기

async function saveFile() {
	//1) write를 위해 FileSystemWritableFileStream 생성
	const writable = await _fileHandle.createWritable();

	//2) stream에 textare 내용을 쓴다
	await writable.write(document.getElementById("textbox").value);

	//3) 파일이 닫히면서 실제 디스크에 반영됨
	await writable.close();
}

[그림2] 수정하여 파일에 다시 저장한 모습

---

간단한 api로 로컬 파일 수정이 가능해졌다. ( safari에서는 안되는 모양이다.. 크롬만 쓰니 상관없다. )

이제 단순한 web app을 서버없이도 만들 수 있다! ( web이란 말도 무색하다. '브라우저' app이 맞지 않나? )