Local Storage: How to debug it and why Safari throws errors

on

If you are testing localStorage with files on your machine, you will find that Chrome and Firefox have no problem with this and work normally but Safari refuses to store any key/value pairs when the page is not delivered via a server.

Safari throws the error "SecurityError: The operation is insecure." inside the Debugger (Develop > Show Web Inspector > Debugger) and the Local Storage remains empty (Develop > Show Web Inspector > Storage > Local Storage).

The solution is to either serve remotely or to use MAMP, for example, rather than attempting to load the html directly from your machine. Alternatively, use Chrome and Firefox to test locally.

You can also Disable Local File Restrictions in the Safari Develop menu as a solution.
Thanks to Jiminy Panoz for the reminder on this last point and his recommendation for further reading: Define behavior for `file://` documents' origin.

Locating Local Storage (when Debugging)

In Safari, you can find Local Storage by first going to the Develop menu, then choosing Show Web Inspector, selecting the Storage tab and then selecting Local Storage from the side menu. (Note: If the Develop menu is not available, go to Safari > Preferences... and then the Advanced Tab, at the bottom of the window is a checkbox to display the Develop menu.)

In Chrome, select the View menu, the Developer... submenu, the Developer Tools, followed by the Application tab and Local Storage from the side menu.

In Firefox, select the Tools menu, the Web Developer submenu, followed by the Storage Inspector (Shortcut: Shift + F9) and Local Storage from the side menu.

Test file

Use this test code, loading it locally and then go to the local storage viewer in each browser to see the results. 
<!DOCTYPE html>
<html>
<head>
<script>
localStorage.setItem("test_key", "test_value");
</script>
</head>
<body>
</body>
</html>



Comments

Post a Comment