Question

我使用以下链接创建树状结构： 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>

当我运行时，没有任何东西被保存。

我在此结构的代码中添加了一个保存按钮。

我希望每当用户单击此保存按钮时，他就可以将这种树结构存储为他/她的本地计算机上的JSON数据。我希望这个，因为这棵树是可编辑的。我怎样才能做到这一点？

我使用以下链接：

link

我希望无论发生在id =“tt”上的任何更改都可以以JSON的形式检索并存储在我的本地计算机上。

Answer 1

当然可以这样做。

一旦你有了你的JSON字符串（我假设你知道如何获得它，因为如果不是完全不同的话）你可以使用这个函数保存它：

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

的JSON对象

Answer 2

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

如何在本地（在机器上）保存JSON数据？

2 个答案: