Question

我有一个容器div，其中有几个跨度可拖动。我想为他们建立一个UNDO功能。我在想：

当span属性发生更改（位置，css）时，脚本会检测到DOM更改
DOM更改通过HTML5 localStorage存储
调用UNDO函数时，DOM的最后一个版本将替换当前版本。

我有基本的localStorage代码，它将记录最后的DOM状态：

$('#undo').live('click', function() {

var testObject = $('#container').html();

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

alert( retrievedObject );
// retrievedObject should now replace the current DOM

});
});

现在这段代码只需要当前的DOM并存储它。警报显示localstorage中的内容。我应该尝试存储几个DOM状态并将它们放在变量中。之后，在每个UNDO上删除一个变量...... 我不确定这是否可行。

这个上的任何输入？谢谢

Answer 1

首先，关注你的代码：我认为它是相当正确的，它应该完成这项工作。毕竟你只是在localStorage中放入一个字符串并将其取回。

现在，有些想法：

“#container”的“html”是什么？如果它只是一堆字符串，好吧。否则，在每次“恢复”时，您都在重建DOM的那个分支。如果这是“重”或不重，那取决于你究竟在做什么。
为什么要使用localStorage？ localStorage中的内容是创建它的浏览器的本地内容。这意味着如果用户从另一个浏览器实例打开相同的页面，则无法“实现”UNDO功能。
您确定浏览器的默认UNDO对您来说不够吗？但我猜不是，而且我认为你并没有撤消只涉及一些“＆lt; input type =”text“/＆gt;”的东西。或“＆lt; textarea /＆gt;”

您是否要实施UNDO-able操作的“堆栈”？如果你这样做会很酷;）

jQuery和HTML5 DOM改变了UNDO功能

1 个答案: