I would like to create a simple Html list application on my local computer with save functionality locally, new list items added to the list and saved. I was searching online but I have found only complicated solutions that required an input object to save. I would like to ask if the following code can work with some modification.
index.html
<html lang="en">
<head>
<title>App</title>
</head>
<body>
Content...
<button onclick="save()">Save</button>
</body>
<script src="setup.js"></script>
</html>
setup.js
async function save(content){
let fileData = new File([""], "index.html");
let stream = fileData.createWritable();
let text = "text";
await stream.write(text);
await stream.close();
If you are running a very recent Chromium browser, you can use window.showSaveFilePicker. ([https://developer.mozilla.org/en-US/docs/Web/API/Window/showSaveFilePicker]) From the docs:
function getNewFileHandle() {
const opts = {
types: [{
description: 'Text file',
accept: {'text/plain': ['.txt']},
}],
};
return window.showSaveFilePicker(opts);
}
async function writeFile(fileHandle, contents) {
// Create a FileSystemWritableFileStream to write to.
const writable = await fileHandle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();
}