将文本值保存到列表视图并开始计算时间答案

【问题标题】：save text value to listview & start count the time将文本值保存到列表视图并开始计算时间
【发布时间】：2014-01-11 12:15:49
【问题描述】：

我有两个主要问题，我真的可以帮助解决。我已经在没有任何帮助的情况下用谷歌搜索和搜索了一天，但如果你知道我可能没有看过的任何链接或任何有帮助的网站，然后给我。我会很感激，或者如果你已经有代码/示例代码，会有所帮助:-)

我现在使用 PhoneGap 和 JQuery Mobile，事情就是这样。我有一个'textarea'，在那里你写了一些东西，然后是一个保存按钮，我想要它做的是当我按下保存按钮时，我在 textarea 中写入的文本值将保存在另一个页面的列表视图中应用程序。我查看了“localstorage”，但没有正常工作。

(另外，如果你在 textarea 中写了一些东西，然后按下取消按钮，那么下次你进入该页面时，应该删除 textarea 中的文本。)

第二个问题是：当我按下保存按钮时，它应该开始计数，以秒、分钟、小时、天为单位。像这样想。我在文本区域中写“牙刷”并按保存，现在当我转到列表视图页面时，我可以看到它在列表视图中显示牙刷，在文本旁边显示 1m、5m、1h，它只是在上次更新时更新我购买或更换牙刷的时间，所以下次我打开应用程序时，我可以看到“TOOTHBRUSH: 4Days, 16HRS, 52MINS AGO”。这样我就可以检查我什么时候买了东西，或者改变了什么。

这是我的代码，包括 html 和 .js，我应该怎么做才能让这个任务奏效。你们有什么建议、网站或代码有帮助吗？

非常感谢。

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Last Time I Did It!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="lib/jquery-1.6.4.js"></script>
    <script src="lib/jquery.mobile-1.1.0.js"></script>
    <link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
    <link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
</head>
<body>
<div data-role="page" id="page1">
        <div data-role="header">            
            <h1>Last time I did it</h1>
        </div>
        <div data-role="content"></div>
        <div data-role="footer">
        <div data-role="navbar">
            <ul>
               <li>
                  <a data-role="button" href="#page2" data-transition="slide" id="add" data-rel="page">ADD</a>
               </li>
               <li>
                  <a data-role="button" href="#page2" data-transition="slide" id="show" data-rel="page">SHOW</a>
               </li>
            </ul>
        </div>
        </div>
   </div>
   <div data-role="page" id="page2">
       <div data-role="header">            
           <h1>Add event</h1>
       </div>
       <div data-role="content">
       <textarea></textarea>
       </div>
       <div data-role="footer">
          <div data-role="navbar">
              <ul>
                 <li>
                    <a data-role="button"  href="#page3" data-transition="slide" id="save">SAVE</a>
                 </li>
                 <li>
                    <a data-role="button" href="#page1" id="cancel" data-transition="slide" data-direction="reverse" data-rel="page">CANCEL</a>
                 </li>
              </ul>
          </div>
      </div>
   </div>
   <div data-role="page" id="page3">
      <div data-role="header">
        <a href="#page2"  class="ui-btn-left" data-rel="back" data-transition="slide">Back</a>
        <h1>Events</h1>
      </div>
      <div data-role="content">
        <ol data-role="listview" id="orderedList" data-inset="true"></ol>
      </div>
      <div data-role="footer">
         <div data-role="navbar">
          <ul>
            <li>
                <a data-role="button" id="edit">EDIT</a>
            </li>
            <li>
                <a data-role="button" id="delete">DELETE</a>
            </li>
          </ul>
         </div>
      </div>
      </div>
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>
</html>

还有我几乎是空的 -js 代码。

$(document).on('pagebeforeshow', '#index', function(){ 
  $(document).on('click', '#add', function(){        
    $.mobile.navigate( "#page2", { transition : "slide", info: "info about the #bar hash" });
  });   
});

function save ()
{
   var fieldValue = document.getElementById('textarea').value;
   localStorage.setItem('content', orderedList);

}

编辑：

这是我的新 html 和 js 文件，在查看了您很棒的代码示例之后，但是当我在手机上使用 phonegap 运行它时，仍然不会显示保存、取消、时间甚至保存的文本.

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Last Time I Did It!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="lib/jquery-1.6.4.js"></script>
    <script src="lib/jquery.mobile-1.1.0.js"></script>
    <link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
    <link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">            
    <h1>Last time I did it</h1>
</div>
<div data-role="content"></div>
<div data-role="footer">
    <div data-role="navbar">
        <ul>
            <li>
                <a data-role="button" href="#page2" data-transition="slide" id="add" data-rel="page">ADD</a>
            </li>
            <li>
                <a data-role="button" href="#page3" data-transition="slide" id="show" data-rel="page">SHOW</a>
            </li>
        </ul>
    </div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">            
    <h1>Add event</h1>
</div>
<div data-role="content">
    <textarea id="newItemText"></textarea>
</div>
<div data-role="footer">
    <div data-role="navbar">
        <ul>
            <li>
                <a data-role="button"  href="#" data-transition="slide" id="btnSave">SAVE</a>
            </li>
            <li>
                <a data-role="button" href="#page1" id="btnCancel" data-transition="slide" data-direction="reverse" data-rel="page">CANCEL</a>
            </li>
        </ul>
    </div>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
    <a href="#page2" class="ui-btn-left" data-rel="back" data-transition="slide">Back</a>
    <h1>Events</h1>
</div>
<div data-role="content">
    <ul data-role="listview" id="orderedList" data-inset="true">
    </ul>
