We Keep Coding

IE 11 - Loacalstorage with an event listener to refresh the pages in other Browser tabs when logged out from one tab, does not work in IE

I am sure , this question in some or the other way, has surfaced in SO a lot of times, but nothing really helped me.
I will get to the point,
I have opened multiple tabs of my application. And while logging out from one tab, should refresh the other tabs.
So the code i wrote is this,
localStorage.setItem('logout-event', 'logout' + Math.random());
and
window.addEventListener('storage', function (event) {
if (event.key == 'logout-event') {
$('<div>You are logged out. The page will be refreshed.</div>', { id: "confirmBox" }).dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
window.location.reload(true);
},
}
});
}
}, false);
This works in every other browsers, except IE. I know there are options like sessionStorage, postMessage etc etc. I would be grateful if i get an answer which is similar to localstorage, but that works for IE.
Thank you.
Edit: I should have mentioned that I know IE 11 doesn't support it, as I had researched on it for quite some time, and I am looking for an alternate inbuilt code approach. I am sorry, but I do not want to know whether IE support it or not, I want to achieve the task that I have mentioned above in an alternate approach without any new references or extensions, if any. Thank you for all the responses. I am currently trying to make custom events. Not sure that will work. Meanwhile looking for a good alternate approach. Thank you again everyone.

Please visit below-mentioned sites for more information about browser compatibility of storage API
https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
https://caniuse.com/#feat=mdn-api_storageevent
https://caniuse.com/#search=storage
as the storage event API is not supported with IE but the latest version of edge<18.

Though this already has a good answer here, I'll still explain how it works. When you're testing a local file window.localStorage is not accessible in IE. You can verify that by typing window in console and scrolling down to local storage. It should say something like Permission denied. While you can can still access the localStoarage as a HTTP website. There's a fix to this issue here (The second answer).
Edit - For IE if you actually check localStorage in window Object. You will see null, It says Permission Denied in Edge.

Service Worker Install fails: "cannot read property 'addAll of undefined"

So I'll keep this succinct: When trying to install, my service worker fails. This is all of my code in sw.js:
var cacheName = 'randomstring';
var filesToCache = [ '/' ];
self.addEventListener('install', function (e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName)
.then(function (cache) {
console.log('[ServiceWorker] About to fail');
return cache.addAll(filesToCache);
})
);
});
I get an exception because cache is undefined (on the cache.addAll bit).
Not really sure why this is the case?
I've used service workers before and never encountered this issue. This is my first time using a service worker with an ASP.Net back-end though, so not sure if that's the problem?

So, I figured this out. I was going to vote to close the question, but I figured I'd leave it here as I saw some other people with this issue who didn't know how to resolve it. Even though it's super-stupid :) (or more accurately, I am).
So I was running the website via the "Play" button, aka "Start Debugging", which, in Visual Studio 2017, launches a special Chrome window, in which the above error will be thrown.
To work around the issue, I can (or you can, internet traveller of the future) simply start without debugging, host the website in IIS, etc.
EDIT: If there's a better workaround where I can use the service worker in debug mode, please suggest it and I'll mark that as the answer. For my specific problem though, the above workaround is fine :).

Encountered the same problem and found some other ways.
VS recognises "chrome.exe" while debugging and adds some parameters, that´s why service workers won´t working.
There is an option Debug => Option => Debugging => General => Enable javascript debugging for asp.net (Chrome, Edge and FireFox). If you don´t want to use js debugging in vs - like me because i use chrome for js debugging - just deactivate this option and service workers will work.
VS Enable JS Debugging in Chrome
Alternatively you can add chrome as a new "browser" and switch the browser for debugging. Because vs recognise "chrome.exe" make a symlink via administative commandline "mklink chromedirect.exe chrome.exe" and add it as new browser in visual studio.
This can be done under the "Play" context menu => Browse with.
VS Play Context Menu
Just add chromedirect.exe without any arguments and a friendly name like "Google Chrome Direct". After that you can switch to the browsers and select if you want VS JS Debugging or not.

HTML transient modal window

