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

Question

如果我需要存储动态创建的内容，当插入到页面中时，会在容器中具有预定义的位置？

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

这个框也可以使用jQuery-ui来拖动，所以位置不会总是一样的。现在，如果我要重新加载页面，我需要页面看起来与重新加载之前完全一样，包括位置和用户动态创建的内容。

我知道可能有很多方法可以做这样的事情，但是有限制。由于没有可用于存储此信息的服务器，我仅限于使用：

• 本地存储
• Web SQLite

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

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

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

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-localstorage。这会覆盖backbone.sync 方法，以便将模型保存在本地。

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