如何在本地（在机器上）保存JSON数据？ [英] How to save JSON data locally (on the machine)?
问题描述
我使用以下链接创建类似结构的树：
LINK
I am using the following link to create a tree like structure: LINK
这是我的代码：
<!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>
当我运行时，没有任何东西被保存。
When I am running this, nothing is getting saved.
我在这个结构的代码中添加了一个保存按钮。
I have added a save button to this structure's code.
我希望每当用户点击这个保存按钮时，他就可以存储这个树结构在他/她的本地机器上作为JSON数据生成。我想要这个，因为这棵树是可编辑的。我怎么能这样做？
I want that whenever the user clicks this save button then he could store this tree structure produced as JSON data on his/her local machine. I want this as this tree is editable. How can I do this?
我使用了以下链接相同：
I used the following link for the same:
我希望id =tt发生的任何变化都可以以JSON的形式检索并存储在我的本地机器上。
I want that whatever changes that happens to the id = "tt" could be retrieved in the form of JSON and store on my local machine.
推荐答案
肯定可以这样做。
一旦你有了你的JSON字符串（我假设你知道如何获得它，因为如果不是那个完全不同的问题）你可以使用此函数保存：
Once you have your JSON string (Im assuming you know how to get it because if not that's a different question altogether) you can save it using this function:
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的文件，该文件包含一个JSON对象 obj
This would prompt the use to save a file named "filename.json", which contains a JSON object of obj
这篇关于如何在本地（在机器上）保存JSON数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
