title: How can I store a large (2Mb) dataset in persistent local storage?
body: <p>I'm retrieving a large list of attendees for an event from a Firebase database - roughly 4,000 attendees. Each is represented as a JSON object of roughly 500 bytes.</p>
  
  <p>After retrieving the dataset, I am trying to store it in a persistent local store. Initially I tried using Lawnchair.js using the standard DOM storage (localStorage).</p>
  
  <p>What I've observed is that while inserting the dataset with this method, Chrome's <em>memory usage goes up to around 2GB</em>. Also, because saving to localStorage is synchronous, this blocks the DOM and the app becomes unresponsive for 30 seconds.</p>
  
  <p>I thought it may be a Lawnchair issue, so I tried switching now to localForage using IndexedDB. This has had 2 great improvements:</p>
  
  <ol>
  <li>localForage is asynchronous so the app remains responsive</li>
  <li>Memory usage doesn't climb at all</li>
  </ol>
  
  <p>However, it takes about <em>10 minutes</em> to write the data to indexed db. The first 5 minutes, CPU sits at around 30% and nothing is written to indexed db. The last 5 minutes CPU goes down and writing commences at a slow pace (maybe 10 records / second).</p>
  
  <p>My question is thus:
  Are these behaviours normal and if so, how can I store this data (roughly 2Mb) in persistent local storage without it either taking ages or consuming a huge amount of memory?</p>