如何在本地(在机器上)保存 JSON 数据?-前端问题

How to save JSON data locally (on the machine)?(如何在本地(在机器上)保存 JSON 数据?)

本文介绍了如何在本地(在机器上)保存 JSON 数据?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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.