小文件的存储开销大

日志型文件系统存在性能问题

没有掉电保护和磨损均衡

Implementation using readAsText()

```html <input type="file" id="file" /> <button id="get-time">Get Time</button>

<script> document.getElementById('get-time').onclick = function () { let file = document.getElementById('file').files[0]; let fr = new FileReader(); fr.onload = function (e) { let startTime = getTime(e.target.result, false); let endTime = getTime(e.target.result, true); alert(`Log time range: ${startTime} ~ ${endTime}`); } fr.readAsText(file); } function getTime(text, reverse) { let timeReg = /\d{4}\-\d{2}\-\d{2} \d{2}:\d{2}:\d{2}/; for (let i = reverse ? text.length - 1 : 0; reverse ? i > -1 : i < text.length; reverse ? i-- : i++) { if (text[i].charCodeAt() === 10) { let snippet = text.substr(i + 1, 19); if (timeReg.exec(snippet)) { return snippet; } } } } </script>

```

Implementation using readAsArrayBuffer()

```html <input type="file" id="file" /> <button id="get-time">Get Time</button>

<script> document.getElementById('get-time').onclick = function () { let file = document.getElementById('file').files[0]; let fr = new FileReader(); let CHUNK_SIZE = 10 * 1024; let startTime, endTime; let reverse = false; fr.onload = function () { let buffer = new Uint8Array(fr.result); let timeReg = /\d{4}\-\d{2}\-\d{2} \d{2}:\d{2}:\d{2}/; for (let i = reverse ? buffer.length - 1 : 0; reverse ? i > -1 : i < buffer.length; reverse ? i-- : i++) { if (buffer[i] === 10) { let snippet = new TextDecoder('utf-8').decode(buffer.slice(i + 1, i + 20)); if (timeReg.exec(snippet)) { if (!reverse) { startTime = snippet; reverse = true; seek(); } else { endTime = snippet; alert(`Log time range: ${startTime} ~ ${endTime}`); } break; } } } } seek(); function seek() { let start = reverse ? file.size - CHUNK_SIZE : 0; let end = reverse ? file.size : CHUNK_SIZE; let slice = file.slice(start, end); fr.readAsArrayBuffer(slice); } } </script>

```

```html

<input type="file" id="file-selector" multiple>

<script> const fileSelector = document.getElementById('file-selector'); fileSelector.addEventListener('change', (event) => { const fileList = event.target.files; console.log(fileList); }); </script>

```

interestingly with it's then new mobile devices that's what apple thought! they came to this from ui / "sales" perspective though