omnistorage

cross-origin localstorage

Usage no npm install needed!

<script type="module">
  import omnistorage from 'https://cdn.skypack.dev/omnistorage';
</script>

README

omnistorage

  • cross-domain localstorage access
  • using iframe postmessage rpc via crosscall
  • you install the omnistorage host html page
    omnistorage hostpage provides access to its localstorage
  • then the client can use that host page's localstorage
    even across domains

here's a wacky ascii diagram which outlines some client-host interactions happening withing crosscall

|---------------|                                       |---------------|
|  OMNISTORAGE  |                                       |  OMNISTORAGE  |
|    CLIENT     |                                       |     HOST      |
| ............. |                                       | ............. |
| ............. | // x.getItem("count")                 | ............. |
| ............. |                                       | ............. |
| ............. |   /-> /-----------------------\     \ | ............. |
| ............. |----->[ GET ITEM                ]----->| ............. |
| ............. |   \->[  - key: "count"         ]    / | ............. |
| ............. |       \-----------------------/       | ............. |
| ............. |                                       | ............. |
| ............. | /     /-----------------------\ <-\   | ............. |
| ............. |<-----[ GET ITEM                ]<-----| ............. |
| ............. | \    [  - response             ]<-/   | ............. |
| ............. |      [  - value: 5             ]      | ............. |
| ............. |       \-----------------------/       | ............. |
| ............. |                                       | ............. |
| ............. |                                       | ............. |
| ............. | // x.listen(event => {})              | ............. |
| ............. |                                       | ............. |
| stores        |   /-> /-----------------------\     \ | assigns host- |
| listener      |----->[ LISTEN                  ]----->| side listener |
| clientside    |   \-> \-----------------------/     / | ..............|
| ............. |                                       | ............. |
| ............. | /     /-----------------------\ <-\   | responds with |
| remembers     |<-----[ LISTEN                  ]<-----| listener id   |
| listener id   | \    [  - response             ]<-/   | so client can |
| ............. |      [  - listener: 5          ]      | unlisten      |
| ............. |       \-----------------------/       | ............. |
| ............. |                                       | ............. |
| ............. |                                       | ............. |
| ............. | // // changes in other windows        | ............. |
| ............. |                                       | ............. |
| ............. | /     /-----------------------\ <-\   | ............. |
| fires         |<-----[ EVENT                   ]<-----| ............. |
| listener 5    | \    [  - type: "storage"      ]<-/   | ............. |
| ............. |      [  - key: "count"         ]      | ............. |
| ............. |      [  - value: 6             ]      | ............. |
| ............. |       \-----------------------/       | ............. |
| ............. |                                       | ............. |
| ............. | /     /-----------------------\ <-\   | ............. |
| again         |<-----[ EVENT                   ]<-----| ............. |
| ............. | \    [  - type: "storage"      ]<-/   | ............. |
| ............. |      [  - key: "count"         ]      | ............. |
| ............. |      [  - value: 7             ]      | ............. |
| ............. |       \-----------------------/       | ............. |
| ............. |                                       | ............. |
| ............. |                                       | ............. |
| ............. | // x.unlisten(5)                      | ............. |
| ............. |                                       | ............. |
| ............. |   /-> /-----------------------\     \ | ............. |
| deciding to   |----->[ UNLISTEN                ]----->| ............. |
| stop          |   \->[  - listener: 5          ]    / | ............. |
| listening     |       \-----------------------/       | ............. |
| ............. |                                       | ............. |
| ............. | /     /-----------------------\ <-\   | ............. |
| ............. |<-----[ UNLISTEN                ]<-----| ............. |
| ............. | \    [  - response             ]<-/   | ............. |
| ............. |       \-----------------------/       | ............. |
| ............. |                                       | ............. |
|---------------|                                       |---------------|

debugging

debug tests

  • visit chrome://inspect

  • run jest in node debugger

    npm run build-debug && node --inspect-brk ./node_modules/jest/bin/jest --testPathPattern="integration" --testNamePattern="to events"