0

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

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

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

$('#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 并存储它。警报正在显示本地存储中的内容。我可能应该尝试存储几个 DOM 状态并将它们放入变量中。之后，在每个 UNDO 上，删除一个变量......我不确定这是不是这样。

对此有任何意见吗？谢谢

4

1 回答 1

0

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

现在，一些想法：

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

您是否要实现可撤消操作的“堆栈”？如果你这样做会很酷;）

于 2010-03-10T17:42:47.430 回答