List of files in LocalStorage

[KianV]

I would like to populate a list with the names of the files in LocalStorage, similar to using 'ExamineDirectory' in PB.
I can find nothing similar in the documentation so suspect that it may have to be done directly in Javascript. I've found a couple of JS examples online but my limited knowledge of what is going on means that I can't get it to work.
Any guidance would be much appreciated.
Kian

[Peter]

Code: Select all

EnableExplicit

! // some demo-items:
! localStorage.setItem('sb_test1', 'testing 1');
! localStorage.setItem('sb_test2', 'testing 2');
! localStorage.setItem('sb_test3', 'testing 3');

Procedure GetLocalStorageItems( Map LocalStorageItem.s() )
  
  Protected Key.s
  Protected Value.s
  
  ! for (var i=0; i < localStorage.length; i++) {
  !   var v_key = localStorage.key(i);
  !   var v_value = localStorage[v_key];
  LocalStorageItem(Key)=Value
  ! }
  
EndProcedure

NewMap LocalStorageItem.s()

GetLocalStorageItems(LocalStorageItem())

ForEach LocalStorageItem()
  Debug MapKey(LocalStorageItem()) + ": " + LocalStorageItem()
Next

[KianV]

Hi Peter,
That will quite happily show me data saved with set.Item, but does not show any files saved with 'CreateFile' with the #PB_LocalStorage flag set.
Is the data stored in a different way?

[Peter]

SpiderBasic uses the LocalForage library for file operations:

Code: Select all

EnableExplicit

Procedure AddLocalForageItem(Key.s, Value.s)
  
  Debug Key ; mostly with a "sbfs_" - prefix
  Debug Value ; Value is an Int8Array, so we have to decode it:
  
  Protected DecodedValue.s
  
  ! var enc = new TextDecoder("utf-8");
  ! v_decodedvalue = enc.decode(v_value);
  
  Debug DecodedValue
  
EndProcedure

Procedure GetLocalForageItems( Callback )
  
  ! LocalForage.iterate(function(value, key, iterationNumber) {
  !   // Resulting key/value pair -- this callback
  !   // will be executed for every item in the
  !   // database.
  !   v_callback(key, value)
  ! }).then(function() {
  !   console.log('Iteration has completed');
  ! }).catch(function(err) {
  !   // This code runs if there were any errors
  !   console.log(err);
  ! });  
  
EndProcedure

Procedure CreateFileCallback(Status, Filename$, File, SizeRead)
  
  ; ...  
  
  GetLocalForageItems(@AddLocalForageItem())  
  
EndProcedure

If CreateFile(0, "Test.txt", @CreateFileCallback(), #PB_LocalStorage)
  WriteStringN(0, "Hello World!") 
  CloseFile(0)
EndIf

[KianV]

That explains it!
This works perfectly.
Many thanks, as always, Peter.