Local and session Storage in browser are serving as key-value data storage as communication across browser windows
layer. This concept is also working for <embed-page/>
except of scope. Rather treating
whole page as insulation context, the scope is defined for <embed-page/>
instances.
The instances with common scope are sharing the data and notify each other of its data change via
storage event. See sessionStorage
and localStorage for details.
Change scope attribute to
domain
host
page
instance
named
none
name:
Manual test
page-storage.html is served in IFRAME, main incognito embed-page instance and
two pairs of named embed-page instances. The same keys are set in all but except of
paired named instances will be insulated.
The common sequence is
1. page-storage.js will set localStorage 'a' to localStorage + url
2. page-storage.js will set sessionStorage 'a' to sessionStorage + url
3. GET the localStorage, expected localStorage page-storage.html?src=XXX where the XXX will match iframe
or instance name
4. SET key/value for localStorage and observe same scope instances received evens adding to own events matrix.
5. same as above for session storage, except of events NOT propagated in other browser windows or IFRAME.
IFRAME
1-6. as in common part.
7. open this page in another window
8. set key/value and observe the event propagated in another window adding event key/value in table.
embed-page - main
1-6. as in common part.
embed-page - named scope
1-6. as in common part. But in pair with same name the events will be propagated between embed-page instances
and as data shared across named instances the second instance key/value override the 1st( instance 1 in GET 'a' ).
The 'storage' event is not propagated to own instance so the events matrix will reflect changes made in
complimentary instance of pair.
page-storage.js
When used from
embed-page , the
document is wrapped to reflect component instance scope.
Named scope 'a'
Named scope 'b'
Demo IFRAME page-storage.html