State

Use the state API to persist scale, position, expand or collapse state, and focus in the URL, local storage, or session storage.

Default value: false

Options

• name
• readFromLocalStorage
• writeToLocalStorage
• readFromUrlParams
• writeToUrlParams
• readFromSessionStorage
• writeToSessionStorage

Example

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.state.name = 'StateForMyTree';
familyTree.state.writeToLocalStorage = true;
familyTree.state.readFromLocalStorage = true;
familyTree.state.writeToSessionStorage = true;
familyTree.state.readFromSessionStorage = true;
familyTree.state.writeToUrlParams = true;
familyTree.state.readFromUrlParams = true;

1. Local Storage

Use name to set a state name.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.state.name = 'StateForMyTree';
familyTree.state.writeToLocalStorage = true;
familyTree.state.readFromLocalStorage = true;

You can test the state by collapsing nodes, changing the chart position, and refreshing the page.

Limitation: most browsers have a 5 MB local storage limit.

Edit in BALKAN Code

2. Session Storage

Usage is the same as local storage.

Limitation: session storage does not work in an iframe.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.state.name = 'StateForMyTree';
familyTree.state.writeToSessionStorage = true;
familyTree.state.readFromSessionStorage = true;

You can test the state by collapsing nodes, changing the chart position, and refreshing the page.

Edit in BALKAN Code

3. URL Parameters

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.state.name = 'StateForMyTree';
familyTree.state.writeToUrlParams = true;
familyTree.state.readFromUrlParams = true;

Use stateToUrl() to open the current state in another window.

document.getElementById('button').addEventListener('click', function () {
  let location = window.location + '?' + familyTree.stateToUrl();
  window.open(location);
});

Edit in BALKAN Code