Options to store data on desktop, using webpage

问题

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");

回答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...

回答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.

来源：https://stackoverflow.com/questions/24211963/options-to-store-data-on-desktop-using-webpage

标签

javascript

html

local-storage

jstorage