Refactor/Redesign: Move store away from localStorage

[armand1m]

Goal

The goal of this issue is to track the design and development of a new client-side store for Perry.

Motivation

Today making some tests with the new feature in #47, I got this error while testing it:

Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'perry::document.onclick::history' exceeded the quota.
    at writeToStore (webpack-internal:///./packages/write-to-store/index.ts:13:18)
    at HTMLDocument.document.onclick (webpack-internal:///./packages/listen-document-clicks/index.ts:21:108)

Basically it seems that WebStorage is limited to 10mb. (src: https://www.html5rocks.com/en/tutorials/offline/quota-research/)

Possible solutions

@jackTheRipper already proposed a couple of days ago to move to IndexedDB since now we have to also store blob's in the client for a while (the screen recordings).

In MDN they state IndexedDB as the following:

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data. While Web Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution.

IndexedDB indeed looks way more solid for our purpose since we can generate a lot of data in a small period of time.

Maybe we can use it together with something such as https://localforage.github.io/localForage/ for fallback in browsers that don't support it.

There might be other solutions as well and this issue is a place to discuss those when they come on mind.

FYI @vitormargis @guilhermelimak

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[armand1m]

I like the idea of https://github.com/developit/stockroom