We have a legacy web application. At various places it opens a window with the help of Privilege Manager on Firefox to get the needed result.
Some of these windows open a Java applet or a PDF document.
The client machines are updating Firefox and Privilege Manager is gone.
What is the easiest way around it?
The problems are :
There must be only one instance of the pop-up at anyone time. This could be done by selecting appropriate window name on window.open() call.
If the window is opened again (by means of user action), it should not reload but just focus to bring it to the foreground (I have seen I can keep a reference to the window on JavaScript to do that)
It basically really must be transient/modal so that the client cannot leave the current page or reload or any other kind of interaction with the parent window (except opening/refocusing the child window) without closing the child window first. I have no idea how to do that.
Do anyone has an idea how to do that?
The client is only Firefox (it works in a special kiosk configuration) on Linux.
I read somewhere that I could somehow write an extension but I am basically clueless about extensions and its API.
Edit1:
Example of (simplified) legacy code. Not really sure if all the permissions were required, but this is it: This function opens a window that stays over the parent window and prevents any interaction from the user with the parent window.
function fWindowOpen(url, name) {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
netscape.security.PrivilegeManager
.enablePrivilege("CapabilityPreferencesAccess");
netscape.security.PrivilegeManager
.enablePrivilege("UniversalPreferencesWrite");
netscape.security.PrivilegeManager
.enablePrivilege("UniversalPreferencesRead");
netscape.security.PrivilegeManager.enablePrivilege("UniversalFileRead");
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
window.open(
url,
name,
"screenX=70,dependent=yes,menubar=0,toolbar=0,width=900,height=700,modal=1,dialog=1"
);
}
function fnCapture(){
fWindowOpen("/path/to/document_or_japplet/page","_blank");
}
HTML:
<button value="Capture" property="btnCapture" onclick="javascript:fnCapture();"/>
Edit2: Solution
On a typical extension, on the xul code, define this javascript code:
var dialogExt = {
listener: function(evt) {
// Do work with parameters read through evt.target.getAttribute("attribute_name")
window.openDialog(evt.target.getAttribute("url"), evt.target.getAttribute("name"), evt.target.getAttribute("features"));
}
}
// from examples
document.addEventListener("dialogExtEvent", function(e){ dialogExt.listener(e); }, false, true);
Then, on the web page:
var element = document.createElement("dialogExtElement");
element.setAttribute("url", url);
element.setAttribute("name", name);
element.setAttribute("features", features);
document.documentElement.appendChild(element);
var evt = document.createEvent("Events");
evt.initEvent("dialogExtEvent", true, false);
element.dispatchEvent(evt);
Now, maybe I am missing some security checks to let the code work if it originates from the same host, and how to handle a reference to the document that requested the dialog as means of interaction between the dialog window and it's opener.

The Privilege Manager was deprecated in Firefox 12 and removed in Firefox 17 (briefly restored).
You might want to look into Window.showModalDialog(). However, it is deprecated and is expected to go away within the year, or in 2016 if you go with an extended service release (ESR) of Firefox 38. It may be a temporary solution while you develop an extension.
In order to accomplish the same tasks, you will need to write an extension and ask the user to install it (from Bypassing Security Restrictions and Signing Code, the old information about Privilege Manager):
Sites that require additional permissions should now ask Firefox users to install an extension, which can interact with non-privileged pages if needed.
It is possible to write such an extension using any of the three different extension types:
XUL overlay
Restartless/Bootstrap
Add-on SDK
For the first two types, you would use window.open(). The modal option is in "Features requiring privileges". You will probably also want to look at Window.openDialog().
For the Add-on SDK, you would normally use the open() function in the SDK's window/utils module. Here, again, you will probably want to look at openDialog().
It appears you may be opening content that is supplied from the web in these modal windows. It is unlikely that you will get an extension approved to be hosted on AMO which opens content in such windows which in not included in the add-on release. This does not mean you can not develop the extension and have it installed on your kiosk clients without hosting it on AMO. However, there are additional restrictions in development for Firefox this year which will make this significantly more difficult, see: "Introducing Extension Signing: A Safer Add-on Experience".

You should be able to get similiar window.open behavior, including support for the modal option from the sdk's window/utils module.
You will have to install the onclick listener with a content script, send a message to the addon-main through its port and then open that window from the addon main.

Recover javascript logs and errors on Internet Explorer without F12 tool

