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;

为<ul>创建items，为每个item创建<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);
    }


};

保存并从本地json读取items

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());
});

本地JSON文件更新

2 个答案:

JS小提琴：

里面有什么？