Enregistrer une modification dynamique en local d'une page html
Bonjour,
je travaille en local, j'ai un simple fichier html, et un script jquery, dans ce fichier jquery j'ajoute dynamiquement des éléments dans la page html comme
un simple paragraphe avec <p> ou un simple <div>lors d'un clic via un bouton, et tout fonctionne bien. Mon problème est que je veux enregistrer ces modifications de manière permanentes dans la page html, c'est à dire que ces nouveaux éléments restent lors du rafraîchissement de la page, donc si je regarde le code de la page html , j'aimerai trouver les balises que j'ai ajouté précédemment.
Merci de votre aide :)
Peut etre un début de solution
J'ai eu le même soucis sur un projet avec du drag n drop. Dans mon cas je me dirige vers de l'applicatif du coup je dois résoudre çà en transformant mon DOM en objet Json, une belle galère quand on débute. Mais dans ton cas il peut y'avoir une solution très simple en enregistrant ton DOM au format txt et en faisant un traitement php
Imaginons que ton HTML soit :
Code:
1
2
3
4
5
| <div id = "test">
// élément du DOM et élément du DOM qui se rajoute
</div> |
Je vais imaginer que dans ton serveur tu à ta page html, un dossier nommé php avec un fichier nommé 'save.php , un dossier nommé javascript avec un fichier nommé save.js et un dossier "text" avec dedans un fichier 'test.txt' dans lequel tu colles ton HTML contenu dans la div #test
Pour ton code Javascript :
Code:
1
2
3
4
5
6
7
| function enregistrer()
$.post("./php/save.php" ,
{
resultat: document.getElmeentById('test')
// en gros tu récupère le html contenu dans la div #test que tu stock dans la variable 'résultat' et tu l'envois à save.php
}) |
Pour ton code PHP
Code:
1
2
3
4
5
6
| <?php
file_put_contents('../text/modif.txt',$_POST['resultat']);
die();
// tu enregistres le html contenu dans la variable resulat dans le fichier text 'modif.txt'
?> |
Maintenant ton fichier html doit ressemble à ça sans oublier de rennomer ta page avec l'extension php:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <html>
<head>
/// les meta, css, etc....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>/// l’accès à la librairie JQUERY pour le $.post de ta fonction enregistrer
</head>
<body>
<div id = "test">
<?php
$modif = 'text/modif.txt';
if (file_exists($modif)) {
include 'text/modif.txt';
} else {
include 'text/test.txt' ;
}
?>
</div>
<input type = "button" id = "save" value = "enregistrer" onclick = 'enregistrer()'/>
<script>src="javascript/save.js"></script> |
Je suis débutant ce que je te propose est une solution qui m'a été donné par un membre du site que je remercie et qui j’espère pourra t'aider dans ton projet.
