SharedStorage offers a new way to communicate between workers and there parent window, by offering a new storage object that works much in the same way as LocalStorage and SessionStorage. However SharedStorage doesn't store it's data to retrieve it at a later moment, but instead to retrieve it from a different scope.
When working with multiple workers, the chanche is big you'll have to deal with more complex messages between the window scope and the different workers, even when sending simmple parameters. This gets even worse when 2 different workers need to talk to eachother, as you the window scope to relay the messages. The SharedStorage API tries to tackle this by introducing a storage object that functions alot like the localStorage and sessionStorage objects. The SharedStorage API will send it's data to all the workers created after it is loaded in the window scope, and all data set to it within the worker scopes will be send to the window scope (and thus all other workers).
- Download 'sharedStorage.js' or 'sharedStorage.min.js' and place it in you're servers js folder.
- Add it to your page using a script tag
<script src="/js-path/sharedStorage.js"></script>. Make sure it's loaded before any script that creates the workers. I recommend creating the workers in or after a onload event was dispatched by the window. - import the same script in your worker using
importScripts('relativePath/sharedStorage.js')at the start of the worker script.
As this is the first version there are still a few kinks that need to be worked out. Because of this, direct setting of values (sharedStorage.<name> = value) is not supported. This will set the value within the current scope, but the value wont be shared. Until these features are implemented, you should use the methods of sharedStorage to modify it (sharedStorage.setItem(name, value)).
Aside from this there are some minor features found in the native storage objects, that are not found in sharedStorage jet, like length or type-checking the values. This can cause message errors when storing objects.
The sharedStorage object is created when the script is loaded, and doesn't need to be created or initilized manualy.
SharedStorage.onready
A fakeEventListenerproperty that's called when theSharedStorageinstance within a worker is updated.SharedStoragedoesn't implementEventTarget, and no actualEventis dispatched. The property is cleared once it's called, and needs to be set again.
SharedStorage.key(n)
Returns the nth key in the storage ornullwhen out of range.SharedStorage.getItem(key)
Return the value stored at the given key ornullif the key doesn't existSharedStorage.setItem(key, value)
Stores a value at the given key, or updates the value if the key already exists.SharedStorage.removeItem(key)
Removes the key from the storage.SharedStorage.clear()
Removes all keys from the storage.
This example shows how to share basic page data with your workers. The page stores the page name and article name in sharedStorage, and the worker reads and logs them to the console.
<html>
<head>
<script src="sharedStorage.js"></script>
<script>
window.onload = function initPage(){
// storing the page data
sharedStorage.setItem("page", "news");
sharedStorage.setItem("article", "SharedStorage now native in all major browsers");
// creating a worker
pageWorker = new Worker('pageWorker.js');
}
</script>
</head>
<body>
...
</body>
</html>// import the sharedStorage api
importScripts('sharedStorage.js');
var pageData;
// wait till sharedStorage is ready to go
sharedStorage.onready = function(){
console.log(sharedStorage.page); // logs "news"
console.log(sharedStorage.article); // logs "SharedStorage now native in all major browsers"
}