How can I store persistent data with JS/JQuery using the file:/// protocol and IE/Edge browser?

Question

I'm currently writing a small web page application where users can dynamically drag and drop links to files and pages on a customisable homepage.

It is written in Html5 and Javascript/Jquery mobile. The page will be stored on the local machine and accessed with the 'file:///' protocol, using the Internet Explorer / Microsoft Edge webbrowser.

I'm trying to find a way to store the data that resembles the customized page and links, so that when the user opens the page again the links will still be there and can be edited and customized further.

So far I've been looking into HTML localStorage, but this doesn't work with IE/Edge through the 'file:///' protocol, the page will not be hosted. I was thinking of just creating a file with all the data in there, but I don't believe that is possible either due to security reasons.

I have not alot of experience with javascript, so any help is appreciated!

you might be able to adjust security settings in browser itself but getting free hosting for simple html apps is easy to find and probably best approach — charlietfl, Jan 16 '16 at 21:51
See http://stackoverflow.com/questions/30563157/edit-save-self-modifying-html-document-format-generated-html-javascript — guest271314, Jan 16 '16 at 22:01
@charlietfl I want to keep the webpage offline, there must be a different way of storing persistent data? — Chris, Jan 16 '16 at 22:12
@guest271314 Thanks for the link, but not really useful. I'm sorry. — Chris, Jan 16 '16 at 22:12

Alvaro Montoro · Answer 1 · 2016-01-17T03:25:26.100

If you only want it to work on Internet Explorer/Microsoft Edge, a simple way to persist data would be using cookies. They will work even using the file:// protocol, and the only thing would be setting a far away expiration date (in the example below: 2/2/2222).

Try this sample code (part of it comes from this site) that will count the number of times a page has been loaded. Notice how the counter is kept even after closing the browser and reopening it:

<!doctype html>
<html>
  <head>
    <title>Persistent Data With Cookies In IE</title>
  </head>
  <body>

    Number of reloads: <span id="num">-</span>

    <script>
    function setCookie(name, value)
    {
      var expiry = new Date(2222,2,2);
      document.cookie = name + "=" + escape(value) + "; path=/; expires=" + expiry.toGMTString();
    }

    function getCookie(name)
    {
      var re = new RegExp(name + "=([^;]+)");
      var value = re.exec(document.cookie);
      return (value != null) ? unescape(value[1]) : null;
    }

    var cookieVal = getCookie("num");
    var num = cookieVal != null ? cookieVal : 0;
    document.getElementById("num").innerHTML = num;    
    setCookie("num", parseInt(num) + 1)
    </script>
  </body>
</html>

Pros of this solution:

Simple and easy to implement.
Works with the file:// protocol in IE and Edge (as specified in question) and also in Firefox.

Cons of this solution:

Limited storage space.
Doesn't work with the file:// protocol in Chrome (not required in question).

How can I store persistent data with JS/JQuery using the file:/// protocol and IE/Edge browser?

1 Answers1