使用jQuery Cookie保存复杂的页面状态

Question

I have a page with a custom treeview. When a node is expanded, its child nodes are loaded via jQuery Ajax calls.

Now, I would like to save the current state of the treeview so that when the user leaves and returns to the page, the previously expanded treeview stay expanded.

In similar situations, I have saved data like search queries, results or form data in a cookie, using this jQuery plugin: https://github.com/carhartl/jquery-cookie

So far, I can see two options:

1. Save the expanded nodes ID's and reload the treeview from scratch, but:
   • potentially a lot of Ajax calls,
   • difficult to make the calls in the right order (ie don't load the children before the parent is there),
   • waiting time for the calls to finish
2. Save the entire element containing the treeview into a cookie, but:
   • may be a lot of data
   • may have difficulties with attaching the right jQuery events to the node elements when inserting the treeview HTML into the DOM on load.

Thank you in advance for any ideas!

Chris

Answer 1

In the past I used the cookie approach. But the data was too big for the cookie header, so I send the state to the server with ajax and stored it there. Doing this you can restore the state while rendering the tree.