javascript - 如何使用本地存储存储更多数据

Question

< table cellpadding = "0"
cellspacing = "0"
border = "0"
width = "60%"
align = "center" >

< tr > < td style = "width: 50% ;vertical-align:top;" > < table cellpadding = "0"
cellspacing = "0"
border = "5"
width = "100%" > < tr > < td style = "height: 10px;width:100%; text-align:center;"
colspan = "2"
class = "vth" > General Properties < /td>
                                                                                </tr > < tr > < td style = "height: 10px;width:60%;"
class = "vtd" > Name < /td>
                                                                                    <td style="height: 10px;width: 40%;" class="vtd">Hydrogen</td > < /tr>
                                                                                <tr>
                                                                                    <td style="height: 10px;width:60%;" class="vtd">Symbol </td > < td style = "height: 10px;width: 40%;"
class = "vtd" > H < /td>
                                                                                </tr > < tr > < td style = "height: 10px;width:60%;"
class = "vtd" > Atomic Number < /td>
                                                                                    <td style="height: 10px;width: 40%;" class="vtd">1 </td > < /tr>
                                                                                <tr>
                                                                                    <td style="height: 10px;width:60%;" class="vtd">Pronunciation</td > < td style = "height: 10px;width: 40%;"
class = "vtd" > /ˈhaɪdrɵdʒɨn/hye - dro - jin < /td>
                                                                                </tr > < tr > < td style = "height: 10px;width:60%;"
class = "vtd" > Element category < /td>
                                                                                    <td style="height: 10px;width: 40%;" class="vtd">nonmetal </td > < /tr>
                                                                                <tr>
                                                                                    <td style="height: 10px;width:60%;" class="vtd">Group </td > < td style = "height: 10px;width: 40%;"
class = "vtd" > 1 < /td>
                                                                                </tr > < tr > < td style = "height: 10px;width:60%;"
class = "vtd" > Period < /td>
                                                                                    <td style="height: 10px;width: 40%;" class="vtd">1 </td > < /tr>
                                                                                <tr>
                                                                                    <td style="height: 10px;width:60%;" class="vtd">Block</td > < td style = "height: 10px;width: 40%;"
class = "vtd" > s < /td>
                                                                                </tr > < tr > < td style = "height: 10px;width:60%;"
class = "vtd" > Atomic Weight < /td>
                                                                                    <td style="height: 10px;width: 40%;" class="vtd">1.00794(7) </td > < /tr>
                                                                                <tr>
                                                                                    <td style="height: 10px;width:60%;" class="vtd">Electron configuration</td > < td style = "height: 10px;width: 40%;"
class = "vtd" > 1s < sup > 1 < /sup> </td > < /tr>
                                                                                <tr>
                                                                                    <td style="height: 10px;width:60%;" class="vtd">Electrons per shell</td > < td style = "height: 10px;width: 40%;"
class = "vtd" > 1 < /td>
                                                                                </tr >

< tr > < td style = "height: 10px;width:100%; text-align:center;"
colspan = "2"
class = "vth" > Atomic Properties < /td>
                                                                                </tr > < tr > < td style = "height: 10px;width:60%;"
class = "vtd" > Oxidation states < /td>
                                                                                    <td style="height: 10px;width: 40%;" class="vtd">1, -1 (amphoteric oxide) </td >

< /tr>
                                                                                <tr>
                                                                                    <td style="height: 10px;width:60%;" class="vtd">Electronegativity</td > < td style = "height: 10px;width: 40%;"
class = "vtd" > 2.20(Pauling scale) < /td>
                                                                                </tr > < tr > < td style = "height: 10px;width:60%;"
class = "vtd" > Ionization energies < /td>
                                                                                    <td style="height: 10px;width: 40%;" class="vtd">2.20 (Pauling scale)</td > < /tr>
                                                                                <tr>
                                                                                    <td style="height: 10px;width:60%;" class="vtd">Covalent radius </td > < td style = "height: 10px;width: 40%;"
class = "vtd" > 31±5 pm < /td>
                                                                                </tr > < tr > < td style = "height: 10px;width:60%;"
class = "vtd" > Van der Waals radius < /td>
                                                                                    <td style="height: 10px;width: 40%;" class="vtd">120 pm</td > < /tr>

这里我展示的是，周期性元素的所有数据都手动存储在表中。像这样我就有 118 个周期元素。如果我对所有这些事情进行硬编码，则加载页面就太困难了。任何人都可以建议如何将这些数据存储在本地存储或数据库或其他东西上。我可以通过哪种方式存储批量数据。每个周期元素不具有相同的属性。

Answer 1

You can save any number of data in the local storage..!! Local storage offers 5 MB per origin in Google Chrome, Mozilla Firefox, and Opera; 10 MB per storage area in Internet Explorer. look here for more details

您无法直接从服务器将值保存到本地存储，您需要 JavaScript 将其保存到本地存储。因此，如果您只使用一次数据，那不会有任何区别。

如果您想一次又一次地使用周期表中的值，那么您可以使用一些 onLoad javascript 将周期表的值保存在网络浏览器中功能。这样就不会每次都从服务器获取它。

你可以看看here举个例子。