Question

我正在开发动态页面。我只是想到我的页面上的一些DOM元素的文本应该是可编辑的，即按钮，标签和段落的文本等。

有没有办法用JavaScript / jQuery保存操作的DOM，以便我的DOM更改保持持久性？

注意：我正在处理动态页面而不是静态页面我知道如果它是静态页面，那么很容易通过上下文菜单中的另存为Html 来保存被操纵的DOM。

我不想使用除jQuery之外的任何框架。

Answer 1

您可以通过评论指出保存用户在浏览器中的更改。但是一旦用户清除缓存，这些更改就会丢失。（https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API）

如果我理解你想要做什么，你应该在每次更改后进行一次ajax调用，以便在你的数据库中保存标签，段落或你修改过的任何新值。

您可以使用本机javascript或jquery（尽管jquery语法更易于阅读：http://api.jquery.com/jquery.ajax/）

Answer 2

我得到的是您希望您的用户更改页面内容，一个简单的实现是创建一个记录该特定部分的所有更改的函数，然后保存它通过ajax将数据发布到您的服务器，保存页面状态，

考虑以下示例

<div class="comment" data-cid="3344">
     <div class="comment-text">my comment i want to change</div>
     <ul>
       <li class="edit">edit</li>
       <li class="del">delete</li>
     </ul>


</div>

和js

     $('.edit').click(function(){
           var ul = $(this).parent();
           var comment = ul.parent();
           comment.find(".comment-text").attr("contentEditable","true");
           ul.append("<li class="save">save</li>")

           comment.find('.save').click(function(){
                   new data = {
                     value:comment.find("comment-text").html(), 
                     cid: comment.data("cid")  
                   }


                   $.ajax({
                     type: "POST",
                      url: url,
                      data: data,
                      success: function(returndata){alert(saved)},
                      dataType: dataType
                    });
           }); // save click
   });

在php中

<?php 
// check if session
$conn = mysqli_connect($servername, $username, $password); 

// consider you have a comment active record pattern implemented !!
$c = new comment;
comment->load($_POST["cid"]);
comment->setValue($_POST["value"]);
comment->save();

现在这是一个简单但不是那么粒子的演示，你可以添加所有类型的复杂性，比如处理会话，或者来自键，或者甚至不将cid暴露给前端..

使用jquery应用Dom Manipulation后保存更改

2 个答案: