如何在本地（在本機上）保存JSON數據？

我使用下面的鏈接，創建一個樹狀結構： LINK 如何在本地（在本機上）保存JSON數據？

這是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Tree Context Menu - jQuery EasyUI Demo</title> 
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"> 
    <link rel="stylesheet" type="text/css" href="themes/icon.css"> 
    <link rel="stylesheet" type="text/css" href="demo.css"> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.easyui.min.js"></script> 
</head> 
<body> 
    <h2>Tree Context Menu and Drag Drop Tree Nodes</h2> 
    <p>Right click on a node to display context menu.</p> 
    <p>Press mouse down and drag a node to another position.</p> 
    <div style="margin:20px 0;"></div> 
    <div class="easyui-panel" style="padding:5px"> 
     <ul id="tt" class="easyui-tree" data-options=" 
       url: 'tree_data1.json', 
       method: 'get', 
       animate: true, 
       dnd:true, 
       onContextMenu: function(e,node){ 
        e.preventDefault(); 
        $(this).tree('select',node.target); 
        $('#mm').menu('show',{ 
         left: e.pageX, 
         top: e.pageY 
        }); 
       } 
      "> 
     </ul> 
    </div> 
    <div style="padding:5px 0;"> 
     <a href="#" class="easyui-linkbutton" onclick="save()" data-options="iconCls:'icon-save'">Save</a> 
    </div> 
    <div id="mm" class="easyui-menu" style="width:120px;"> 
     <div onclick="append()" data-options="iconCls:'icon-add'">Append</div> 
     <div onclick="removeit()" data-options="iconCls:'icon-remove'">Remove</div> 
     <div class="menu-sep"></div> 
     <div onclick="expand()">Expand</div> 
     <div onclick="collapse()">Collapse</div> 
    </div> 
    <script type="text/javascript"> 
     function append(){ 
      var t = $('#tt'); 
      var node = t.tree('getSelected'); 
      t.tree('append', { 
       parent: (node?node.target:null), 
       data: [{ 
        text: 'new item1' 
       },{ 
        text: 'new item2' 
       }] 
      }); 
     } 
     function removeit(){ 
      var node = $('#tt').tree('getSelected'); 
      $('#tt').tree('remove', node.target); 
     } 
     function collapse(){ 
      var node = $('#tt').tree('getSelected'); 
      $('#tt').tree('collapse',node.target); 
     } 
     function expand(){ 
      var node = $('#tt').tree('getSelected'); 
      $('#tt').tree('expand',node.target); 
     } 
    function save(){ 
      var a = document.createElement('a'); 
     a.setAttribute('href','data:text/plain;charset=utf-u,'+encodeURIComponent(JSON.stringify({$('#tt').html()})); 
     a.setAttribute('download', "data.json"); 

     } 
    </script> 
</body> 
</html>

當我運行這一點，沒有什麼是得到保存。

我已經爲此結構的代碼添加了一個保存按鈕。

我希望每當用戶點擊這個保存按鈕，然後他可以將這個樹結構作爲JSON數據生成在他/她的本地機器上。我想要這個，因爲這棵樹是可編輯的。我怎樣才能做到這一點？

我用下面的鏈接是相同的：

link

我想一個碰巧的ID =「TT」無論變化可能會在JSON形式和存儲我的本地機器上檢索。

來源

2015-02-11 POOJA GUPTA

一個JSON對象，你想用戶節省實際Ĵ SON文件，還是隻是希望它存儲在瀏覽器中供您稍後使用？ – 2015-02-11 21:30:27

@BillCriswell：我希望用戶保存一個實際的JSON文件 – 2015-02-11 21:41:47

下面發佈的Dustin對除了IE之外的大多數瀏覽器都適用。如果你需要IE支持，你必須去服務器端。 Google「內容配置」。不知道你用什麼服務器的明智，但它是所有的想法：http://stackoverflow.com/questions/1465573/forcing-to-download-a-file-using-php – 2015-02-11 22:03:36

LocalStorage確實如此。

使用方法如下：

localStorage.setItem('myCat', 'Tom'); 
console.log(localStorage.getItem('myCat')); // Tom

使用可以用它來存儲stringify -ed對象，以及：

var obj = { a : 1, b : 2}; 
localStorage.setItem('myObj', JSON.stringify(obj)); 
var obj2 = JSON.parse(localStorage.getItem('myObj'));

來源

2015-02-11 21:09:27 n6g7

他們不是要求它是由客戶端localStorage存儲，但他們希望用於實際保存文件。 – 2015-02-11 21:15:53

哦，我明白了，我不明白這一點。 – n6g7 2015-02-11 21:22:48

當然可以做到這一點。

一旦你有你的JSON字符串（IM假設你知道如何得到它，因爲如果不是這就是一個不同的完全的問題），您使用此功能可以將其保存：

function saveText(text, filename){ 
    var a = document.createElement('a'); 
    a.setAttribute('href', 'data:text/plain;charset=utf-u,'+encodeURIComponent(text)); 
    a.setAttribute('download', filename); 
    a.click() 
}

因此，一個可能的用途是：

var obj = {a: "Hello", b: "World"); 
saveText(JSON.stringify(obj), "filename.json");

這將促使使用保存一個名爲「filename.json」的文件，其中包含obj

來源

2015-02-11 21:14:10

「下載」屬性在Internet Explorer中不起作用。 – 2015-02-11 21:29:41

@DustinPoissant：我根據你的答案更改了代碼，但沒有任何工作..請在帖子中查看我的代碼。 – 2015-02-11 21:40:46

非常感謝，因爲您拿到了樹元素的內部HTML，並試圖對其調用JSON.stringify。這不會給你一個JSON字符串，它可能只是給你一個錯誤。 – 2015-02-11 21:44:05

如何在本地（在本機上）保存JSON數據？

回答

相關問題