使用 JQuery Mobile 和 LocalStorage 创建 CRUD Web 应用

引言

下载 notekeeper.zip

本文旨在演示如何使用 JQuery Mobile 框架和 HTML5 创建一个可以在桌面和移动设备上运行的 Web 应用程序。该应用程序的目的是存储和检索用户的笔记。本文将展示一种简单的方法来存储和检索 LocalStorage 中的记录。这个示例应用程序最终将有 4 个屏幕，它们是：

1. 启动屏 - 提供访问笔记的选择
2. 笔记 - 以列表视图显示您的笔记，并提供添加新笔记和返回启动屏的功能
3. 添加笔记 - 一个用于添加新笔记并保存的屏幕
4. 编辑笔记 - 一个用于更新和删除笔记的屏幕

请注意：我假设您对 JQuery Mobile、LocalStorage、JavaScript 和 HTML5 有一定的了解，但我已经为您提供了上面关于从网络获取它们的部分信息的链接。

背景

我一直想用移动框架开发 CRUD 应用程序。我想要一些易于应用的东西，通过 Google 我找到了 JQuery Mobile。JQuery Mobile 是一个使用最新版 HTML5 开发移动应用程序的框架。您可以在网上找到关于这些框架的大量信息，但对我来说，访问 JQuery Mobile 的官方网站非常有启发性。对我来说，最有用的网站之一是 W3School，您可以在那里找到关于各种 Web 开发框架的大量信息。

虽然这个 Web 应用程序（我将称之为 NoteKeeper）可以使用 PhoneGap Build 轻松编译为混合应用，但这一步将不包含在本文中。

我读过的大多数关于 JQuery Mobile 的书籍更多的是关于设计用户界面，而不是操作用户界面的 API，比如读取和保存记录。通过阅读 JQuery 相关的书籍，我才了解到如何能够执行像存储和检索记录到本地存储这样简单的操作。我希望展示如何为不同的控件完成这项操作，以及用户如何在运行时更新它们。

这将展示如何绑定和执行按钮和链接的点击事件，使用元素的 data-* 属性，在运行时更新列表视图，在运行时定义消息框并根据最终用户的选择执行代码，使用 jquery 获取和设置元素属性，使用对象和 json 等。

使用代码

开发 NoteKeeper 的第一步是定义用户界面，即最终用户将看到的屏幕。如上所述，我们有四个屏幕：列出笔记、添加新笔记、编辑现有笔记和启动屏。您可以通过查看附加的源代码获得更多内容，因为我在这里只涉及主要功能以及它的作用。我还会解释幕后的代码，以处理当保存按钮被点击等事件时。

这个 Web 应用遵循 单页应用 框架，所有页面都在一个 HTML 页面内设计，并通过 ID 进行引用。从现在开始，我将快速解释每个页面的 HTML 定义以及该定义的最终输出。在查看 HTML 定义时，请将其与生成的输出屏幕关联起来。如上所述，我假设您具备 JQuery Mobile、HTML5 和 Javascript 的一些知识，才能完全理解本文。

启动屏 - HTML 定义和页面输出，这是 Web 应用启动时您看到的第一个屏幕。

<div id="pgMenu" data-role="page" data-theme="b" class="my-page">
<header id="pgMenuheader" data-role="header" data-position="fixed"> 
<h1>NoteKeeper
</h1> 
</header> 
<div id="pgMenucontent" data-role="content" class="content"> 
<ul data-role="listview" data-inset="true" id="sbItems"> 
<li data-icon="false">
<a data-transition="slide" id="sbNote" href="#pgNote">
<h2>Notes
</h2>
<p>Maintain Notes
</p> 
<img height="200" width="100%" src="apps80.png" alt="Notes" class="ui-li-thumb">
</img> 
</a>
</li> 
</ul> 
</div> 
<footer id="pgMenufooter" data-role="footer" data-position="fixed"> 
<h1>Powered by JQM.Show © Anele Mbanga 2015
</h1> 
</footer> 
</div>

启动屏页面有一个带有 NoteKeeper 标题的头部。页面的内容是一个列表视图，其中包含一个名为 Notes 的项目。该项目有一个描述：维护笔记。上面 HTML 定义的结果设计如下面图 1 所示。选择“笔记”后，用户将被带到笔记列表，在那里将列出可用的笔记。

该屏幕实现的功能 - 这是笔记和最终用户之间的链接。如果将来向此 Web 应用添加其他页面，此启动屏可用于提供指向 Web 应用其他部分的链接。例如，如果此 Web 应用具有存储用户详细信息的函数，则可以在现有项目列表中添加一个项目来访问用户列表。

