如何記錄用戶操作，然後在JavaScript中重新執行它們？

Question

我有一個網頁（全部在客戶端代碼中完成），用戶可以通過不同的按鈕動態添加某些頁面元素。

例如，他們可以單擊名爲「添加組」的按鈕並輸入組名稱。這將創建一個<div class="customGroup">，將該組顯示爲其他一些按鈕中的「標題」，以便在新創建的<div>中添加更多元素。

我希望能夠存儲用戶所做的並且不會丟失，如果他們執行類似的操作，請關閉&重新打開窗口或重新加載頁面。因此，例如，如果他們添加一個「Foo」組並刷新頁面，假設頁面全部爲HTML/JavaScript，則「Foo」丟失。

有什麼方法可以記錄他們的動作並使用緩存/ cookies重新執行它們？或者我需要以其他方式做到嗎？這甚至有可能嗎？

Answer 1

我建議使用localstorage來保存這些數據，跨越窗口打開和關閉。

您可以通過將event listener附加到您關心的元素來找出用戶點擊的內容。您在那裏傳遞的函數可以通過將它們推送到數組來保持對被單擊項的引用。然後你可以點擊它們，當你想使用.click()。

至於用戶在提交數據時輸入的文本，請確保它在localstorage中作爲字符串。在頁面加載時，你可以將這些數據放在任何你想要的地方，所以給它一個元素innerHTML和瞧，你可以重建頁面狀態。