Flutter web app - SQLite support to read & write the data in local windows machine file system instead of browser storage

[techttiru]

Currently i am using SQLite db using drift package in flutter web app and the sqlite data is stored in the below location in chrome browser. web browser -> application -> local storage -> web url -> moor_db_str_db.

All is good so far and package works great. but my data is higher than expect and it might lead more than 10 MB size. (i assume web location local storage size is 10 MB max in chrome browser. Please let me know if i am wrong). So i want to permanently store the data in client windows machine instead of storing in web browser storage. is that possible? I looked at some of the threads talking about using WebDatabase.withStorage() but i was unable to get the complete example to achieving this. Can some please give/point me to the link where can i see the working example of achieving this?

My app is for closed circle and my users will always be using only chrome browser. so browser limitation is not the problem.

Really appreciate your response!.. I stuck in this point now and unable to continue the development. Thanks much!

[simolus3]

You can write a custom DriftWebStorage implementation to define how to store data. Then, you can use WebDatabase.withStorage() and your custom storage implementation to rely on the Chrome filesystem APIs.

Have you used these filesystem APIs before? I'm not sure how good the Dart interfaces in dart:html for those are of if it makes more sense to write custom bindings with package:js. If you know some sample code for them, I can take a look and give you some pointers on how they could be used to implement a DriftWebStorage ontop of it..

[techttiru]

@simolus3 - Thank you for quick response.. I went throw the api documentation and i converted from local storage to indexDb storage because as per the document indexdb storage allow more size than local storage but its still stores in browser which is expected as per the documentation. So no issue so far.

Future<SharedDatabase> constructDb() async {
  await Future.delayed(const Duration(microseconds: 1));
  // return SharedDatabase(WebDatabase('db', logStatements: true, setup: (db) {
  //   db.run("pragma KEY = 'password';");
  // }));

  return SharedDatabase(
    WebDatabase.withStorage(await DriftWebStorage.indexedDbIfSupported('db'),
        logStatements: true,
        setup: ((database) => database.run("pragma KEY = 'password';"))),
  );
  }

here is the link that i referred. https://drift.simonbinder.eu/web/

so far its good and works great. but still if i want to achieve the file system storage and as you suggested to do the custom storage implementation, i am unable to find any example of doing this. I didn't work on the file system api before but i looked at this below document as you suggested in some other post but i was unable to connect the dots here how to use these apis in custom storage implementation.

https://web.dev/file-system-access/

Appreciate your response. Thanks..