使用 jqMobi 进行数据持久化答案

【问题标题】：Data Persistence with jqMobi使用 jqMobi 进行数据持久化
【发布时间】：2012-02-23 17:50:25
【问题描述】：

嗯，我已经通过 Google 搜索进行了排序，我已经通过堆栈溢出进行了排序，但到目前为止我还不知道如何解决这个问题。

我想使用 jqMobi + CSS + HTML 5 为 iphone 构建一个 To Do 程序。我曾使用过 jQuery，使用过 jQuery Mobile 并完成了大量的 css 和 HTML，（尽管很少使用 HTML5）。我需要做的是保存用户在打开程序时生成的列表。

动态生成和链接页面没有问题...但是当您第二次打开程序时，我生成的所有页面（IE 待办事项）都消失了。我知道这是因为它们不是作为基本程序的一部分编写的。我想到解决这个问题的方法是将这些列表保存到文件或数据库中，然后在程序启动时加载它们。

我已经看到使用 Titanium Studio 执行此操作的文档（它支持 SQL lite），但页面的生成和一般 UI 很糟糕。此外，从该代码运行模拟器给我带来了很多麻烦。至少我可以说，在将代码移植到编译状态之前，使用 appMobi 的应用程序进行测试可以为您提供一个不错的模拟器。

无论如何，有谁知道如何通过数据库或文件生成为 jqMobi + CSS + HTML 5 设置数据持久性（在程序重新启动之间）？

编辑 x2： 既然我让你上钩了@ian，你能看看这段代码并告诉我为什么 $.ui.addContentDiv() 似乎没有更新内容吗？ $(#content).append(string);似乎也不想合作。我需要调用一些函数来使其刷新吗？拆了一点还是有问题。奇怪的是，追加到列表工作得很好，但是当我尝试添加该 div 层时，它不存在......

代码如下：

function genPage( id, list, parent ) {
    var content = '<div id="' + id + '" class="panel">' + id + '</div>';    
    var threadLink='<li><a href="#' + id +'">' + id + '</a></li>';      
    $("#" + list).append(threadLink);
    $("#content").append(content);

    //$.ui.addContentDiv(id, content, id);
}

【问题讨论】：

标签： jquery mobile data-persistence jqmobi datapersistance

【解决方案1】：

我是 jqMobi 的首席开发人员，因此很乐意为您解答问题。

我正在制作一个迷你待办事项列表，作为 1.0 版本的演示。我要做的是将数据作为字符串化 JSON 对象存储在 window.localStorage

但如果这是一个 appMobi 应用程序，那么我们有类似的 AppMobi.cache.cookies。唯一的区别是 AppMobi.cache 允许您存储更多数据。

请随时查看http://forums.appmobi.com 以获得更多帮助。

【讨论】：

我想我明白了。我会看看会发生什么，然后告诉你。同时，对于其他关注此内容的人来说，这里是本地存储内容的链接：diveintohtml5.info/storage.html

【解决方案2】：

您是否考虑过使用 PhoneGap？它有一个数据库库，可用于将所有数据保存到 sqlite 数据库。 http://docs.phonegap.com/en/1.5.0/phonegap_storage_storage.md.html#Database

【讨论】：

【解决方案3】：

这是我的第一个技巧，让 json 和 cookie 对任何可能觉得有用的人都有效。它只是一个原型，所以它不会做太多事情。为了简单起见，我已经删除了 AppMobi 的开发环境添加的额外 javascript。

编辑： 看起来 JSON 非常适合数据结构，只要您不尝试做任何特别数据密集型的事情。此外，看起来 appMobi 的 AppMobi.cache 非常适合 cookie。这是我演示基本 cookie 操作/JSON 字符串的迷你脚本。

代码：

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<style type="text/css">
    /* Prevent copy paste for all elements except text fields */
    *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
    input, textarea  { -webkit-user-select:text; }

    /* Set up the page with a default background image */
    body {
        background-color:#fff;
        color:#000;
        font-family:Arial;
        font-size:48pt;
        margin:0px;padding:0px;
        background-image:url('images/background.jpg');
    }
</style>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script> 
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script> 
<script type="text/javascript">

function setCookie() {
    var value = document.getElementById('cookie').value;
    AppMobi.cache.setCookie("test", value, 1);
}

function testbed() {
alert("Trying new things!");
var jsonobj = {"bindings": [
        {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
        {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
        {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
    ]
};

var test = jsonobj.bindings[0].method;
alert(test);
}

function getCookie(){
    var cookie = AppMobi.cache.getCookie("test");
    document.getElementById("cookievalue").innerHTML = cookie;
}

</script>

</head>
<body>
<form action="javascript: setCookie()">
<input type="text" id="cookie" value="set a cookie">
<input type="submit">
</form>

<p id="cookievalue"></p>

<form action="javascript: getCookie()">
<input type="submit" value="Get a Cookie">
</form>

<form action="javascript: testbed()">
<input type="submit" value="try new things">
</form>
</body>
</html>

【讨论】：