如何使用 js 将公司树结构存储到本地存储答案

【问题标题】：How to Store Company Tree Structure to Local Storage Using js如何使用 js 将公司树结构存储到本地存储
【发布时间】：2020-12-05 04:02:19
【问题描述】：

我在一个 HTML 页面上创建了一个树形结构，用户根据他的要求创建了这样一个公司树形结构。但我希望这个结构数据保存在本地存储中。我可以在另一个 HTML 页面上使用这些数据并在那里创建相同的结构。

HTML 代码。

<ul class="isParent" id="backend" onclick="myFunction(event)">
    <li><span class="caret-down edit" onclick="caret()">Ruhi Soya</span>
        <ul class="nested">
            <li class="ifChild"><span class="caret-down edit" onclick="caret()">Managing Director</span>
                <ul class="nested">
                    <li class="ifChild"><span class="caret-down edit" onclick="caret()">CEO</span>
                        <ul class="nested">
                            <li class="ifChild"><span class="caret-down edit" onclick="caret()">Production President</span>
                                <ul class="nested">
                                    <li class="ifChild"><span class="caret-down edit" onclick="caret()">Vice President</span>
                                        <ul class="nested">
                                            <li class="ifChild"><span class="caret-down edit"
                                                    onclick="caret()">Production Manager</span>
                                                <ul class="nested">
                                                    <li class="ifChild"> <span class="edit" id="edit">Managers</span></li>
                                                    <li class="ifChild"><span class="edit">Engineers</span></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="ifChild"><span class="caret-down edit" onclick="caret()">Project Manager</span>
                                        <ul class="nested">
                                            <li class="ifChild"><span class="caret-down edit" onclick="caret()">Engineer</span>
                                                <ul class="nested">
                                                    <li class="ifChild"> <span class="edit" id="edit">Contractors and Development Team</span></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="ifChild"><span class="caret-down edit" onclick="caret()">Marketing &amp; Sales ead President</span>
                                <ul class="nested">
                                    <li class="ifChild"><span class="caret-down edit" onclick="caret()">Marketing Head</span>
                                        <ul class="nested">
                                            <li class="ifChild"><span class="caret-down edit"> onclick="caret()">Regional Managers</span>
                                                <ul class="nested">
                                                    <li class="ifChild"> <span class="edit" id="edit">Area Managers</span></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="ifChild"><span class="edit">Sales Head</span></li>
                                </ul>
                            </li>
                            <li class="ifChild"><span class="edit">R&amp;D department</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

如何将创建的这些数据存储到本地存储，并将相同的 HTML 创建到另一个 HTML div。

【问题讨论】：

据我了解，用户尽了他/她的职责。你为了做你的尝试做了什么？
因为用户结构创建了各种错误，这些错误作为父元素的 null 值出现在控制台中。
这是我今天读到的最不清楚的东西 :) 请更清楚。为了解决您的问题，您尝试了哪些操作？遇到了哪些错误？

标签： javascript html css bootstrap-4

【解决方案1】：

为了拯救你可以这样做：

localStorage.setItem('my-saved-content', document.getElementById('backend').innerHTML);

并将保存的信息恢复到另一个页面上的元素中：

document.getElementById('some-id').innerHTML = localStorage.getItem('my-saved-content')

【讨论】：