笔记列表 - HTML 定义和页面输出

笔记列表屏幕显示已保存到 Web 应用本地存储中的笔记列表。所有可用列表都从 LocalStorage 读取，然后在屏幕显示之前更新列表视图。稍后我将解释 JavaScript 中是如何做到的，现在让我们看看笔记列表的定义。

<div id="pgNote" data-role="page">
<header id="pgNoteheader" data-role="header" data-position="fixed">
<h1>Notes</h1>
<a data-role="button" id="pgNoteBack" data-icon="arrow-l" class="ui-btn-left">Back</a>
<a data-role="button" id="pgNoteNew" data-icon="plus" data-theme="b" class="ui-btn-right">New</a>
</header>
<div id="pgNotecontent" data-role="content" class="content">
<ul data-role="listview" data-inset="true" id="pgNoteList" data-autodividers="true" data-filter="true" data-filter-placeholder="Search Notes" data-filter-reveal="false">
<li data-role="list-divider">NoteHdr</li>
<li id="noNote">You have no notes</li>
</ul>
</div>
</div>

笔记列表屏幕有一个返回按钮，按下该按钮可让用户返回启动屏，该按钮定义为 pgNoteBack。此处还有一个标题中的按钮用于添加新笔记，由 pgNoteNew 定义。我本可以在其元素定义中定义这些按钮点击时的操作，但我希望通过 JavaScript 代码来处理，稍后我将演示这一点。通过代码处理这些简单的点击事件的缺点是会使我的应用臃肿，因为它们只执行诸如从一个页面移动到另一个页面之类的简单功能。但是，如果需要在按钮事件触发时执行其他功能，最好在点击该按钮时调用一个函数。

此笔记列表定义的最终结果如下面图 2 所示。当 Web 应用首次启动时，它会显示“无笔记”，直到用户输入一些笔记并保存它们。每删除一条笔记，也会从 LocalStorage 中删除，并列出剩余的笔记。

当列表中的某个元素被选中时，会显示一个笔记更新屏幕，其中用户可以更新笔记的详细信息。一些元素的设置将如 JavaScript 中所述。

从上面的列表中，列表视图将具有自动数据分隔符，这意味着笔记将按字母分组，并且由于列表视图定义中存在 data-filter="true" 属性，因此它们是可搜索的。

该屏幕实现的功能 - 列出 LocalStorage 中存储的所有可用笔记。当用户选择一个笔记时，会提示他们进行更新和保存。它还提供了一个添加新笔记的链接。

新笔记 - HTML 定义和页面输出

接下来的屏幕旨在解释新笔记屏幕的设计和最终输出。

<div id="pgAddNote" data-role="page">
<header id="pgAddNoteheader" data-role="header" data-position="fixed">
<h1>Add Note</h1>
<a data-role="button" id="pgAddNoteBack" data-icon="arrow-l" class="ui-btn-left">Back</a>
</header>
<div id="pgAddNotecontent" data-role="content" class="content">
<form action="#" method="post" id="pgAddNoteForm" name="pgAddNoteForm">
<div data-role="fieldcontain">
<label for="pgAddNoteTitle" id="lblpgAddNoteTitle">Title<span style='color:red;'>*</span></label>
<input type="text" required="required" title="Enter title here." name="pgAddNoteTitle" id="pgAddNoteTitle" placeholder="Enter title here." autocomplete="off" data-clear-btn="true">
</input>
</div>
<div data-role="fieldcontain">
<label for="pgAddNoteDetail" id="lblpgAddNoteDetail">Details<span style='color:red;'>*</span></label>
<textarea name="pgAddNoteDetail" id="pgAddNoteDetail" placeholder="Enter details here." data-clear-btn="true" required="required"></textarea>
</div>
<div><button type="submit" id="pgAddNoteSave" class="ui-btn ui-corner-all ui-shadow ui-btn-b">Save Note</button>
</div>
</form>
</div>
</div>

下面图 3 中描绘的添加笔记屏幕具有上述定义。当用户从笔记列表页面选择“新建”按钮时，将显示一个提示用户创建新笔记的新屏幕。为了在移动设备上漂亮地排列表单内容，元素被放置在字段容器内，由 data-role="fieldcontain" 定义。笔记的所有必需字段都用红星标出，符合每个元素的样式定义。对于每条笔记，用户应输入标题和详细信息，然后点击“保存笔记”。

