Have ideas to improve npm?Join in the discussion! »

    xlocalstorage
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.0-dev.1 • Public • Published

    xlocalstorage

    • cross-domain localstorage access
    • using iframe postmessage rpc via crosscall
    • you install the xlocalstorage host html page
      xlocalstorage 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

    
    |---------------|                                       |---------------|
    | XLOCALSTORAGE |                                       | XLOCALSTORAGE |
    |    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             ]<-/   | ............. |
    | ............. |       \-----------------------/       | ............. |
    | ............. |                                       | ............. |
    |---------------|                                       |---------------|
    

    Install

    npm i xlocalstorage

    DownloadsWeekly Downloads

    1

    Version

    0.0.0-dev.1

    License

    ISC

    Unpacked Size

    24.4 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar