如何使用localstorage存储更多数据

时间:2014-04-29 06:24:11

标签: javascript html

< 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个周期元素。如果我硬编码所有这些东西,加载页面太困难了。任何人都可以建议如何将这些数据存储在本地存储或数据库或其他东西。我可以通过哪种方式存储批量数据。每个周期性元素不具有相同的属性。

1 个答案:

答案 0 :(得分:0)

  

您可以在本地存储中保存任意数量的数据.. !!本地存储   在Google Chrome,Mozilla Firefox和Opera中提供每个源5 MB的内容;   Internet Explorer中每个存储区域10 MB。 look here for more details

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

如果要反复使用周期表中的值,则可以使用某个onLoad javascript函数在Web浏览器中保存元素周期表的值。这样它每次都不会从服务器上获取。

您可以查看here示例。