保存在html画布或网页中所做的更改

Question

我有一个HTML画布，用户在其上绘制一些形状。现在假设在绘制一些形状后，用户键入一些新的url并转到该URL。当用户按下浏览器的后退按钮并返回到我的页面时，之前绘制的所有形状都消失了。

我想要的是将这些形状保留在某个位置，这样当用户回来时，他可以恢复以前的形状。 有什么想法吗？

Answer 1

您需要保存用户在对象中绘制的内容，然后将其序列化为JSON。在序列化时，您可以使用localstorage，cookie或数据库存储JSON。

使用localStorage，您可以使用以下内容保存数据：

try {
    localStorage.setItem(“jsonName”, jsonString);
} exception(e) {
    // do something
}

后来用以下内容阅读：

var jsonString = localStorage.getItem(“jsonName”);

但您需要一个支持localStorage的浏览器。

还存在兼容性问题，需要注意，请参阅DOM storage。