</div>
<div data-role="footer">
    <div data-role="navbar">
        <ul>
            <li>
                <a data-role="button" id="edit">EDIT</a>
            </li>
            <li>
                <a data-role="button" id="delete">DELETE</a>
            </li>
        </ul>
    </div>
</div>
</div>
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>
</html>

还有 JS 文件。

$(document).on('pagebeforeshow', '#page3', function(){ 
//setup the current list

if(localStorage.getItem('TaskList')){
    var TheList = [];
    TheList = JSON.parse(localStorage.getItem('TaskList'));
    var items = '';

    for (var i = 0; i < TheList.length; i++) {
        items += '<li><h3>' + TheList[i].text + '</h3><p>' + timeAgo( (new Date(TheList[i].time).getTime())/1000) + ' ago<p></li>';
    }

    $('#orderedList').empty().append($(items)).listview('refresh');

}

});


$(document).on('pageinit', '#page2', function(){ 

$('#btnCancel').on("click", function(){
    $('#newItemText').val(''); //CLEAR TEXT AREA
});

$('#btnSave').on("click", function(){

    var TheList = [];
    if(localStorage.getItem('TaskList')){
        TheList = JSON.parse(localStorage.getItem('TaskList'));
    }
    var newitem = $('#newItemText').val(); 
    var task = {text: newitem, time: new Date() };
    TheList.push(task);
    localStorage.setItem('TaskList', JSON.stringify(TheList));

    $('#newItemText').val(''); //CLEAR TEXT AREA
    $.mobile.navigate( "#page3", { transition : "slide" });

});

});

function timeAgo(time){
var units = [
{ name: "second", limit: 60, in_seconds: 1 },
{ name: "minute", limit: 3600, in_seconds: 60 },
{ name: "hour", limit: 86400, in_seconds: 3600  },
{ name: "day", limit: 604800, in_seconds: 86400 },
{ name: "week", limit: 2629743, in_seconds: 604800  },
{ name: "month", limit: 31556926, in_seconds: 2629743 },
{ name: "year", limit: null, in_seconds: 31556926 }
];
var diff = (new Date() - new Date(time*1000)) / 1000;
if (diff < 5) return "now";

var i = 0;
while (unit = units[i++]) {
if (diff < unit.limit || !unit.limit){
  var diff =  Math.floor(diff / unit.in_seconds);
  return diff + " " + unit.name + (diff>1 ? "s" : "");
}
};
}

解决方案：

JSFiddler 代码示例，演示非常完美，基于 jQuery 1.9.1 和 jQuery Mobile 1.3.0b1，我使用的是 1.6.4 和 1.1.0。更新这两个 .js 文件后，PhoneGap 一切正常！

【问题讨论】：

标签： javascript jquery html jquery-mobile cordova

【解决方案1】：

这是一个DEMO

您的问题中有很多问题，所以我可能无法回答所有问题。要将 localStorage 与“任务”数组一起使用，您在保存时使用 JSON.stringify，在检索时使用 JSON.parse。

因此，每次显示 page3 时，您都会从 localStorage 中检索当前的项目列表，创建列表项目，清空列表，然后附加创建的项目：

$(document).on('pagebeforeshow', '#page3', function(){ 
    //setup the current list    
    if(localStorage.getItem('TaskList')){
        var TheList = [];
        TheList = JSON.parse(localStorage.getItem('TaskList'));
        var items = '';
        for (var i = 0; i < TheList.length; i++) {
            items += '<li><h3>' + TheList[i].text + '</h3><p>' + TheList[i].time + '<p></li>';
        }

        $('#orderedList').empty().append($(items)).listview('refresh');    
    }    
});

当输入一个新项目时，你想存储文本和当前时间，所以使用一个对象。首先从 localStorage 中获取当前列表，然后创建新项目并将其添加到列表中，最后保存回 localStorage 清除 textarea 并导航到 page3。取消按钮只是清除文本区域：

$(document).on('pageinit', '#page2', function(){ 

    $('#btnCancel').on("click", function(){
        $('#newItemText').val(''); //CLEAR TEXT AREA
    });

    $('#btnSave').on("click", function(){            
        var TheList = [];
        if(localStorage.getItem('TaskList')){
            TheList = JSON.parse(localStorage.getItem('TaskList'));
        }
        var newitem = $('#newItemText').val(); 
        var task = {text: newitem, time: new Date() };
        TheList.push(task);
        localStorage.setItem('TaskList', JSON.stringify(TheList));

        $('#newItemText').val(''); //CLEAR TEXT AREA
        $.mobile.navigate( "#page3", { transition : "slide" });    
    });    
});

【讨论】：

非常感谢您提供此演示和代码示例。 :-) 我查看了 JSFiddler 中的代码并与我的代码进行了比较，更改了所有内容，所以一切看起来都一样，但是当我在手机上运行 phonegap 时，保存或时间或取消按钮将像 JSFiddler 中的那样工作。可能需要再次查看代码并看看做错了什么。
“任务列表”从何而来？我在第一篇文章中进行了编辑，因此您可以观看新的更新代码，但仍然无法在我的手机上运行，但它可以在 JSFiddler 上运行
TaskList 只是一个任务对象的数组。当您保存它时，它是 JSON 字符串化并放入 localStorage，当您转到 page3 时，从同一 localStorage 位置检索 JSON 并解析回 TaskList 数组。我不知道phonegap，也许其他人可以评论将localStorage与phonegap一起使用......
我发现了我遇到的问题，这是我直到今天才发现的非常迟钝的问题。您的 JSFiddler 演示非常完美，事实是；您使用的是 jquery 1.9.1 和 jquery mobile 1.3.0b1，我使用的是 jquery 1.6.4 和 mobile 1.1.0，之后我今天真的查看了所有代码，我意识到问题所在，在更新了这个 .js 文件后它工作了。非常感谢您的代码和演示。