前端文件系统原子操作：Web应用程序中的事务性文件管理

            
const dbName = 'myDatabase';
const storeName = 'files';

function storeFile(file) {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(dbName, 1); // Version 1

    request.onerror = (event) => {
      reject('Error opening database: ' + event.target.errorCode);
    };

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      const objectStore = db.createObjectStore(storeName, { keyPath: 'name' });
      objectStore.createIndex('lastModified', 'lastModified', { unique: false });
    };

    request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction([storeName], 'readwrite');
      const objectStore = transaction.objectStore(storeName);

      const fileData = {
        name: file.name,
        lastModified: file.lastModified,
        content: file // Store the Blob directly
      };

      const addRequest = objectStore.add(fileData);

      addRequest.onsuccess = () => {
        resolve('File stored successfully.');
      };

      addRequest.onerror = () => {
        reject('Error storing file: ' + addRequest.error);
      };

      transaction.oncomplete = () => {
        db.close();
      };

      transaction.onerror = () => {
        reject('Transaction failed: ' + transaction.error);
        db.close();
      };
    };
  });
}

// Example Usage:
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', async (event) => {
  const file = event.target.files[0];
  try {
    const result = await storeFile(file);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
});

            

              
                Copy
              
            
          

            
async function transactionalWrite(fileHandle, data) {
  const tempFileName = fileHandle.name + '.tmp';

  try {
    // 1. Create a temporary file handle
    const tempFileHandle = await fileHandle.getParent();
    const newTempFileHandle = await tempFileHandle.getFileHandle(tempFileName, { create: true });

    // 2. Write data to the temporary file
    const writableStream = await newTempFileHandle.createWritable();
    await writableStream.write(data);
    await writableStream.close();

    // 3. Verify the write (optional: implement checksum verification)
    // For example, you can read the data back and compare it to the original data.
    // If verification fails, throw an error.

    // 4. Rename the temporary file to the final file
    await fileHandle.remove(); // Remove the original file
    await newTempFileHandle.move(fileHandle); // Move the temporary file to the original file

    console.log('Transaction successful!');

  } catch (error) {
    console.error('Transaction failed:', error);
    // Clean up the temporary file if it exists
    try {
      const parentDirectory = await fileHandle.getParent();
      const tempFileHandle = await parentDirectory.getFileHandle(tempFileName);
      await tempFileHandle.remove();
    } catch (cleanupError) {
      console.warn('Failed to clean up temporary file:', cleanupError);
    }
    throw error; // Re-throw the error to signal failure
  }
}

// Example usage:
async function writeFileExample(fileHandle, content) {
  try {
    await transactionalWrite(fileHandle, content);
    console.log('File written successfully.');
  } catch (error) {
    console.error('Failed to write file:', error);
  }
}


// Assuming you have a fileHandle obtained through showSaveFilePicker()
// and some content to write (e.g., a string or a Blob)

// Example usage (replace with your actual fileHandle and content):
// const fileHandle = await window.showSaveFilePicker();
// const content = "This is the content to write to the file.";
// await writeFileExample(fileHandle, content);


            

              
                Copy