如何在本地(在机器上)保存 JSON 数据?

2022-01-24 00:00:00 json save jquery javascript

我正在使用以下链接来创建树状结构:链接

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?

我使用了以下链接:

链接

我希望 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-8,'+encodeURIComponent(text));
  a.setAttribute('download', filename);
  a.click()
}

叫它:

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

这会提示用户保存一个名为filename.json"的文件，该文件包含一个obj

This would prompt the use to save a file named "filename.json", which contains a JSON object of obj

相关文章