The main idea is to run a random page on Internet Explorer and get javascript errors and logs.
Is there a way to recover javascript console logs and execution error
from a random web page without accessing the F12 tool on Internet
Explorer?
I found that with Chrome based browser, you can get it on your AppData file log by adding --enable-logging --v=1 args when launching.
Any solution with any language are welcome.
Thank you for your answer.
NOTE :
random page on Internet Explorer means that I do not have the access on the source code.

Basic solution to this would be:
1. Use Exception Handling to catch the errors.
2. Log errors in a Global Array
3. Log the errors in a file using Blob and URL.createObjectURL. All recent browsers support this.

Have you considered using a Bookmarklet that:
Overrides window.console.log and window.console.error (to intercept messages)
Logs incoming messages somewhere using createObjectURL?
Or you could use something like firebuglite and auto-enable it like this:
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js">
{
overrideConsole: false,
startInNewWindow: true,
startOpened: true,
enableTrace: true
}
</script>
More instructions are here: http://getfirebug.com/firebuglite

If the F12 tool is not of your interest, then what about the Event Viewer? Open Event Viewer from Control Panel -> System and Security -> Administrative Tools -> Event Viewer.‌ Then select the log Applications and Services Logs\Internet Explorer.
By default no events are being logged for Internet Explorer, to enable them create a new DWORD registry value named Feature_Enable_Compat_Logging under the following registry key:
HKCU\SOFTWARE\Microsoft\Windows\Internet Explorer\Main \FeatureControl
and set the registry value to 1.
Check the logs you get to see if it's what you're looking for.

One idea would be to write a browser extension which listens for window.onerror and writes to a file. Definitely not as elegant as the Chrome solution, but it would work fairly well.

Using local proxy might be a good one-time solution.
Charles web debugging proxy app has nice UI and it allows to replace any response with local resource.
So basically you'll need:
Download one any of the js files used on target page
add any code you wish to saved version
set up Charles to serve you your local version instead of remote one

You might try Fiddler. It's got its own logging and has amazing inspection power. It won't capture IE specific errors, since it's at a different layer, but it will definitely get you any code that's coming over the wire.

Access Denied for localstorage in IE10

