Javascript/HTML Storage Options Under File Protocol (File://)

Javascript/HTML Storage Options Under File Protocol (file://)

A buddy of mine at work helped me out with this problem by sharing his implementation of using window.name to store data across pages of a single window/session.

A similar implementation (and discussion around the method) can be found here: http://ajaxian.com/archives/whats-in-a-windowname

Preliminary tests I've been doing on this method look very promising. I tested this, under the file protocol (loading page from desktop, a.k.a. - "file:\") on the following browsers. It worked on all of them!!

IE 6
IE 7
IE 8
IE 9
FF 3.6
FF 4
Chrome 11
Opera 10
Safari 4

I have not yet done any testing as to how much data you can store here, but the internets seem to agree on a value of 2 MB.

Sources, links, more information

JavaScript Programmer's Reference (Google Books)
Cookie-less Session Variables in JavaScript - Sitepoint Article

Any alternative for JS storage under file protocol?

You can:

Bundle it by using Cordova or Electron
Use Node.js + lite-server
Use some free hosting service, my prefered solution would be Firebase as you would get a free yourGame.web.app domain, certificate and storage. You could set it up in less than an hour. To be honest, this is what I would do as it would be easiest for your friends to access the game too.

localStorage access from local file

When you are opening the files locally, i.e. using the file:// protocol, as of now the browsers can not determine what is "same domain" so every file is considered a separate domain. Thus you can not use localStorage when you're opening the files.

Here is some more information on the problem in FireFox: https://bugzilla.mozilla.org/show_bug.cgi?id=507361 . Personally I couldn't find much about Safari on this topic.

You can also look over this: Javascript/HTML Storage Options Under File Protocol (file://) . It might be helpful in your situation.

localStorage fallback attempt on file:// protocol

Your localStorage var declared inside if is hoisted to the top of the function and it shadowed the global localStorage variable.

One solution to this may be setting local localStorage to global value at the top:

$(document).ready(function(){
    var localStorage = window.localStorage;
    if(supportLocalStorage() !== true){
        alert("boo"); 
        localStorage = {
            getItem: function (key) {
                if(window.name == null || window.name == "")
                    return "{}"; //Later i'm about to use JSON Parser.
                return window.name;
            },
            setItem: function (key, val) {
                window.name = val;
            }
        }

    }

    var products_list = localStorage.getItem("products");
}

Running local HTML file with http protocol

If you have Python installed, type ...

python -m SimpleHTTPServer 8000.

If you have Ruby installed, type ...

ruby -run -e httpd . -p 8000

... in your cmd.exe or Terminal.app

This will launch a very simple http-server that serves your current folder as a http-context.

Resulting URL

http://localhost:8000

How to launch html using Chrome at --allow-file-access-from-files mode?

Search for the path of your Chrome executable and then, on your cmd, try :

> "C:\PathTo\Chrome.exe" --allow-file-access-from-files

Source

EDIT :
As I see on your question, don't forget that Windows is a little bit similar to Unix, so when you type "chrome ...", cmd will search for Chrome in the PATH, but in general the Chrome folder isn't on the PATH. Also, you don't specify an extension for your executable... So if you move to Chrome's folder, this command will probably work too :

> .\chrome.exe --allow-file-access-from-files

using javascript?

The issue is that your embedded script is going to execute immediately when the page loads (or even before the page loads, since it looks as though you're placing it in the <head> of the document). And since at that time pages.default does not equal 1, nothing will happen. To fix, you could simply update your click handler to invoke ChangeSheet:

<button onclick="ChangeSheet('design1.css')">Default</button>

EDIT: I see your update. As another user mentioned in a comment, you will need to use some kind of persistence mechanism to store the user's preferred stylesheet. However, if you're following that tutorial in the YouTube video, then you're probably running your HTML and JavaScript from your local file system (the file:/// protocol), so presumably you can't use cookies or localStorage and you don't have a server to store the user's preference on. Your options for persistence are extremely limited, but you can use the window.name property to persist some data (see Javascript/HTML Storage Options Under File Protocol (file://)). This is not the best solution (it's kind of a hack) but it's probably the only one that will work for your example.

HTML (and embedded JS):

<!doctype html>
<html>
<head>
    <link id = "pagestyle" rel="stylesheet" type="text/css" href="default.css">
    <script src="./swap.js"></script>
    <script type="text/javascript">
       if (window.name) {
            ChangeSheet(window.name);
        }
    </script>
</head>
<body>
    <button onclick="ChangeSheet('design1.css')">Design 1</button>
    <button onclick="ChangeSheet('design2.css')">Design 2</button>
</body>
</html>

swap.js:

function ChangeSheet(sheet)
{
    window.name = sheet;
    document.getElementById('pagestyle').setAttribute('href', sheet);

}

design1.css (of course you can change to whatever styles you want) :

body {
    background-color: blue;
}

design2.css (of course you can change to whatever styles you want):

body {
    background-color: red;
}

After setting one of the styles, try refreshing the page, and notice that your style preference persists, or if you have other pages to load you can try navigating back and forth between them.

Local storage saved from external domain javascript doesn't get saved under external domain

Whenever browser-side JavaScript needs to care about the origin, it uses the URL of the page hosting the JavaScript to determine it.

This is the only reasonable way to approach it, because you would otherwise have a huge security hole.

Jo Evil Hacker would simply <script src="http://example.org/yourScript.js"></script> and then call functions in it to get the cookies which should be kept private from them.

Javascript/HTML Storage Options Under File Protocol (File://)