State

Persist the state (scale, position, min/max nodes) in the url or indexedDB

Default value: null

Options:

• name
• readFromLocalStorage
• writeToLocalStorage
• readFromIndexedDB
• writeToIndexedDB
• readFromUrlParams
• writeToUrlParams

Code example:

 
     var family = new FamilyTree(document.getElementById('tree'), {
        state: {
            name: 'StateForMyTree',
            readFromLocalStorage: true,
            writeToLocalStorage: true,
            readFromIndexedDB: true,
            writeToIndexedDB: true,
            readFromUrlParams: true,                    
            writeToUrlParams: true
        },
            ...
    });
    

1. Local storage

Use name to save a state name

Code example:

 
     var family = new FamilyTree(document.getElementById('tree'), {
        state: {
            name: 'StateForMyTree',
            readFromLocalStorage: true,
            writeToLocalStorage: true,
        },
            ...
    });
    

You can test the state here by changing the position of the chart and refreshing the page (F5)
Limitation: most browsers has 5MB limit of the local storage.

Edit in BALKAN Code

2.IndexedDB

Usage is the same as Local storage.
Limitations: does not work in iframe.

Code example:

 
     var family = new FamilyTree(document.getElementById('tree'), {
        state: {
            name: 'StateForMyTree',
            readFromIndexedDB: true,
            writeToIndexedDB: true,
        },
            ...
    });
    

3.URL

Use stateToUrl method to open the saved state in the browser:

Signature:

 
family.stateToUrl();
    

Edit in BALKAN Code

Priority

1. readFromUrlParams
2. readFromLocalStorage
3. readFromIndexedDB