Recreate a tree from localStorage

[Bruce]

Hi,

So I have a multipage form wizard - I create a jstree instance via state and checkbox plugins on step 1 and when I move to step 2, presumably it is destroyed although its state is saved in localstorage.  When I go back to step 1, I want to recreate the tree with the data in localStorage.  Is there an option to instantiate a jstree instance with what is in localStorage?  Doing the below will simply re-create a new jstree without the saved data.

$("#my-tree").jstree

      core:

        themes: 

          icons: false

      checkbox:

        keep_selected_style: false

      state: 

        key: "card-benefits"

      plugins: ["state", "checkbox"]

[Ivan Bozhanov]

Only a list of opened and selected nodes is saved in localStorage, not the actual data. Of course it is pretty easy to use localStorage as your data (provided you saved it there first):

if(!localStorage.getItem("some-item-you-saved-to")) { localStorage.setItem("some-item-you-saved-to", [/* default tree if nothing is in localStorage */]); }
$("#my-tree").jstree({ "core" : { "data" : localStorage.getItem("some-item-you-saved-to"), ...
// and then when a change in structure occurs save to localStorage:
$("#my-tree").on("create_node.jstree delete_node.jstree move_node.jstree rename_node.jstree copy_node.jstree", function (e, data) { localStorage.setItem("some-item-you-saved-to", data.instance.get_json()); })

Best regards,
Ivan

[Bruce]

Thank you Ivan - how do I re-instantiate the tree with the list of selected nodes from localStorage?  When I navigate away from the page and return to it seems to "erase" the selections I have made previously from the checkboxes (I am using state and checkbox plugin).

[Bruce]

Basically, I want to instantiate a tree from something like this piece of state in localStorage:

{"state":{"core":{"open":["j3_1"],"scroll":{"left":0,"top":0},"selected":["j3_4"]}},"ttl":false,"sec":1399408841219}

[Bruce]

I guess I should rephrase "instantiate" to create the tree, and then select the right nodes using the below 'state' hash.

[Ivan Bozhanov]

Then all you need is to create the tree and use the state plugin ... I am sorry but I do not understand the question - you should not do anything manually - just add the state plugin. It would be a good idea to add IDs to your nodes as I can see you are using the autogenerated once and that you have several tree instances ... maybe that is why you do not see the state reapplied. Start using IDs on your nodes and simply add the "state" plugin - that will be enough (if you have several instances on one page which use the state plugin then specify a unique state key for each one - check the "state" : { "key" ... setting.

Best regards,
Ivan

[Bruce]

Thank you Ivan - that worked.  I thought I had to do something manually because jstree didn't seem to use the state saved in localStorage to mark the correct nodes as checked/selected even though I did have a "key" in the state setting of the state plugin. Do you think there is a part of the code that explains why setting custom ID's to nodes such as the below allows me to see state reapplied when relying on the auto-generated ones does not?  FYI - I can see state reapplied with auto-generated ID's if I do a page refresh.  

<ul>

  <li id="redbox">Red Box</li>

</ul>

[Ivan Bozhanov]

If you destroy an instance and create a new one on the same element, jstree considers this a new instance (since you are not refreshing but destroying and creating). The instance ID is a part of the autogenerated IDs ... this is why when you recreate and instance (without a refresh) j1_2, becomes j2_2, etc, so the state plugin can no longer work (since j1_2 is no longer in the tree).

Best regards,
Ivan