It's not often I make the effort to blog (as you can tell from the date of my previous post!) but IE11's localStorage has got me to the point where I need to rant about it somewhere, and it may as well be to the Internet!
What's particularly disheartening about this is that IE11 seems to be worse than its predecessors.
There's always been the problem that IE ignores the spec when it comes to which tabs/windows the storage event gets raised in.
IE11 then adds to the fun by breaking the storage event with iframes.
These two issues together have both combined to cause me great headaches over the past week, but I've now found something that's arguably worse than both of them.
Setup I'm using: IE 11.0.9600.17207 on Windows 7 Professional SP1
You can test this here, but here's the code anyway if you want to try it yourself or if the link dies in future:
Overview
You can see for yourself from the code that clicking one of the "Store" buttons places a value into localStorage, and you can then retrieve this and display it with the "Show value" button. The value it stores is simply A or B (depending on the button you press), followed by the letter 'a' several times, based on the number supplied in the text box.
Steps to reproduce - part 1
- Open the page in 2 separate tabs (or windows if you prefer) of IE11.
- Leaving it at the default number (2000), click Store w/ A in Window 1.
- Click Show value in both windows, and you should see that a long string beginning with A has successfully been retrieved and displayed in both windows.
- Prove it again by this time clicking Store w/ B (again in Window 1), then repeat the last step to display in both. All looks good.
- Now in Window 1, change the number to 2500, before clicking Store w/ A. Verify it's been stored away by clicking Show value in Window 1.
- Finally, click Show value in Window 2, and see what happens.
Lolwut? That's right, absolutely nothing happens. Presumably the value was just too long for IE to be bothered to make it available to any other tabs.
Steps to reproduce - part 2
- Using Window 1, reset the number back to 2000 and click Clear. You can click Show value in both windows to show it's been cleared (you'll see null on screen).
- Repeat the very first test by clicking Store w/ A in Window 1. Prove this worked by retrieving/showing in both windows.
- Now in Window 1, change the number to 2150, before clicking Store w/ B and verifying you can retrieve in both windows as usual.
- Next, leaving the number at 2150, click Store w/ A in Window 1. Prove you can retrieve in Window 1.
- Finally, click Show value in Window 2, and see what happens.
Maybe this time, 2150 seemed OK first time round, but it didn't have enough energy left to move something the same size more than once? Who knows. All I know is that localStorage is broken in IE11, and it's not making my job any easier. :(
