Store MRI data in local storage

[Irev-Dev]

If you've visited the website, you'll know it takes a while to load, this is because it's fetching about 20mb of MRI data before it can display it (and I don't think openneuro.org's servers are very speedy). It would be good if we could store the last viewed MRI data in local storage so that it can be pulled up if a user re-visits the site.

If it's any help below is a little bit of hacking I did to see if I could get it working and I couldn't 🤷‍♀️ . At the bottom of setupNifti I'm storing the data, and trying to do so efficiently since it's a sizable chunk, then at the top of setupNifti I'm trying to load it in (so the second time you visit you can access this) just trying to log things out for now, if was working, then loading from local storage wouldn't be in setupNifti. Anyway when I log out blob I get [object object] 😔 .

function setupNifti(file) {
  const locals = JSON.parse(localStorage.getItem('niftiSize'));
  console.log('nifti sizes from storage', locals);
  const blob = localStorage.getItem('niftiBlob');
  console.log('storged blob', blob);
  // const fr = new FileReader();
  // fr.onload = (fileLoadEvent) => {
  //   console.log(fileLoadEvent.target.result);
  // };
  // fr.readAsArrayBuffer(blob);

  mRISlice.loadNewNifti(nifti.parse(file));
  mRISlice.mouseNavigationEnabled('enable please');
  hideLoader();

  const nifitSizeToStore = this.size;
  localStorage.setItem('niftiSize', JSON.stringify(nifitSizeToStore));

  const niftiBlob = new Blob([this.volume.buffer], { type: 'application/json' });
  localStorage.setItem('niftiBlob', URL.createObjectURL(niftiBlob));
  console.log('local storage set');
}

[mkeeneth]

Unfortunately localStorage cant handle storing that type of data. You can cache the fetch request with the browsers cache API. Have a look at my pull request and let me know if it works for you!

29

[Irev-Dev]

Resolved in #29 & #30.

Thanks @mkeeneth @mkeeneth, this significantly improves the experience visiting for a second time. I'm also learning a lot 😊