使用网页在桌面上存储数据的选项 [英] Options to store data on desktop, using webpage

查看:122
本文介绍了使用网页在桌面上存储数据的选项的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

目标:

总结一下,我试图替换一个excel电子表格。我创建的应用程序可以在IE9中运行,但不会连接到互联网或内联网(我知道,我知道,只需要忍耐一下,如果您好奇,请阅读下文)。它需要对每日更改的一组数据使用CRUD(创建,读取,更新和删除)方法。即使浏览器已关闭,数据集也必须保留。



问题:

使用javascript和html,可以使用哪些选项来存储数据本地计算机的网页访问?我在工作中这样做,所以不会有服务器端的问题。我也无法在电脑上安装任何软件,虽然我可以下载JavaScript插件。该网页将从计算机上的一个文件中加载,使用Win 7和IE9。



背景:

这值得解释。我使用Excel电子表格来跟踪每天更改的一组数据。我正在学习HTML和JavaScript,并且我可以创建一个更好(更易于使用)的解决方案作为网页。我可以创建UI / UX,但我很难搞清楚如何将数据存储在本地计算机上。任何好的建议?

尝试:

不幸的是,它似乎 localStorage不是一个选项。我试图使用jStorage,但我也一直在遇到问题。使用 simpleStorage 时遇到类似的问题。



感谢您的考虑,请让我知道是否需要更多信息,或者我需要澄清一些事情。



附录:

本地存储和其他形式的HTML5存储不起作用。它正式的,非官方的,它是非常不错的。查看博客文章这里,并且回答此处。无论哪种方式,使用以下简单代码:

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>

和javascript(参考上面的backlog_localstorage.js):

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

...我得到以下错误:SCRIPT5007:无法获取属性的值setItem ':object is null or undefined'on the line localStorage.setItem(key1,Hello);



重要:另存为demo.hta以作为应用程序在Windows上运行

 < ;!DOCTYPE html> 
< html> <! - 某些部分从
解除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>状态储存演示< / 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>

<! - 使用Internet Explorer 10标准模式(使用JSON,CSS3等) - >
< meta http-equiv =x-ua-compatiblecontent =IE = 10>

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

< h1 id = h1>命令行参数:< / h1>

< h3>持久性文字< / h3>
< textarea rows = 20 cols = 100 id = mydata onchange = saveMe()>
你可以改变我,我不会忘记!
< / textarea>

< script>
document.title + = - 今天是+ Date(); //任务/标题栏演示
h1.innerHTML + = JSON.stringify(App.commandLine); //可选的调用信息在这里(很像真正的应用程序)

//特定于应用程序的自定义代码:
FILENAME =state.txt;
函数saveMe(){save(FILENAME,mydata.value); }
函数loadMe(){mydata.value = load(FILENAME)|| mydata.value;}

// generic utils:
function load(filename){// IE FSO文件Loader
var file,
text =,
fso = new ActiveXObject('Scripting.FileSystemObject');
尝试{
file = fso.OpenTextFile(filename,1,false);
text = file.readAll();
file.Close();
} catch(y){}
返回文本;


函数save(filename,sData){// FS FSO文件Saver
var file,
fso = new ActiveXObject('Scripting.FileSystemObject');
file = fso.CreateTextFile(filename,2,false);
file.write(sData);
file.Close();
返回文件;
}

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

我最近重新发现了HTA,并且它们并不坏。我不认为我想分发和维护它们,但HTA是使用HTML,CSS和JS制作简单桌面应用程序的简单方法。它是很好的,不必编译任何东西来进行更改后重新编译应用程序。与node-webkit,打包的应用程序,air,cordova等相比节省了一些步骤,但HTA有一个主要的缺点:它们只能在windows afaik上运行...


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

解决方案

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

这篇关于使用网页在桌面上存储数据的选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