使用 JSON 存储多个表单条目答案

【问题标题】：Using JSON to store multiple form entries使用 JSON 存储多个表单条目
【发布时间】：2012-12-22 08:41:01
【问题描述】：

我正在尝试创建一个笔记网络应用程序，它将使用 HTML5 本地存储简单地存储笔记客户端。我认为 JSON 是实现它的方法，但不确定如何去做。

我有一个带有标题和文本区域的简单表单。有没有一种方法可以提交表单并使用几个“注释”存储输入的详细信息，然后将它们列出来？

我是 Javascript 和 JSON 的新手，因此我们将不胜感激。

【问题讨论】：

你签出html5rocks.com/en/features/storage了吗？

标签： javascript json html local-storage

【解决方案1】：

json 的使用方式有很多种。

1> 你可以在 HTML 页面上创建一个函数并调用 ajax 和发布数据。在这里你必须使用 $("#txtboxid").val()。获取价值并发布。

2> 使用knock out js绑定两种方式，调用ajax。

这里是调用网络应用程序的简单代码。使用 ajax 调用。

var params = { "clientID": $("#txtboxid") };     

        $.ajax({
            type: "POST",
            url: "http:localhost/Services/LogisticsAppSuite.svc/Json/GetAllLevelSubClients",
            contentType: 'application/json',

            data: JSON.stringify(params),
            dataType: 'json',
            async: false,
            cache: false,
            success: function (response) {



            },
            error: function (ErrorResponse) {


            }

【讨论】：

【解决方案2】：

我编写了一个类似于实体框架的库。我稍后会发here，你可以关注我或者联系我获取源代码。然后就可以写js代码了：

var DemoDbContext = function(){ // define your db
    nova.data.DbContext.call(this);
    this.notes=new nova.data.Repository(...); // define your table
}
//todo: make DemoDbContext implement nova.data.DbContext
var Notes = function(){
    this.id=0; this.name="";
}
//todo: make Note implement nova.data.Entity

如何查询数据？

var notes = new DemoDbContext().notes.toArray(function(data){});

如何给db添加注释？

var db = new DemoDbContext();
db.notes.add(new Note(...));
db.saveChanges(callback);

【讨论】：

这里是一个完整的示例：cordova.codeplex.com/wikipage?title=How%20to%20use%20nova.data

【解决方案3】：

根据您要存储的信息的复杂程度，您可能不需要 JSON。

您可以使用 HTML5 中 localStorage 的 setItem() 方法在客户端保存键/值对。您只能使用此方法存储字符串值，但如果您的笔记没有太复杂的结构，这可能是最简单的方法。假设这是您使用的一些 HTML：

<input type="text" id="title"></input>
<textarea id="notes"></textarea>

您可以使用这个简单的 Javascript 代码来存储信息：

// on trigger (e.g. clicking a save button, or pressing a key)
localStorage.setItem('title', document.getElementById('title').value);
localStorage.setItem('textarea', document.getElementById('notes').value);

您将使用localStorage.getItem() 来检索值。

Here is a simple JSFiddle 我创建是为了向您展示这些方法是如何工作的（尽管没有使用与上面完全相同的代码；这个依赖于 keyup 事件）。

我可以看到，您可能想要使用 JSON 的唯一原因是，您是否需要一个对您的笔记有深度的结构。例如，您可能希望附上带有书写日期等信息的注释，并将它们放在这样的结构中：

{
    'title': {
        'text':
        'date':
    }
    'notes': {
        'text':
        'date':
    }
}

那将是 JSON。但请记住，localStorage.setItem() 方法只接受字符串值，您需要将对象转换为字符串来执行此操作，然后在使用localStorage.getItem() 检索它时将其转换回来。方法JSON.stringify 将执行对象到字符串的转换，JSON.parse 将执行相反的操作。但正如我所说，这种转换意味着额外的代码，只有当你的笔记需要那么复杂时才真正值得。

【讨论】：