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

如果我需要存储动态创建的内容（插入页面时，这些内容将在容器中具有预定义位置），那么最好的方法是什么

为了让它更容易理解，假设用户在一个输入框中输入了一些东西，结果是一个YouTube URL。一旦他/她点击回车键，我就获取URL并创建一个嵌入式视频，并将其添加到类名

框

容器中的页面中这是动态内容

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

我知道做这件事可能有很多方法，但也有局限性。由于没有可用于存储此信息的服务器，我仅限于使用：

• 本地存储
• Web SQLite

还值得一提的是，这将用于谷歌浏览器的扩展

所以我的问题是，考虑到这些限制，存储此类信息的最佳方式是什么

我在这里使用的示例：

沿着这些思路做点什么就足够了

您需要一个唯一的salt，以确保没有人覆盖您在localStorage中的位置，然后您需要从您的内容中获取一个唯一的id，您的存储位置就是这个id

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

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

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

---

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

重新启动浏览器后是否需要保留该位置？@serg:是的，它将是一个Chrome扩展。：）

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;