1

Goal:
To sum it up, I'm trying to replace an excel spreadsheet. I'm creating an application that will run in IE9, but does not connect to the internet or an intranet (I know, I know. Just bear with me. If you're curious read more below). It needs to use CRUD (create, read, update, and delete) methods on a set of data that changes daily. The dataset must persist even when the browser is closed.

Question:
What options are available, using javascript and html, for storing data on the local computer the web page is accessed on? I'm doing this at work, so there will be no server-side to this. I also will not be able to install any software on the computer, although I can download javascript plugins. The webpage will be loaded from a file on the computer, using Win 7 and IE9.

Background:
This deserves an explanation. I use an excel spreadsheet to track a set of data that changes daily. I'm learning HTML and javascript, and I can create a much better (and easier to use) solution as a webpage. I can create the UI / UX, but I'm having a difficult time figuring out how to store the data on the local computer. Any good suggestions?

Attempts:
Unfortunately, it seems localStorage is not an option. I'm attempting to use jStorage, but I've been running into problems there, also. A similar set of problems has been encountered using simpleStorage.

Thank you for considering, please let me know if any more info is needed, or if I need to clarify something.

Addendum:
Localstorage, and other forms of HTML5 storage, do not work. Officially it does, unofficially it is very buggy. See blog post here, and SO answer here. Either way, with the following simple code:
HTML:

<!DOCTYPE html>
<html>
    <head>
    <title>Backlog Tracker</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="backlog_localstorage.js"></script>
    </head>
    <body>
    </body>
</html>

and javascript (ref as "backlog_localstorage.js" above):

$(document).ready(function(){
    $("body").append("<button>Try It</button>");
    $("button").click(function(){
    localStorage.setItem("key1", "Hello");
    console.log(localStorage.getItem("key1"));
    });
});

... I get the following error: "SCRIPT5007: Unable to get value of the property 'setItem': object is null or undefined" on the line localStorage.setItem("key1", "Hello");

Community
  • 1
  • 1
Aaron Thomas
  • 5,054
  • 8
  • 43
  • 89
  • @meagar he already said html5 storage wont work. see his link – Zig Mandel Jun 13 '14 at 18:48
  • 1
    @ZigMandel He said localStorage won't work. There are other options for offline data storage in HTML5. – user229044 Jun 13 '14 at 18:48
  • 1
    Since you are using IE, you can use ActiveX to tap into excel for storage. – Matt Cremeens Jun 13 '14 at 18:49
  • write an add-on (assuming IE add-ons let you do similar things to chrome extensions) – Zig Mandel Jun 13 '14 at 18:49
  • 1
    Again. HTML5 storage != localStorage – user229044 Jun 13 '14 at 18:49
  • Have you considered exporting your stuff to JSON, then serving that JSON urlencoded? See http://stackoverflow.com/questions/13405129/javascript-create-and-save-file for a similar question – thykka Jun 13 '14 at 18:54
  • 1
    @meagar so go ahead and point to a *specific* one that works on IE9 and from a local file. – Zig Mandel Jun 13 '14 at 19:16
  • @meager see my added comments under "Addendum" on question. Any specifics to this situation would be helpful. – Aaron Thomas Jun 13 '14 at 19:20
  • Check out http://stackoverflow.com/questions/3665115/create-a-file-in-memory-for-user-to-download-not-through-server – ben author Jun 13 '14 at 19:25
  • @MattCremeens can you point to specifics on implementing ActiveX in this way? In my work environment I doubt changing IE security levels will be an option. Ref [http://msdn.microsoft.com/en-us/library/aa751977.aspx] – Aaron Thomas Jun 13 '14 at 19:44
  • 1
    use an .hta file instead of a .html file, add the tag, and you can use then FSO for unlimted local-folder CRUD (without changing any ie settings). i once wrote a SPA as an HTA that self-modified it's own file inside – dandavis Jun 13 '14 at 19:50
  • @meagar: source of confusion: when i google "HTML5 storage" (your words), all i see is stuff about localStorage, so what else is there that you're alluding to? – dandavis Jun 13 '14 at 19:52
  • @AaronThomas I have used [this](http://www.roseindia.net/javascript/javascriptexamples/javascript-get-excel-file-data.shtml) site with great success. But you are correct, you have to relax some security measures to use this technology. – Matt Cremeens Jun 13 '14 at 19:57
  • Also, if the data you are storing isn't too large, you could use cookies. – Matt Cremeens Jun 13 '14 at 20:07
  • @dandavis very interesting idea. I think this qualifies as an answer, if you don't mind re-typing. – Aaron Thomas Jun 13 '14 at 20:07

2 Answers2

1

HTA (which is really just an html file with one extra tag and a different file extension) is one possible solution for windows users:

Important: Save as demo.hta to run on windows as an app

<!DOCTYPE html> 
<html> <!--   some parts lifted from  
  http://msdn.microsoft.com/en-us/library/ms536496(v=vs.85).aspx 
  http://msdn.microsoft.com/en-us/library/ms536473(v=vs.85).aspx
-->
<head>

  <title>State Saving Demo</title>

  <hta:application id="App" 
    application="yes"
    applicationname="demo" 
    icon="calc.exe"
    border="thin"
    caption="yes"
    sysmenu="yes"
    showintaskbar="yes"
    singleinstance="yes"
    sysmenu="no"
    maximizeButton="yes"
    minimizeButton="yes"
    navigable="no"
    scroll="yes"
    contextmenu="no"
    selection="no"  
    windowstate="normal" >  

     <!-- Use Internet Explorer 10 Standards mode (to use JSON, CSS3, etc...) -->
  <meta http-equiv="x-ua-compatible" content="IE=10">

</head>
<body onload=loadMe() >

<h1 id=h1>Command-line args: </h1>

<h3>Persisted Text</h3>
<textarea rows=20 cols=100 id=mydata onchange=saveMe() >
You can change me and i won't forget!
</textarea>

<script>
document.title+=" - Today is " + Date(); // task/title bar demo
h1.innerHTML+= JSON.stringify( App.commandLine ); // optional invocation info here (much like a real app)

// app-specific custom code:
FILENAME="state.txt";
function saveMe(){save(FILENAME, mydata.value); }
function loadMe(){mydata.value=load(FILENAME) || mydata.value;}

// generic utils: 
function load(filename) {   //IE FSO file Loader
          var file,
              text="", 
              fso= new ActiveXObject('Scripting.FileSystemObject');
          try{
            file = fso.OpenTextFile(filename, 1, false);
            text = file.readAll();
            file.Close();
          }catch(y){}
    return text;
} 

function save(filename, sData){   //IE FSO file Saver
          var file,
          fso = new ActiveXObject('Scripting.FileSystemObject');
          file = fso.CreateTextFile(filename, 2, false);
          file.write(sData);
          file.Close();
    return file;    
}     

</script>
</body>
</html>

I recently re-discovered HTAs, and they are not half bad. I don't think I would want to distribute and maintain them, but HTA's are an easy way to make simple desktop app using HTML, CSS, and JS. Its nice not to have to build anything to "recompile" the app after changes are made. saves a few steps compared to node-webkit, packaged apps, air, cordova, etc, but HTA's have a major downside: they only work on windows afaik...

dandavis
  • 16,370
  • 5
  • 40
  • 36
  • Thank you, even with the downsides this fits the bill perfectly. Thank you! – Aaron Thomas Jun 16 '14 at 14:11
  • What's really interesting is that this opens up the whole ActiveX environment for developing. For example, want an excel spreadsheet instead of text? `var ExcelApp = new ActiveXObject("Excel.Application");` Ref http://msdn.microsoft.com/en-us/library/7sw4ddf8(v=vs.94).aspx. – Aaron Thomas Jun 17 '14 at 17:30
-2

Looks to me like you can use LocalStorage, the big question is how are you trying to store it? You can easily store an object/array into LocalStorage, and that object/array can be your data, then JS can output this into a table. If you're looking to store actual files then you're looking at something more like an ActiveX plugin.

http://caniuse.com/#search=localstorage

Alternatively if you have internet access through a desktop or a phone you can put this on Google Drive. This would be far easier than reinventing the wheel.

MaKR
  • 1,882
  • 2
  • 17
  • 29