使用自定义用户生成的内容保存可拖动元素的位置

Question

如果我需要存储动态创建的内容，当插入到页面中时，将在容器内有一个预定义的位置，那么更好的路径是什么？

为了更容易理解一点，假设用户在输入框中输入了一些内容，结果是一个 YouTube URL。一旦他/她按下 Enter 键，我就会获取 URL 并创建一个嵌入视频，并将其添加到类名为 box 的容器内的页面中。 这是动态内容。

该框也可以使用 jQuery-ui 进行拖动，因此位置不会始终相同。现在，如果我要重新加载页面，我需要页面看起来与重新加载之前完全相同，包括位置和用户动态创建的内容。

我知道可能有多种方法可以做到这一点，但有限制。因为没有可用的服务器来存储这些信息，所以我只能使用：

• localStorage
• Web SQLite

还值得一提的是，这将在 Google Chrome 扩展中使用。

所以我的问题是，鉴于限制，存储此类信息的最佳方式是什么？

_{我在这里使用的示例：http://fiddle.jshell.net/Shaz/pfs8a/30/显示/灯光/}

Answer 1

function contentHash(domNode) {
    ... // return unique id based on content / dom node.
}

var myUniqueSalt = ... // unique salt for your unique id's

window.localStorage.setItem(uniqueSalt + contentHash(domNode), "{'x':" + x + ",'y':" + y "}");

...

var position = JSON.parse(window.localStorage.getItem(uniqueSalt + contentHash(domNode));

object.x = position.x;
object.y = position.y;

沿着这些思路的东西应该足够了。

您需要一个唯一的盐来确保没有人覆盖您在 localStorage 中的位置，然后您希望从存储该位置的内容中获取一个唯一的 ID。

只需将位置存储为 JSON 字符串，然后使用 JSON.parse 获取位置对象即可。

当然，检查 getItem 是否返回空字符串，如果是，则使用默认值。

我会进一步建议您使用backbone.js来存储数据并将其连接到 backbone.js-本地存储。它会覆盖backbone.sync方法，以便模型保存在本地。

这意味着您不必将数据序列化到本地存储中，也不必将其从本地存储中序列化。