{% extends "base" %}

{% block title %}Save the state in javascript tree{% endblock %}
{% block h1 %}Example 4 - Save the state{% endblock %}

{% block previous_url %}drag_and_drop.html{% endblock %}
{% block previous_title %}Example 3{% endblock %}

{% block next_url %}load_on_demand.html{% endblock %}"
{% block next_title %}Example 5{% endblock %}

{% block contents %}
    <div id="tree1" data-url="/example_data/"></div>

    <p>
       If you set the option <strong>saveState</strong> to true, then jqtree remembers the tree state after a page reload.
    </p>
    <ul>
        <li>
            JqTree save the state into localStorage.
            If the browser does not support localStorage, then jqTree saves the state in a cookie.
        </li>
        <li>
            You must include the <a href="https://github.com/carhartl/jquery-cookie">jquery-cookie</a> plugin for cookie support.
        </li>
    </ul>

    <h3>html</h3>
<pre><code class="language-markup">&lt;div id="tree1" data-url="/example_data/"&gt;&lt;/div&gt;</code></pre>

    <h3>javascript</h3>
<pre><code class="language-javascript">$('#tree1').tree({
    saveState: true
});
</code></pre>

    <p>
        Giving the <strong>saveState</strong> a string value sets the storage key. The default key is 'tree'.
    </p>

<pre><code class="language-javascript">$('#tree1').tree({
    saveState: 'my-tree'
});    
</code></pre>
{% endblock %}

{% block script %}
    <script>
        $.mockjax({
            url: '*',
            response: function(options) {
                this.responseText = ExampleData.example_data;
            },
            responseTime: 0
        });

        $(function() {
            $('#tree1').tree({
                saveState: true
            });
        });
    </script>
{% endblock %}