该屏幕实现的功能 - 为最终用户提供添加新笔记并将其保存到本地存储的功能，还可以返回笔记列表。标题将显示一个删除图标，以便快速清除标题内容。这使用了文本字段的 data-clear-btn="true" 属性。

编辑笔记 - HTML 定义和页面输出

编辑笔记屏幕与添加笔记屏幕相同，但它不添加新笔记，而是更新现有笔记。当用户选择更新现有笔记时，由于笔记的标题是唯一的，因此用于提示用户的标题文本框将被设置为只读。此屏幕还在标题中具有删除笔记的功能。

<div data-url="Title" id="pgEditNote" data-role="page">
<header id="pgEditNoteheader" data-role="header" data-position="fixed">
<h1>Edit Note</h1>
<a data-role="button" id="pgEditNoteBack" data-icon="arrow-l" class="ui-btn-left">Back</a>
<a data-role="button" data-href="ID" id="pgEditNoteDelete" data-icon="delete" data-theme="b" class="ui-btn-right">Delete</a>
</header>
<div id="pgEditNotecontent" data-role="content" class="content">
<form action="#" method="post" id="pgEditNoteForm" name="pgEditNoteForm">
<div data-role="fieldcontain">
<label for="pgEditNoteTitle" id="lblpgEditNoteTitle">Title<span style='color:red;'>*</span></label>
<input readonly="readonly" data-clear-btn="true" autofocus="true" type="text" required="required" title="Enter title here." name="pgEditNoteTitle" id="pgEditNoteTitle" placeholder="Enter title here." autocomplete="off"></input>
</div>
<div data-role="fieldcontain">
<label for="pgEditNoteDetail" id="lblpgEditNoteDetail">Details<span style='color:red;'>*</span></label>
<textarea name="pgEditNoteDetail" id="pgEditNoteDetail" placeholder="Enter details here." data-clear-btn="true" required="required"></textarea>
</div>
<div><button type="submit" id="pgEditNoteUpdate" class="ui-btn ui-corner-all ui-shadow ui-btn-b">Update Note</button>
</div>
</form>
</div>
</div>

上面定义的相应用户界面屏幕如下面图 4 所示。

该屏幕实现的功能 - 为最终用户提供编辑现有笔记以及带有提示删除它的功能。

我应该提到的另一件事是，当用户选择删除笔记时，应该提示他们是否要删除该笔记，如果 Web 应用中的某些信息不正确，则需要告知用户。为此，我定义了两个页面，一个作为 MessageBox，另一个作为 Alert。

消息框 - HTML 定义和页面输出

使用页面元素向用户发出提示对我来说有点棘手，我仍在寻找其他方法来提供它们。我也不想使用插件，但想要 JQuery Mobile 提供的相同功能。为了使其工作，需要进行一些设置。

<section data-transition="pop" id="msgbox" data-role="dialog">
<header id="msgboxheader" data-role="header" data-position="fixed">
<h1>Confirm</h1>
</header>
<div id="msgboxcontent" data-role="content" class="content">
<div id="msgboxtitle">
</div>
<br><div id="msgboxprompt">
<p>Are you sure you want to delete this record?</p>
</div>
<br><div style="text-align: center;" id="msgboxbuttons" class="ui-grid-a">
<div class="ui-block-a">
<a data-method="" data-id="" data-topage="" id="msgboxyes" data-role="button" data-icon="check">Yes</a>
</div>
<div class="ui-block-b">
<a data-method="" data-id="" data-topage="" id="msgboxno" data-role="button" data-icon="delete" data-theme="b">No</a>
</div>
</div>
</div>
</section>

消息框的性质是动态的，取决于输入到它们的内容。这包括它们显示的标题、提示和按钮。在此示例中，上面的定义有两个按钮，一个“是”和一个“否”。消息框的标题以及显示给用户的提示都会改变。这两个描绘的按钮位于一个网格元素内。我还使用 data- 元素，如 data-id、data-topage 和 data-method，来传递变量，指示当用户点击“是”或“否”按钮时应用程序应该做什么，这取决于这些 data- 属性。

例如，data-method 会指示执行哪个数据方法，data-id 指示处理哪个笔记 ID，data-topage 指示执行完所有操作后转到哪个页面。

这些按钮被命名为 msgboxyes 和 msgboxno ，因为我们还有一个警报框定义。

