javascript - 将输入动态保存到 JSON 后，将 JSON 文件中的数据调用到文本区域

Question

HTML:

<label>Label: </label>
<br />
<input type="text" id="label" class="label"/><hr />
<label>Note Content: </label>
<br />
<textarea id="content"></textarea><hr />
<button id="saveBtn">SAVE</button><hr />
<div id="output">
</div>

JS:

$(saveBtn).click(function(){
var noteLabel = $(label).val();
var noteContent = $(content).val();
var outputarea = $(output);
var info = [
 { "label":"John" , "content":"Doe" }];
$.each(info, function() {
    i=0;
    info[i].label = noteLabel;
    info[i].content = noteContent;
    outputarea.append('label: ' + info[i].label + '<br>content:' + info[i].content + '<button onclick="recallNote();">Recall</button><hr />');
    i++;
    function recallNote(){
        $(label).val(info[i].label); 
        $(content).val(info[i].content); 
    }
});
});

我正在尝试使用函数recallNote()来获取输入框和文本区域以更改为与按钮关联的文本的值。如果你看看我的 JSFiddle 你应该能够更好地理解。

当您在输入框和文本区域中输入文本，然后单击“保存”按钮时，文本将存储到 JSON 对象中，然后显示在输出 div 中。

本质上，我正在尝试创建一个记事本网络应用程序，以便我可以存储笔记，并且调用按钮可以将它们重新调用回上面的输入框和文本区域，以便用户可以编辑笔记和笔记的标签。

Answer 1

使用这个JS:

var info = [{ "label":"John" , "content":"Doe" }];

$(document).ready(function(){
    $.each(info, function(i, obj){
        $('#output').append('label: ' + obj.label + '<br>content:' + obj.content + '<button class="btn-recall" data-label="' + obj.label + '" data-content="' + obj.content + '">Recall</button><hr />');
    });

    $(document).on('mousedown keydown', '.btn-recall', function(){
        $('#label').val($(this).data('label')); 
        $('#content').val($(this).data('content')); 
    });

    $(document).on('mousedown keydown', '#saveBtn', function(){
        info.push({"label": $('#label').val(), "content": $('#content').val()});

        $('#output').append('label: ' + $('#label').val() + '<br>content:' + $('#content').val() + '<button class="btn-recall" data-label="' + $('#label').val() + '" data-content="' + $('#content').val() + '">Recall</button><hr />');
    });
});

我已经更新了答案。现在，当页面加载时，它会将 json 数组中的所有内容添加到 output div 中。当您单击 save 按钮时，它会将其添加到 output div 以及 JSON 数组中。

然后您可以单击撤回按钮来重新填充表单。

编辑

工作原理:

info 变量存储在全局范围内(在所有函数之外)。这使得它可以在所有函数(甚至是匿名函数)中使用。

在第三行，$(document).ready(function(){，这是我放置调用、保存和准备数据的所有功能的地方。

文档加载完成后，立即运行下面的第 4 行。这将使用 $.each() 函数循环遍历您的 JSON。然后它会将一段 HTML 添加到 output div 中。

每当创建新的 recall 按钮时，我还会向该按钮添加 2 个 data 属性。 数据标签和数据内容。这些属性存储该特定字段的标签和内容。

回到 jQuery，第 8 行，其中写着 $(document).on('mousedown keydown', '.btn-recall'...，这是将一个事件绑定(bind)到调用按钮。它的意思是，每当你按下这个调用按钮时，就会执行这个函数。被调用的函数是:

function(){
    $('#label').val($(this).data('label')); 
    $('#content').val($(this).data('content')); 
}

.val() 函数 ($(this).data('label')); 中的代码表示检索数据属性 label 作为按下的按钮并将其插入到 label 文本框中。同样，下一行表示检索 content 数据属性值并将其插入到内容文本区域中。

jQuery 的下一部分将事件绑定(bind)到 saveBtn 按钮。该函数执行 2 个操作。首先，它使用 info.push() 将一个元素添加到 JSON 数组。 push() 将把一个元素“推”到数组中。

该函数执行的第二个操作是将标签、内容和调用按钮附加到输出 div。

jQuery 的重要部分是每个调用按钮都有 data-label 和 data-content 属性，因为它们存储标签和内容数据对于每个调用按钮。

按下按钮后，可以使用 .btn-recall 事件获取与其关联的所有数据。

保存数据

有几种存储数据的方法。如果你想用纯JS来做，也有2种方法。将数据存储在Cookie中，将数据存储在localStorage中。

这两种方式都不太好。 Cookie 只允许 4kb 的数据，并添加到页面标题中，这对性能不利。 LocalStorage 是 HTML5 的东西，因此您必须依赖拥有现代网络浏览器的访问者。

Cookie

要将数据保存到 cookie，请查看此 jQuery 插件:https://github.com/carhartl/jquery-cookie将“#saveBtn”函数更改为:

$(document).on('mousedown keydown', '#saveBtn', function(){
    info.push({"label": $('#label').val(), "content": $('#content').val()});

    $('#output').append('label: ' + $('#label').val() + '<br>content:' + $('#content').val() + '<button class="btn-recall" data-label="' + $('#label').val() + '" data-content="' + $('#content').val() + '">Recall</button><hr />');

    $.cookie("info", info);
}

并将 $.each() 函数更改为:

$.each($.cookie('info'), function(i, obk){
    info.push({"label": obj.label, "content": obj.content });

    $('#output').append('label: ' + obj.label + '<br>content:' + obj.content + '<button class="btn-recall" data-label="' + obj.label + '" data-content="' + obj.content + '">Recall</button><hr />');
});

这会将 JSON 保存到 cookie，每当用户刷新页面时都会保存该 cookie。

或者，您可以使用 HTML5 用户的 localStorage 来完成此操作:

localStorage.setItem('info', JSON.stringify(info));

并检索:

info = JSON.parse(localStorage.getItem('info'));

我个人使用的另一种存储数据的方法可能是将信息 json 传递给 AJAX，然后 AJAX 将其传递给 PHP 页面以保存到数据库或 session 中。

如果您预计用户会长时间离开您的页面，但仍想检索数据，那么数据库选项是最好的选择。