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

Question

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

我想要的是让这些形状保持在某个位置，这样当用户回来时他可以恢复原来的形状。 任何想法？

Answer 1

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

使用localStorage的，你可以保存数据以：

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

后来随着阅读：

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

，但你需要有localStorage的支持的浏览器。

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