本地 JSON 文件更新 [英] Local JSON file Update

问题描述

您好，正在尝试使用新的输入值更新本地 JSON 文件.

Hi trying to update the local JSON file with new input values.

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

Creating a posts app which is now working on local Json file.

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

I have a button and a text area, and a dynamic list.

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

once I add some input values in textarea and submit it should get appends to li and if I add another value then it should get append to another li.

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

What ever new values had added it should get append to the local json file.

这是我尝试过的代码.

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

});

工作演示

推荐答案

JS fiddle:

http://jsfiddle.net/JwCm9/

保存项目的变量

var items;

为 items 和每个 item 创建

一个

• creates <ul> for items and for each item a <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

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

  这篇关于本地 JSON 文件更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！