Storing a Business Hierarchy in Browser Storage with JavaScript

Question

Storing a Business Hierarchy in Browser Storage with JavaScript

I have developed a hierarchical tree structure on an HTML page where users can customize a company's organizational chart based on their needs. However, I am looking to store this structured data in local storage so that it can be utilized on another HTML page to recreate the same organizational chart.

Here is the HTML code:

<ul class="isParent" id="backend" onclick="myFunction(event)">
    (HTML code continues...)

Is there a way to save this created data into local storage and replicate the HTML structure onto another section of an HTML page?

javascript html css bootstrap-4

Answer 1

Answer №1

If you want to keep something for later, you can use this method:

localStorage.setItem('my-stored-data', document.getElementById('backend').innerHTML);

Then, when you need that information again on a different page, you can retrieve it like this:

document.getElementById('some-id').innerHTML = localStorage.getItem('my-stored-data')

Answer 2

If you want to keep something for later, you can use this method:

localStorage.setItem('my-stored-data', document.getElementById('backend').innerHTML);

Then, when you need that information again on a different page, you can retrieve it like this:

document.getElementById('some-id').innerHTML = localStorage.getItem('my-stored-data')

Storing a Business Hierarchy in Browser Storage with JavaScript

Answer №1

Similar questions

Accessing the observable's value by subscribing to it

Load Image Timing Discrepancy in Web Development (jQuery/PHP/HTML)

What is the best method for choosing elements when I already possess a DOM element?

Hide the scrollbar in MUI Grid, all while maintaining the ability to scroll seamlessly

Angular 4 showcases the information stored within this dataset

Disable multiple buttons at once by clicking on them

What is the best way to place text alongside a shape?

When invoking a function that has been returned, the error message "invalid function" is displayed

What steps should I follow to enable webview autocomplete for a login form on Ionic's Capacitor in iOS?

Best practices for integrating text and images within a website header using CSS and HTML

Waiting for Selenium in Javascript

Disabling eslint does not prevent errors from occurring for the unicorn/filename-case rule

Using z-index to position a paragraph element behind other elements in a webpage

Is there a way to use jQuery to animate scrolling on a mobile web browser?

Parsing temporary storage of database query results

Tips for improving the readability of my code

Can you explain the distinction between onKeyUp and onKeyUpCapture in React (as well as onKeyDown/Capture)?

What is the best way to style output in jQuery for a specific div?

Tips for preserving the status of radio buttons in a React application

Using Vue.js method passing an argument and setting a delay with setTimeout function