Javascript 如何在本地（计算机上）保存JSON数据？_Javascript_Jquery_Json_Save

Javascript 如何在本地（计算机上）保存JSON数据？

javascript jquery json

Javascript 如何在本地（计算机上）保存JSON数据？,javascript,jquery,json,save,Javascript,Jquery,Json,Save,我正在使用以下链接创建树状结构：这是我的代码： <!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

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

这是我的代码：

<!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>


树上下文菜单-jqueryeasyui演示
树上下文菜单和拖放树节点
右键单击节点以显示关联菜单
按下鼠标并将节点拖动到另一个位置


追加
去除
扩大
崩溃
函数append（）{
var t=$（'tt'）；
var node=t.tree（'getSelected'）；
t、 树（'append'{
父级：（节点？节点。目标：null），
数据：[{
文本：“新项目1”
},{
文本：“新项目2”
}]
});
}
函数removeit（）{
var节点=$（'#tt'）.tree（'getSelected'）；
$（'#tt'）.tree（'remove'，node.target）；
}
函数折叠（）{
var节点=$（'#tt'）.tree（'getSelected'）；
$（'#tt'）.tree（'collapse'，node.target）；
}
函数展开（）{
var节点=$（'#tt'）.tree（'getSelected'）；
$（'#tt'）.tree（'expand'，node.target）；
}
函数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'）；
}

当我运行此程序时，没有保存任何内容

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

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

我也使用了以下链接：

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

正是这样做的

像这样使用它：

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

使用它还可以存储

字符串化-ed对象：
var obj = { a : 1, b : 2};
localStorage.setItem('myObj', JSON.stringify(obj));
var obj2 = JSON.parse(localStorage.getItem('myObj'));

当然这是可以做到的
一旦您有了JSON字符串（我假设您知道如何获取它，因为如果没有，这是一个完全不同的问题），您可以使用以下函数保存它：
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”的文件，其中包含一个JSON对象，其名称为obj
，他们不是要求客户机将其存储在localStorage中，而是希望使用它来实际保存文件。哦，我明白了，我不是那样理解的。下载属性在Internet Explorer中不起作用。@DustinPoissant:我根据您的回答更改了代码，但没有任何效果…请在帖子中查看我的代码一次。谢谢，因为您获取了树元素的内部HTML，并试图对其调用JSON.stringify。这不会给您一个JSON字符串，它可能只会给您一个错误。如果您想知道如何从该插件的树中获取JSON数据，那么这是一个与如何获取完全不同的问题将一个json字符串保存为一个文件（我认为这就是所要求的）…另一个问题的答案可能可以在这里找到（我没有全部阅读，但您可以）是不是应该是charset=utf-8
？你是想让用户保存一个实际的JSON文件，还是只想把它存储在浏览器中供你以后使用？@BillCriswell:我想让用户保存一个实际的JSON文件Dustin在下面发布的除了IE之外，对大多数浏览器都有效。如果你需要IE支持，你必须去服务器端。Google“内容配置”。不确定您在服务器端使用的是什么，但都是相同的想法：