shway
/
Notepad
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Monday, November 27, 2023, 13:00:01 + 5

main
Shwetha Jayaraj 2023-11-27 13:00:06 -05:00
parent e37b13b8b9
commit c0ea8c0cd1
5 changed files with 240 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
enter/.obsidian/plugins/recent-files-obsidian/data.json
View File

@ -1,17 +1,17 @@
{
"recentFiles": [
{
"basename": "OPFS File Storage",
"path": "OPFS File Storage.md"
"basename": "File System API",
"path": "Coding Tips (Classical)/Terminal Tips/3. GUIs/Internet/Servers/Networking/Protocols/APIs/File System API.md"
},
{
"basename": "OPFS",
"path": "Coding Tips (Classical)/Terminal Tips/3. GUIs/Internet/Servers/Networking/Protocols/APIs/OPFS.md"
},
{
"basename": "Quantum Computing Developer",
"path": "Coding Tips (Classical)/Project Vault/Current Occupations/Potential and Future/60 careers/Quantum Computing Developer.md"
},
{
"basename": "Origin_private_file_system",
"path": "en-US/docs/Web/API/File_System_API/Origin_private_file_system.md"
},
{
"basename": "Technical Writer position",
"path": "Coding Tips (Classical)/Project Vault/Current Occupations/Potential and Future/60 careers/Technical Writer position.md"
@ -195,10 +195,6 @@
{
"basename": "Launchd",
"path": "Coding Tips (Classical)/Terminal Tips/System Client/OSX Apple Macbook/IDEs & APIs/BBEdit/Launchd.md"
},
{
"basename": "Notable Obsidians",
"path": "Coding Tips (Classical)/Project Vault/About Obsidian/Obsidian Guides/Notable Obsidians.md"
}
],
"omittedPaths": [],

30
enter/.obsidian/workspace.json
View File

@ -61,7 +61,19 @@
"state": {
"type": "markdown",
"state": {
"file": "OPFS File Storage.md",
"file": "Coding Tips (Classical)/Terminal Tips/3. GUIs/Internet/Servers/Networking/Protocols/APIs/File System API.md",
"mode": "source",
"source": false
}
}
},
{
"id": "067a87050f2984c0",
"type": "leaf",
"state": {
"type": "markdown",
"state": {
"file": "Coding Tips (Classical)/Terminal Tips/3. GUIs/Internet/Servers/Networking/Protocols/APIs/File System API.md",
"mode": "source",
"source": false
}
@ -188,7 +200,7 @@
}
}
],
"currentTab": 4
"currentTab": 5
}
],
"direction": "vertical"
@ -263,7 +275,7 @@
"state": {
"type": "backlink",
"state": {
"file": "OPFS File Storage.md",
"file": "Coding Tips (Classical)/Terminal Tips/3. GUIs/Internet/Servers/Networking/Protocols/APIs/File System API.md",
"collapseAll": false,
"extraContext": false,
"sortOrder": "alphabetical",
@ -280,7 +292,7 @@
"state": {
"type": "outgoing-link",
"state": {
"file": "OPFS File Storage.md",
"file": "Coding Tips (Classical)/Terminal Tips/3. GUIs/Internet/Servers/Networking/Protocols/APIs/File System API.md",
"linksCollapsed": false,
"unlinkedCollapsed": true
}
@ -303,7 +315,7 @@
"state": {
"type": "outline",
"state": {
"file": "OPFS File Storage.md"
"file": "Coding Tips (Classical)/Terminal Tips/3. GUIs/Internet/Servers/Networking/Protocols/APIs/File System API.md"
}
}
},
@ -339,11 +351,12 @@
"obsidian-excalidraw-plugin:Create new drawing": false
}
},
"active": "56cd7c88542a57d3",
"active": "dbad7b010371d947",
"lastOpenFiles": [
"Coding Tips (Classical)/Project Vault/Current Occupations/Potential and Future/60 careers/Quantum Computing Developer.md",
"en-US/docs/Web/API/File_System_API/Origin_private_file_system.md",
"OPFS File Storage.md",
"Coding Tips (Classical)/Terminal Tips/3. GUIs/Internet/Servers/Networking/Protocols/APIs/File System API.md",
"Coding Tips (Classical)/Terminal Tips/3. GUIs/Internet/Servers/Networking/Protocols/APIs/OPFS.md",
"Coding Tips (Classical)/Project Vault/Current Occupations/Potential and Future/60 careers/Quantum Computing Developer.md",
"en-US/docs/Web/API/File_System_API",
"en-US/docs/Web/API",
"en-US/docs/Web",
@ -372,7 +385,6 @@
"Coding Tips (Classical)/Terminal Tips/System Client/OSX Apple Macbook/OSX Apps.md",
"Machine Tips (Quantum)/Project Vault/Companies, Orgs, & Events/List of Quantum Companies.md",
"Machine Tips (Quantum)/Project Vault/Constructions/Making Machines.md",
"Machine Tips (Quantum)/Project Vault/Companies, Orgs, & Events/Get to hacking!/Womanium Process.md",
"Machine Tips (Quantum)/Project Vault/Quantum Master's Paper/References & Papers/Shwetha Jayaraj CV.pdf",
"Machine Tips (Quantum)/Resources/QRE",
"Machine Tips (Quantum)/Quantum spaces.canvas",

0
enter/OPFS File Storage.md → enter/Coding Tips (Classical)/Terminal Tips/3. GUIs/Internet/Servers/Networking/Protocols/APIs/File System API.md
View File

213
enter/Coding Tips (Classical)/Terminal Tips/3. GUIs/Internet/Servers/Networking/Protocols/APIs/OPFS.md 100644
View File

@ -0,0 +1,213 @@
From <https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system>:
# Origin private file system
**Secure context:** This feature is available only in [secure contexts](/en-US/docs/Web/Security/Secure_Contexts) (HTTPS), in some or all supporting browsers.
The origin private file system (OPFS) is a storage endpoint provided as part of the [File System API](/en-US/docs/Web/API/File_System_API), which is private to the origin of the page and not visible to the user like the regular file system. It provides access to a special kind of file that is highly optimized for performance and offers in-place write access to its content.
## Working with files using the File System Access API
The [File System Access API](https://wicg.github.io/file-system-access/), which extends the [File System API](/en-US/docs/Web/API/File_System_API), provides access to files using picker methods. For example:
1. [`Window.showOpenFilePicker()`](/en-US/docs/Web/API/Window/showOpenFilePicker) allows the user to choose a file to access, which results in a [`FileSystemFileHandle`](/en-US/docs/Web/API/FileSystemFileHandle) object being returned.
2. [`FileSystemFileHandle.getFile()`](/en-US/docs/Web/API/FileSystemFileHandle/getFile) is called to get access to the file's contents, the content is modified using [`FileSystemFileHandle.createWritable()`](/en-US/docs/Web/API/FileSystemFileHandle/createWritable) / [`FileSystemWritableFileStream.write()`](/en-US/docs/Web/API/FileSystemWritableFileStream/write).
3. [`FileSystemHandle.requestPermission({mode: 'readwrite'})`](/en-US/docs/Web/API/FileSystemHandle/requestPermission) is used to request the user's permission to save the changes.
4. If the user accepts the permission request, the changes are saved back to the original file.
This works, but it has some restrictions. These changes are being made to the user-visible file system, so there are a lot of security checks in place (for example, [safe browsing](https://developers.google.com/safe-browsing) in Chrome) to guard against malicious content being written to that file system. These writes are not in-place, and instead use a temporary file. The original is not modified unless it passes all the security checks.
As a result, these operations are fairly slow. It is not so noticeable when you are making small text updates, but the performance suffers when making more significant, large-scale file updates such as [SQLite](https://www.sqlite.org/wasm) database modifications.
## How does the OPFS solve such problems?
The OPFS offers low-level, byte-by-byte file access, which is private to the origin of the page and not visible to the user. As a result, it doesn't require the same series of security checks and permission grants and is therefore faster than File System Access API calls. It also has a set of synchronous calls available (other File System API calls are asynchronous) that can be run inside web workers only so as not to block the main thread.
To summarize how the OPFS differs from the user-visible file system:
* The OPFS is subject to [browser storage quota restrictions](/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria), just like any other origin-partitioned storage mechanism (for example [IndexedDB API](/en-US/docs/Web/API/IndexedDB_API)). You can access the amount of storage space the OPFS is using via [`navigator.storage.estimate()`](/en-US/docs/Web/API/StorageManager/estimate).
* Clearing storage data for the site deletes the OPFS.
* Permission prompts and security checks are not required to access files in the OPFS.
* Browsers persist the contents of the OPFS to disk somewhere, but you cannot expect to find the created files matched one-to-one. The OPFS is not intended to be visible to the user.
## How do you access the OPFS?
To access the OPFS in the first place, you call the [`navigator.storage.getDirectory()`](/en-US/docs/Web/API/StorageManager/getDirectory) method. This returns a reference to a [`FileSystemDirectoryHandle`](/en-US/docs/Web/API/FileSystemDirectoryHandle) object that represents the root of the OPFS.
## Manipulating the OPFS from the main thread
When accessing the OPFS from the main thread, you will use asynchronous, [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)-based APIs. You can access file ([`FileSystemFileHandle`](/en-US/docs/Web/API/FileSystemFileHandle)) and directory ([`FileSystemDirectoryHandle`](/en-US/docs/Web/API/FileSystemDirectoryHandle)) handles by calling [`FileSystemDirectoryHandle.getFileHandle()`](/en-US/docs/Web/API/FileSystemDirectoryHandle/getFileHandle) and [`FileSystemDirectoryHandle.getDirectoryHandle()`](/en-US/docs/Web/API/FileSystemDirectoryHandle/getDirectoryHandle) respectively on the [`FileSystemDirectoryHandle`](/en-US/docs/Web/API/FileSystemDirectoryHandle) object representing the OPFS root (and child directories, as they are created).
**Note:** Passing `{ create: true }` into the above methods causes the file or folder to be created if it doesn't exist.
js
// Create a hierarchy of files and folders
const fileHandle = await opfsRoot
.getFileHandle('my first file', {create: true});
const directoryHandle = await opfsRoot
.getDirectoryHandle('my first folder', {create: true});
const nestedFileHandle = await directoryHandle
.getFileHandle('my first nested file', {create: true});
const nestedDirectoryHandle = await directoryHandle
.getDirectoryHandle('my first nested folder', {create: true});
// Access existing files and folders via their names
const existingFileHandle = await opfsRoot.getFileHandle('my first file');
const existingDirectoryHandle = await opfsRoot
.getDirectoryHandle('my first folder);
### Reading a file
1. Make a [`FileSystemDirectoryHandle.getFileHandle()`](/en-US/docs/Web/API/FileSystemDirectoryHandle/getFileHandle) call to return a [`FileSystemFileHandle`](/en-US/docs/Web/API/FileSystemFileHandle) object.
2. Call the [`FileSystemFileHandle.getFile()`](/en-US/docs/Web/API/FileSystemFileHandle/getFile) object to return a [`File`](/en-US/docs/Web/API/File) object. This is a specialized type of [`Blob`](/en-US/docs/Web/API/Blob), and as such can be manipulated just like any other `Blob`. For example, you could access the text content directly via [`Blob.text()`](/en-US/docs/Web/API/Blob/text).
### Writing a file
1. Make a [`FileSystemDirectoryHandle.getFileHandle()`](/en-US/docs/Web/API/FileSystemDirectoryHandle/getFileHandle) call to return a [`FileSystemFileHandle`](/en-US/docs/Web/API/FileSystemFileHandle) object.
2. Call [`FileSystemFileHandle.createWritable()`](/en-US/docs/Web/API/FileSystemFileHandle/createWritable) to return a [`FileSystemWritableFileStream`](/en-US/docs/Web/API/FileSystemWritableFileStream) object, which is a specialized type of [`WritableStream`](/en-US/docs/Web/API/WritableStream).
3. Write contents to it using a [`FileSystemWritableFilestream.write()`](/en-US/docs/Web/API/FileSystemWritableFileStream/write) call.
4. Close the stream using [`WritableStream.close()`](/en-US/docs/Web/API/WritableStream/close).
### Deleting a file or folder
You can call [`FileSystemDirectoryHandle.removeEntry()`](/en-US/docs/Web/API/FileSystemDirectoryHandle/removeEntry) on the parent directory, passing it the name of the item you want to remove:
js
directoryHandle.removeEntry("my first nested file");
You can also call [`FileSystemHandle.remove()`](/en-US/docs/Web/API/FileSystemHandle/remove) on the [`FileSystemFileHandle`](/en-US/docs/Web/API/FileSystemFileHandle) or [`FileSystemDirectoryHandle`](/en-US/docs/Web/API/FileSystemDirectoryHandle) representing the item you want to remove. To delete a folder including all subfolders, pass the `{ recursive: true }` option.
js
await fileHandle.remove();
await directoryHandle.remove({ recursive: true });
The following provides a quick way to clear the entire OPFS:
js
await (await navigator.storage.getDirectory()).remove({ recursive: true });
### Listing the contents of a folder
[`FileSystemDirectoryHandle`](/en-US/docs/Web/API/FileSystemDirectoryHandle) is an [asynchronous iterator](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_async_iterator_and_async_iterable_protocols). As such, you can iterate over it with a [`for await…of`](/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of) loop and standard methods such as [`entries()`](/en-US/docs/Web/API/FileSystemDirectoryHandle/entries), [`values()`](/en-US/docs/Web/API/FileSystemDirectoryHandle/entries), and [`keys()`](/en-US/docs/Web/API/FileSystemDirectoryHandle/entries).
For example:
js
for await (let [name, handle] of directoryHandle) {
}
for await (let [name, handle] of directoryHandle.entries()) {
}
for await (let handle of directoryHandle.values()) {
}
for await (let name of directoryHandle.keys()) {
}
## Manipulating the OPFS from a web worker
Web Workers don't block the main thread, which means you can use the synchronous file access APIs in this context. Synchronous APIs are faster as they avoid having to deal with promises.
You can synchronously access a file by calling [`FileSystemFileHandle.createSyncAccessHandle()`](/en-US/docs/Web/API/FileSystemFileHandle/createSyncAccessHandle) on a regular [`FileSystemFileHandle`](/en-US/docs/Web/API/FileSystemFileHandle):
**Note:** Despite having "Sync" in its name, the `createSyncAccessHandle()` method itself is asynchronous.
js
const opfsRoot = await navigator.storage.getDirectory();
const fileHandle = await opfsRoot.getFileHandle("my highspeed file.txt", {
create: true,
});
const syncAccessHandle = await fileHandle.createSyncAccessHandle();
There are a number of _synchronous_ methods available on the returned [`FileSystemSyncAccessHandle`](/en-US/docs/Web/API/FileSystemSyncAccessHandle):
* [`getSize()`](/en-US/docs/Web/API/FileSystemSyncAccessHandle/getSize): Returns the size of the file in bytes.
* [`write()`](/en-US/docs/Web/API/FileSystemSyncAccessHandle/write): Writes the content of a buffer into the file, optionally at a given offset, and returns the number of written bytes. Checking the returned number of written bytes allows callers to detect and handle errors and partial writes.
* [`read()`](/en-US/docs/Web/API/FileSystemSyncAccessHandle/read): Reads the contents of the file into a buffer, optionally at a given offset.
* [`truncate()`](/en-US/docs/Web/API/FileSystemSyncAccessHandle/truncate): Resizes the file to the given size.
* [`flush()`](/en-US/docs/Web/API/FileSystemSyncAccessHandle/flush): Ensures that the file contents contain all the modifications done through `write()`.
* [`close()`](/en-US/docs/Web/API/FileSystemSyncAccessHandle/close): Closes the access handle.
Here is an example that uses all the methods mentioned above:
js
const opfsRoot = await navigator.storage.getDirectory();
const fileHandle = await opfsRoot.getFileHandle("fast", { create: true });
const accessHandle = await fileHandle.createSyncAccessHandle();
const textEncoder = new TextEncoder();
const textDecoder = new TextDecoder();
// Initialize this variable for the size of the file.
let size;
// The current size of the file, initially `0`.
size = accessHandle.getSize();
// Encode content to write to the file.
const content = textEncoder.encode("Some text");
// Write the content at the beginning of the file.
accessHandle.write(content, { at: size });
// Flush the changes.
accessHandle.flush();
// The current size of the file, now `9` (the length of "Some text").
size = accessHandle.getSize();
// Encode more content to write to the file.
const moreContent = textEncoder.encode("More content");
// Write the content at the end of the file.
accessHandle.write(moreContent, { at: size });
// Flush the changes.
accessHandle.flush();
// The current size of the file, now `21` (the length of
// "Some textMore content").
size = accessHandle.getSize();
// Prepare a data view of the length of the file.
const dataView = new DataView(new ArrayBuffer(size));
// Read the entire file into the data view.
accessHandle.read(dataView);
// Logs `"Some textMore content"`.
console.log(textDecoder.decode(dataView));
// Read starting at offset 9 into the data view.
accessHandle.read(dataView, { at: 9 });
// Logs `"More content"`.
console.log(textDecoder.decode(dataView));
// Truncate the file after 4 bytes.
accessHandle.truncate(4);
## Browser compatibility
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
## See also
* [The origin private file system](https://web.dev/articles/origin-private-file-system) on web.dev
### Found a content problem with this page?
* [Edit the page on GitHub](https://github.com/mdn/content/edit/main/files/en-us/web/api/file_system_api/origin_private_file_system/index.md).
* [Report the content issue](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FFile_System_API%2FOrigin_private_file_system&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fapi%2Ffile_system_api%2Forigin_private_file_system%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FFile_System_API%2FOrigin_private_file_system%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fapi%2Ffile_system_api%2Forigin_private_file_system%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F835d6632d59993861a0458510402787f8a2c3cb3%0A*+Document+last+modified%3A+2023-10-25T17%3A27%3A32.000Z%0A%0A%3C%2Fdetails%3E).
* [View the source on GitHub](https://github.com/mdn/content/blob/main/files/en-us/web/api/file_system_api/origin_private_file_system/index.md?plain=1).
Want to get more involved? [Learn how to contribute](https://github.com/mdn/content/blob/main/CONTRIBUTING.md).
This page was last modified on Oct 25, 2023 by [MDN contributors](/en-US/docs/Web/API/File_System_API/Origin_private_file_system/contributors.txt).
[MDN logo](/)
Your blueprint for a better internet.

0
enter/en-US/docs/Web/API/File_System_API/Origin_private_file_system.md
View File