保存在HTML畫布或網頁中所做的更改

我有一個用戶在其上繪製某些形狀的HTML畫布。現在假設在繪製一些形狀之後，用戶鍵入一些新的URL並轉到該URL。當用戶按下瀏覽器的後退按鈕並返回到我的頁面時，之前繪製的所有形狀都消失了。保存在HTML畫布或網頁中所做的更改

我想要的是讓這些形狀保持在某個位置，這樣當用戶回來時他可以恢復原來的形狀。任何想法？

您需要保存用戶在對象中繪製的內容，然後將它們序列化爲JSON。在序列化時，您可以使用本地存儲將JSON存儲在Cookie或數據庫中。

使用localStorage的，你可以保存數據以：

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

後來隨着閱讀：

var jsonString = localStorage.getItem(「jsonName」);

，但你需要有localStorage的支持的瀏覽器。

還有兼容性問題，您需要注意，請參閱DOM storage。

2012-02-13 07:37:33 Jonas

我將這些形狀中的每一個都保存爲json對象並將其保存在服務器上。你可以給我一些關於代碼使用localestorage保存在客戶端的想法 – 2012-02-13 07:42:28

@AmitSharma：嘗試用我更新的答案。 – Jonas 2012-02-13 07:56:58

回答