Comment faire pour enregistrer les données JSON localement (sur la machine)?

Je suis en utilisant le lien suivant pour créer un arbre comme la structure:
LIEN

C'est mon code :

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

Quand je suis en cours d'exécution, rien ne se sont sauvés.

J'ai ajouté un bouton "enregistrer" à cette structure du code.

Je veux que quand l'utilisateur clique sur ce bouton enregistrer puis il peut stocker cette arborescence produit que des données JSON sur sa machine locale. Je veux ce que cet arbre est modifiable. Comment puis-je faire cela?

J'ai utilisé le lien suivant pour la même chose:

lien

Je veux que toutes les modifications qui se passe à la id = "tt" peut être récupérée sous forme de JSON et de les stocker sur ma machine locale.

Voulez-vous à l'utilisateur d'enregistrer un véritable fichier JSON ou voulez-vous simplement stockés dans le navigateur pour vous d'obtenir au plus tard?
Je veux que l'utilisateur d'enregistrer un véritable fichier JSON
Ce que Dustin affichés ci-dessous pourrait fonctionner pour la plupart des navigateurs outre IE. Si vous avez besoin d'IE de soutien, vous êtes d'avoir à aller du côté serveur. Google "content-disposition". Pas sûr de ce que vous êtes en utilisant un serveur sage, mais c'est la même idée: stackoverflow.com/questions/1465573/...

OriginalL'auteur POOJA GUPTA | 2015-02-11

15

Sûr que cela peut être fait.

Une fois que vous avez votre chaîne JSON (Im en supposant que vous savez comment l'obtenir parce que si non c'est une autre question tout), vous pouvez l'enregistrer à l'aide de cette fonction:
```
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()
}
```
L'appeler:
```
var obj = {a: "Hello", b: "World"};
saveText( JSON.stringify(obj), "filename.json" );
```
Ce serait rapide de l'utilisation d'enregistrer un fichier nommé "nom de fichier.json", qui contient un objet JSON de obj

Télécharger attribut ne fonctionne pas dans Internet Explorer.
J'ai modifié le code en fonction de votre réponse, mais rien ne fonctionne .. s'il vous plaît voir mon code dans le post une fois.
Merci parce que vous avez pris à l'intérieur HTML de l'arbre de l'élément et essayé d'appeler JSON.stringify sur elle. qui ne vous donne pas une chaîne json il est probablement juste vous donne une erreur.
Si vous voulez savoir comment obtenir les données JSON en arrière de l'arbre de ce plugin alors que c'est complètement différent de la question de comment enregistrer une chaîne json comme un fichier (j'ai pensé que c'est ce qui était demandé)... la réponse à l'autre question, peut probablement être trouvé ici jeasyui.com/forum/index.php?topic=421.0 (je n'ai pas tout lu, mais vous pouvez)
ne devrait-elle pas être charset=utf-8 ?

OriginalL'auteur Dustin Poissant
3

LocalStorage est exactement cela.

L'utiliser comme ceci :
```
localStorage.setItem('myCat', 'Tom');
console.log(localStorage.getItem('myCat')); //Tom
```
Utiliser pouvez l'utiliser pour stocker des stringify-ed objets :
```
var obj = { a : 1, b : 2};
localStorage.setItem('myObj', JSON.stringify(obj));
var obj2 = JSON.parse(localStorage.getItem('myObj'));
```
Ils ne demandent pas à être conservés par les Clients localStorage, mais ils veulent l'utiliser pour réellement sauver le fichier.
Oh, je vois, je n'ai pas compris de cette façon.

OriginalL'auteur n6g7

Vous devez vous connecter pour publier un commentaire.