<section data-transition="pop" id="alertbox" data-role="dialog">
<header id="alertboxheader" data-role="header" data-position="fixed">
<h1>Error</h1>
</header>
<div id="alertboxcontent" data-role="content" class="content">
<div id="alertboxtitle">
</div>
<br><div id="alertboxprompt">
<p>An error has been encountered!</p>
</div>
<br><div style="text-align: center;" id="alertboxbuttons" class="ui-grid-solo">
<div class="ui-block-a">
<a data-method="" data-id="" data-topage="" id="alertboxok" data-role="button" data-icon="check" data-theme="b">Ok</a>
</div>
</div>
</div>
</section>

$(function(){
// define the application
var NoteKeeper = {};
(function(app){
// variable definitions go here
var NoteLi = '<li ><a href="#pgEditNote?Title=LINK">ID</a></li>';
var NoteHdr = '<li data-role="list-divider">NoteHdr</li>';
var noNote = '<li id="noNote">You have no notes</li>';

app.init = function(){
FastClick.attach(document.body);
app.Notesbindings();
app.checkForNotesStorage();

$('#msgboxyes').on('click', function(e){
e.preventDefault();
e.stopImmediatePropagation();
var yesmethod = $('#msgboxyes').data('method');
var yesid = $('#msgboxyes').data('id');
app[yesmethod](yesid);
});

var yesmethod = $('#msgboxyes').data('method');

var yesid = $('#msgboxyes').data('id');

app[yesmethod](yesid);

$(document).on('click', '#sbItems a', function(e){
e.preventDefault();
e.stopImmediatePropagation();
var href = $(this).attr('href');
$.mobile.changePage(href, {transition: 'slide'});
});

app.Notesbindings = function(){
$(document).on('click', '#pgNoteList a', function(e){
e.preventDefault();
e.stopImmediatePropagation();
var href = $(this)[0].href.match(/\?.*$/)[0];
var Title = href.replace(/^\?Title=/,'');
$.mobile.changePage('#pgEditNote', {transition: 'slide'});
app.editNote(Title);
});

$(document).on('pagebeforechange', function(e, data){
var toPage = data.toPage[0].id;
if(toPage == 'pgNote'){
// restart the storage check
app.checkForNotesStorage();
}
});

$('#pgNoteBack').on('click', function(e){
e.preventDefault();
e.stopImmediatePropagation();
// move to the add new record screen
$.mobile.changePage('#pgMenu', {transition: 'slide'});
});

$('#pgNoteNew').on('click', function(e){
e.preventDefault();
e.stopImmediatePropagation();
$('#pgAddNote').data('from', pgNote);
// move to the add new record screen
$.mobile.changePage('#pgAddNote', {transition: 'slide'});
});

$('#pgAddNote').data('from', pgNote);

$('#pgAddNoteBack').on('click', function(e){
e.preventDefault();
e.stopImmediatePropagation();
//which page are we coming from, if from sign in go back to it
var pgFrom = $('#pgAddNote').data('from');
switch (pgFrom) {
case "pgSignIn":
$.mobile.changePage('#pgSignIn', {transition: 'slide'});
break;
default:
// go back to the listing screen
$.mobile.changePage('#pgNote', {transition: 'slide'});
}
});

$('#pgAddNoteSave').on('click', function(e){
e.preventDefault();
e.stopImmediatePropagation();
// save the Note
var NoteRec;
NoteRec = pgAddNoteGetRec();
app.addNote(NoteRec);
});

$('#pgEditNoteBack').on('click', function(e){
e.preventDefault();
e.stopImmediatePropagation();
// go back to the listing screen
$.mobile.changePage('#pgNote', {transition: 'slide'});
});

// click update when editing a record
$('#pgEditNoteUpdate').on('click', function(e){
e.preventDefault();
e.stopImmediatePropagation();
// save the Note
var NoteRecNew;
NoteRecNew = pgEditNoteGetRec();
app.updateNote(NoteRecNew);
});

$('#pgEditNoteDelete').on('click', function(e){
e.preventDefault();
e.stopImmediatePropagation();
var Title = $('#pgEditNoteTitle').val();
Title = Title.replace(/-/g,' ');
$('#msgboxheader h1').text('Confirm Delete');
$('#msgboxtitle').text(Title);
$('#msgboxprompt').text('Are you sure that you want to delete this note?');
$('#msgboxyes').data('method', 'deleteNote');
Title = Title.replace(/ /g,'-');
$('#msgboxyes').data('id', Title);
$('#msgboxno').data('topage', 'pgEditNote');
$.mobile.changePage('#msgbox', {transition: 'pop'});
});
};

var Title = $('#pgEditNoteTitle').val();

Title = Title.replace(/-/g,' ');

$('#msgboxheader h1').text('Confirm Delete');

$('#msgboxtitle').text(Title);

$('#msgboxprompt').text('Are you sure that you want to delete this note?');

$('#msgboxyes').data('method', 'deleteNote');

$('#msgboxyes').data('id', Title);

$('#msgboxno').data('topage', 'pgEditNote');

$.mobile.changePage('#msgbox', {transition: 'pop'});

//get the record to be saved and put it in a record array
function pgAddNoteGetRec(){
//define the new record
var NoteRec
NoteRec = {};
NoteRec.Title = $('#pgAddNoteTitle').val();
NoteRec.Detail = $('#pgAddNoteDetail').val();
return NoteRec;
}

//get the record to be saved and put it in a record array
function pgEditNoteGetRec(){
//define the new record
var NoteRec
NoteRec = {};
NoteRec.Title = $('#pgEditNoteTitle').val();
NoteRec.Detail = $('#pgEditNoteDetail').val();
return NoteRec;
}

//clear the forms for new data entry
function pgAddNoteClear(){
$('#pgAddNoteTitle').val('');
$('#pgAddNoteDetail').val('');
}

//clear the forms for new data entry
function pgEditNoteClear(){
$('#pgEditNoteTitle').val('');
$('#pgEditNoteDetail').val('');
}

app.addNote = function(NoteRec){
// get Note records.
var NotesObj = app.getNotes();
// define a record object to store the current details
var Title = NoteRec.Title;
Title = Title.replace(/ /g,'-');
NotesObj[Title] = NoteRec;
localStorage['notekeeper-notes'] = JSON.stringify(NotesObj);
// clear the form fields
pgAddNoteClear();
//which page are we coming from, if from sign in go back to it
var pgFrom = $('#pgAddNote').data('from');
switch (pgFrom) {
case "pgSignIn":
$.mobile.changePage('#pgSignIn', {transition: 'slide'});
break;
}
};

app.editNote = function(Title){
// get Note records.
var NotesObj = app.getNotes();
// lookup specific Note
Title = Title.replace(/ /g,'-');
var NoteRec = NotesObj[Title];
$('#pgEditNote').data('url', Title);
$('#pgEditNoteDelete').data('href', Title);
$('#pgEditNoteTitle').attr('readonly', 'readonly');
$('#pgEditNoteTitle').attr('data-clear-btn', 'false');
$('#pgEditNoteTitle').val(NoteRec.Title);
$('#pgEditNoteDetail').val(NoteRec.Detail);
};

app.updateNote = function(NoteRecNew){
// get Note records.
var NotesObj = app.getNotes();
// lookup specific Note
var Title = NoteRecNew.Title;
Title = Title.replace(/ /g,'-');
var NoteRec = NotesObj[Title];
// assign new values to read record
NoteRec.Title = NoteRecNew.Title;
NoteRec.Detail = NoteRecNew.Detail;
NotesObj[Title] = NoteRec;
localStorage['notekeeper-notes'] = JSON.stringify(NotesObj);
// clear the form fields
pgEditNoteClear();
// show the page to display after a record is deleted
$.mobile.changePage('#pgNote', {transition: 'slide'});
};

app.deleteNote = function(Title){
// clear the set values// get the Note records from localStorage
var NotesObj = app.getNotes();
// delete selected Note
delete NotesObj[Title];
// write it back to localStorage
localStorage['notekeeper-notes'] = JSON.stringify(NotesObj);
// show the page to display after a record is deleted
$.mobile.changePage('#pgNote', {transition: 'slide'});
};

app.getNotes = function(){
// get Note records
var NotesObj = localStorage['notekeeper-notes'];
if (!NotesObj){
NotesObj = {};
localStorage['notekeeper-notes'] = JSON.stringify(NotesObj);
} else {
NotesObj = JSON.parse(NotesObj);
}
return NotesObj;
};

app.displayNotes = function(){
// get Note records.
var NotesObj = app.getNotes();
// create an empty string to contain html
var html = '';
// make sure your iterators are properly scoped
var n;
// loop over notes
for (n in NotesObj){
var nLnk = n.replace(/-/g,' ');
html += NoteLi.replace(/ID/g,nLnk).replace(/LINK/g,n);
}
$('#pgNoteList').html(NoteHdr + html).listview('refresh');
};

app.checkForNotesStorage = function(){
var NotesObj = app.getNotes();
// are there existing Note records?
if (!$.isEmptyObject(NotesObj)) {
// yes there are. pass them off to be displayed
app.displayNotes();
} else {
// nope, just show the placeholder
$('#pgNoteList').html(NoteHdr + noNote).listview('refresh');
}
};

app.init();
})(NoteKeeper);
});