In which order storage
event is received?
For example, tab_1 executes code
localStorage.set('key', 1);
localStorage.set('key', 2);
and tab_2 executes code
localStorage.set('key', 3);
localStorage.set('key', 4);
They execute code simultaneously.
Questions:
- Can 2 be stored before 1?
- Can 3 or 4 be stored between 1 and 2?
- Can tab_3 receive
storage
events not in same order as values were stored in?(like if we stored 3, 4, 1, 2, can we receive 1, 2, 3, 4, or even in random order like 4, 1, 2, 3)
2
Answers
Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Storage
Can 2 be stored before 1?
Javascript uses a single thread and executes the commands sequentially. So, if you have
then my expectation would be that 1 is stored before 2 and 2 overrides 1, because
setItem
seems to be a simple function call and I don’t think it is involving async data. I am saying "I don’t think" because I do not know where its source-code is, but given the fact that it’s native code:it’s up to the browser developers to implement it or integrate an implementation. I understand you want to factually find this out, so here’s a test:
Output in FireFox:
and the same in Chrome. So the answer is no.
Can 3 or 4 be stored between 1 and 2?
If Javascript in two different tabs can run at the same time, then yes. Let’s write a test for that:
Run this code in a tab and quickly drift away to another tab. If in 5 seconds you see an alert while you are on the other tab, then the answer is yes. If not, then the answer is no. Running this in FireFox and drifting to another tab, I can see a red dot appearing on the now inactive tab, signifying that the alert happened there. The same happened at Chrome, but there the dot was orange. So the answer is yes.
Can tab_3 receive storage events not in same order as values were stored in?(like if we stored 3, 4, 1, 2, can we receive 1, 2, 3, 4, or even in random order like 4, 1, 2, 3)
This largely depends on the implementation, but I expect the loading of the data stored in
localStorage
to be behaving in the same manner upon each call. You can test it by running your codes in tab1 and tab2, respectively, possibly usingsetTimeout
and opening further tabs, either before or after running your codes and check the value oflocalStorage
in each. If they are the same, then the test’s result suggests that it is reliable indeed. If not, then the test disproved my hypothesis about reliability.JavaScript being single threaded (in the absence of Web Workers, who do not communicate through shared memory), the processing order within a browser tab is well defined.
As for ordering across tabs, the spec cautions:
Unfortunately, the precise meaning of "locking mechanism" is not defined here. The example illustrates that the value for a
localStorage
key may change at any time, even while a JavaScript thread is executing. That is, if a thread reads and then writes, another thread may have written in the meantime. It doesn’t explictly describe whether new values are guaranteed to show up in the same order to all windows.HTML Spec Issue 403 requests that the concurrency behavior of
localStorage
be specified better, but a solution has yet to be defined at this time …Implementation in Current Browsers
Earlier versions of the WebStorage spec required
localStorage
implementations to use a Mutex, and current versions of Chrome and Firefox still do that, as the following test shows:In the first browser window:
and while that is executing, in the second browser window:
Output in Chrome and Firefox:
That is, in the current version of these browsers, the execution of code accessing
localStorage
is delayed until a mutex is obtained, causing the javascript threads execute in sequence (not in parallel, as the spec language encourages us to assume).