假设您希望能够透明地使用在本地缓存（且一致）的初始远程资源，您可以抽象（使用请求）和.fetchRange:IndexedDB
顺便说一句，你真的很想为此使用 TypeScript，因为使用Promise<T>纯 JavaScript 是一个 PITA。
可以说只读或仅附加写入。严格来说，我不需要能够覆盖文件内容（虽然它会很方便）
像这样的东西。。
我从 MDN 的文档中拼凑出这个——我还没有测试过，但我希望它能让你朝着正确的方向前进：
第1部分 -LocalFileStore
这些类允许您以 4096 字节的块存储任意二进制数据，其中每个块由ArrayBuffer.
IndexedDB API 起初令人困惑，因为它不使用原生 ECMAScript Promise<T>，而是使用自己的IDBRequest-API 和奇怪命名的属性 - 但它的要点是：
- 一个名为 IndexedDB 的数据库
'files'保存了本地缓存的所有文件。
- 每个文件都由它自己的
IDBObjectStore实例表示。
- 每个文件的每个 4096 字节块都由它自己的记录/条目/键值对表示
IDBObjectStore，其中key是4096文件中的对齐偏移量。
- 请注意，所有 IndexedDB 操作都发生在
IDBTransaction上下文中，因此为什么要class LocalFile包装IDBTransaction对象而不是IDBObjectStore对象。
class LocalFileStore {
static open(): Promise<IDBDatabase> {
return new Promise<IDBDatabase> ( function( accept, reject ) {
// Surprisingly, the IndexedDB API is designed such that you add the event-handlers *after* you've made the `open` request. Weird.
const openReq = indexedDB.open( 'files' );
openReq.addEventListener( 'error', function( err ) {
reject( err );
};
openReq.addEventListener( 'success', function() {
const db = openReq.result;
accept( db );
};
} );
}
constructor(
private readonly db: IDBDatabase
) {
}
openFile( fileName: string, write: boolean ): LocalFile {
const transaction = this.db.transaction( fileName, write ? 'readwrite' : 'readonly', 'strict' );
return new LocalFile( fileName, transaction, write );
}
}
class LocalFile {
constructor(
public readonly fileName: string,
private readonly t: IDBTransaction,
public readonly writable: boolean
) {
}
getChunk( offset: BigInt ): Promise<ArrayBuffer> {
if( offset % 4096 !== 0 ) throw new Error( "Offset value must be a multiple of 4096." );
return new Promise<ArrayBuffer>( function( accept, reject ) {
const key = offset.ToString()
const req = t.objectStore( this.fileName ).get( key );
req.addEventListener( 'error', function( err ) {
reject( err );
} );
req.addEventListener( 'success', function() {
const entry = req.result;
if( typeof entry === 'object' && entry !== null ) {
if( entry instanceof ArrayBuffer ) {
accept( entry as ArrayBuffer );
return;
}
}
else if( typeof entry === 'undefined' ) {
accept( null );
return;
}
reject( "Entry was not an ArrayBuffer or 'undefined'." );
} );
} );
}
putChunk( offset: BigInt, bytes: ArrayBuffer ): Promise<void> {
if( offset % 4096 !== 0 ) throw new Error( "Offset value must be a multiple of 4096." );
if( bytes.length > 4096 ) throw new Error( "Chunk size cannot exceed 4096 bytes." );
return new Promise<ArrayBuffer>( function( accept, reject ) {
const key = offset.ToString();
const req = t.objectStore( this.fileName ).put( bytes, key );
req.addEventListener( 'error', function( err ) {
reject( err );
} );
req.addEventListener( 'success', function() {
accept();
} );
} );
}
existsLocally(): Promise<boolean> {
// TODO: Implement check to see if *any* data for this file exists locally.
}
}
第2部分：AbstractFile
- 此类包装了基于 IndexedDB 的类
LocalFileStore和LocalFile上面的类，并且还使用fetch.
- 当您对文件范围发出读取请求时：
- 它首先检查
LocalFileStore; 如果它有必要的块，那么它将检索它们。
- 如果它在范围内缺少任何块，那么它将回退到使用标头检索请求的范围
fetch，Range:并在本地缓存这些块。
- 当您向文件发出写入请求时：
- 我实际上还没有实现那一点，但这是留给读者的练习:)
class AbstractFileStore {
private readonly LocalFileStore lfs;
constructor() {
this.lfs = LocalFileStore.open();
}
openFile( fileName: string, writeable: boolean ): AbstractFile {
return new AbstractFile( fileName, this.lfs.openFile( fileName, writeable ) );
}
}
class AbstractFile {
private static const BASE_URL = 'https://storage.example.com/'
constructor(
public readonly fileName: string,
private readonly localFile: LocalFile
) {
}
read( offset: BigInt, length: number ): Promise<ArrayBuffer> {
const anyExistsLocally = await this.localFile.existsLocally();
if( !anyExistsLocally ) {
return this.readUsingFetch( chunk, 4096 ); // TODO: Cache the returned data into the localFile store.
}
const concat = new Uint8Array( length );
let count = 0;
for( const chunkOffset of calculateChunks( offset, length ) ) {
// TODO: Exercise for the reader: Split `offset + length` into a series of 4096-sized chunks.
const fromLocal = await this.localFile.getChunk( chunk );
if( fromLocal !== null ) {
concat.set( new Uint8Array( fromLocal ), count );
count += fromLocal.length;
}
else {
const fromFetch = this.readUsingFetch( chunk, 4096 );
concat.set( new Uint8Array( fromFetch ), count );
count += fromFetch.length;
}
}
return concat;
}
private readUsingFetch( offset: BigInt, length: number ): Promise<ArrayBuffer> {
const url = AbstractFile.BASE_URL + this.fileName;
const headers = new Headers();
headers.append( 'Range', 'bytes=' + offset + '-' + ( offset + length ).toString() );
const opts = {
credentials: 'include',
headers : headers
};
const resp = await fetch( url, opts );
return await resp.arrayBuffer();
}
write( offset: BigInt, data: ArrayBuffer ): Promise<void> {
throw new Error( "Not yet implemented." );
}
}
第 3 部分 - 流？
由于上面的类使用ArrayBuffer，您可以利用现有ArrayBuffer功能来创建兼容 Stream 或类似 Stream 的表示 - 当然它必须是异步的，但是async+await使这很容易。您可以编写一个生成器函数（又名迭代器），它简单地异步生成每个块。