Yesterday I installed Windows 8 and am now trying to understand why I am getting an "Access Denied" message when accessing localstorage. The page is being served on the same PC with the browser (http://localhost). My feeling is that one of the security settings in IE 10 is wrong, but I haven't figured out which one.
The line of JavaScript code triggering the error is:
if(window.localStorage.getItem('phone') == null)
The code works fine in the latest version of Chrome.

Our users were having issues with web sites using the LocalStorage feature (including Twitter) on Windows 8 with IE 10. When accessing one of these sites with the F12 Developer Tools open, a SCRIPT5: Access is denied message appeared on the console.
After working with Microsoft support, we identified the cause. It turned out to be a problem with the settings on the C:\Users\username\Appdata\LocalLow folder in their user profile.
Each folder on your computer has an integrity setting. More information about the purpose of this setting is here: http://msdn.microsoft.com/en-us/library/bb625964.aspx
The integrity setting on the AppData\LocalLow folder (and its subfolders) in each user's profile is supposed to be set to "Low" (hence the name). In our case, the integrity level was not set correctly on this folder. To rectify the problem, run the following command in a command prompt window:
icacls %userprofile%\Appdata\LocalLow /t /setintegritylevel (OI)(CI)L
(If there is more than one user account on the computer and the other users are having the same issue, the command needs to be run under each affected user's account.)
As for how this setting got changed in the first place? In our case, it was caused by a problem in the customized Windows 8 image we deployed to our workstations. For others that are having the issue, my research has revealed that the use of a "system cleaner" utility may be to blame.

Doubtless there might be many causes of the same symptoms, but here is what fixed this issue for me.
I had just one of many Windows 7 PCs with IE11 exhibiting the symptom of "Access Denied" on attempting any JavaScript involving window.localStorage from otherwise reputable and well-behaved web sites. Use of Process Explorer revealed that the proximal cause was an ACCESS DENIED when taskhost.exe (acting on behalf of Internet Explorer) tried to open DOMStore\container.dat for Generic Read-Write. In fact, it was worse than that: if I deleted container.dat, the same ACCESS DENIED occurred, even through the file did not exist any more. And, if I deleted the (hidden) DOMStore folder, when taskhost.exe attempted to recreate it, that received ACCESS DENIED as well.
After two days of chasing false leads, the final solution was this:
The registry entry:
HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\LowCache\Extensible Cache\DOMStore\CachePath
(do note the LowCache in that string) was incorrectly set to:
%USERPROFILE%\AppData\Local\Microsoft\Internet Explorer\DOMStore
when it should be:
%USERPROFILE%\AppData\LocalLow\Microsoft\Internet Explorer\DOMStore
with the consequence that low-integrity localStorage requests were being directed to medium-integrity regions of AppData disk storage, thus generating ACCESS DENIED errors, and killing the use of JavaScript window.localStorage.
This registry entry must have been wrong for many years: perhaps a side-effect of enthusiastic take-up of buggy platform previews and so on. This error survived a total removal and re-installation of IE11.
There is a similar-looking registry entry for the medium-integrity cache:
HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\Cache\Extensible Cache\DOMStore\CachePath
and that is correctly left as:
%USERPROFILE%\AppData\Local\Microsoft\Internet Explorer\DOMStore
and should not be changed.

Try enabling the Enhanced Protected Mode in the IE settings, under the Advanced tab, in the Security sub-list. This enables the Microsoft XSS filter. I had similar issues when logging into SE, and fetching google+ notifications, and my first workaround was starting IE with admin privileges. But I think the EP mode will do the trick in your case too.
Related links: Understanding Enhanced Protected Mode

Mark Russinovich always says: "when in doubt, use Process Monitor":
localStorage data gets stored in XML files in the following folder:
C:\Users\[USERNAME]\AppData\Local\Microsoft\Internet Explorer\DOMStore
A profile of the file activity while reproducing the issue can tell you if the problem is caused by missing file access permissions or maybe even an anti-virus program.
I can reproduce the error by adding the read-only attribute to "DOMStore\container.dat". You should check if all file/folder permissions and attributes are set correctly. On my machine, admins and my own account have full permission for the mentioned folder.

Go to Tools/Internet Options/Advanced and under 'Security' select 'Enable DOM Storage' checkbox. This should fix the problem

I added the websites involved to the Trusted Sites section of IE and have not received the error again.

In addition to the already excellent answers here, I'd like to add another observation. In my case, the NTFS permissions on the Windows %LOCALAPPDATA% directory structure were somehow broken.
To diagnose this issue. I created a new Windows account (profile), which worked fine with the localStorage,so then I painstakingly traversed the respective %LOCALAPPDATA%\Microsoft\Internet Explorer trees looking for discrepancies.
I found this gem:
C:\Users\User\AppData\Local\Microsoft>icacls "Internet Explorer"
Internet Explorer Everyone:(F)
I have NO idea how the permissions were set wide open!
Worse, all of the subdirectories has all permissions off. No wonder the DOMStore was inaccessible!
The working permissions from the other account were:
NT AUTHORITY\SYSTEM:(OI)(CI)(F)
BUILTIN\Administrators:(OI)(CI)(F)
my-pc\test:(OI)(CI)(F)
Which matched the permissions of the parent directory.
So, in a fit of laziness, I fixed the problem by having all directories "Internet Explorer" and under inherit the permissions. The RIGHT thing to do would be to manually apply each permission and not rely on the inherit function. But one thing to check is the NTFS permissions of %LOCALAPPDATA%\Microsoft\Internet Explorer if you experience this issue. If DOMStore has broken permissions, all attempts to access localStorage will be met with Access Denied.

This issue may also be caused by having missing or corrupted registry entries. If a reset does not resolve the issue, the LocalLow folder has the correct integrity level, and the DOMStore registry value is correct, run the below commands to re-register IE in the profile:
32 Bit OS:
C:\WINDOWS\system32\ie4uinit.exe -BaseSettings
64 Bit OS:
C:\WINDOWS\system32\ie4uinit.exe -BaseSettings
C:\Windows\SysWOW64\ie4uinit.exe -BaseSettings
See the IE MSDN blog for more details.