本地 JSON 文件更新

Question

您好尝试使用新的输入值更新本地 JSON 文件。

创建一个正在处理本地 Json 文件的帖子应用程序。

我有一个按钮和一个文本区域，以及一个动态列表。

一旦我在 textarea 中添加一些输入值并提交，它应该会附加到 li，如果我添加另一个值，那么它应该会附加到另一个 li。

添加的任何新值都应该附加到本地 json 文件中。

这是我尝试过的代码。

HTML：

<ul class='Jsonlist'></ul>
<a id='postData' href='#'>Post</a>
<textarea id="tArea"></textarea>

JS：

var Json = {"three":["red","yellow","orange"]}
  var items = [];
$.each( Json, function( key, val ) {
    debugger;
    items.push( "<li id='" + key + "'>" + Json.three + "</li>" );
  });
$('.Jsonlist').append(items);

$('#postData').click(function(){
    a=$('#tArea').val();
    $(".Jsonlist li").append(a);

});

Working Demo

Answer 1

JS 小提琴：

http://jsfiddle.net/JwCm9/

里面有什么？

存放物品的变量

var items;

为items 和每个item 创建<ul> <li>

function make_list() {

    var list = $(".Jsonlist");
    list.empty();



    for (var i in items) {
        var value = items[i];
        var li = $('<li>');
        li.html(value);
        list.append(li);
    }


};

从/到items的本地json保存和读取

function save_to_local_json() {
    var items_json = JSON.stringify(items);
    localStorage.setItem('items', items_json);
};


function read_from_local_json() {
    var items_json = localStorage.getItem('items');
    items = JSON.parse(items_json);

    // If the file is empty
    if (!items) {
        items = [];
    }
};

第一次调用这些函数：

read_from_local_json();
make_list();

点击事件

$('#postData').click(function () {
    var text = $('#tArea').val();
    items.push(text);
    make_list();
    save_to_local_json();
});

Answer 2

更新了我的答案：

function update_json(json_data){
    localStorage.setItem('json',JSON.stringify(json_data));
}

function fetch_json(){
    var json_data_local = JSON.parse(localStorage.getItem('json'));
    return json_data_local;
}

function display_list(json_data){
    json_data.three.forEach(function(val,key) {
        $('.Jsonlist').append("<li id='" + key + "'>" + val + "</li>");
    });
}

console.log(localStorage.getItem('json'));
if(localStorage.getItem('json') == ""){
    var Json = {"three":["red","yellow","orange"]}
    update_json(Json);
}

var Json = fetch_json();

display_list(Json);

console.log(Json);
$('#postData').click(function(){
    a=$('#tArea').val();
    Json.three.push(a);
    update_json(Json); 
    $('.Jsonlist li').remove();
    display_list(fetch_json());
});