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

Question

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

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

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

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

• localStorage的
• 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方法，因此模型会保存在本地。

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