How to store more data using localstorage

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>

Here what i showed is, all the data for a periodic element are stored in a table manually. Like this i am having 118 periodic element . If i hard code all those things , it is too difficult to load the page. Can anyone please suggest how to store those datas on local storage or database or something. In which way i can store bulk datas. Each periodic element is not having same attributes.

I honestly have to say that this is some of the weirdest html formatting I've ever seen. — Nzall, Apr 29 '14 at 06:26
What do you mean "local storage"? On the client or on the server? And what do you mean "too difficult to load the page"? — Jonathan M, Apr 29 '14 at 06:27
In which format is your data available and what is the purpose of the html code you are generating? As a rough sketch, if you can query a database you might transforn the query output into html, xml, json, possibly transforming it again on the client using the xslt engine or javascript/jquery. Storage of the data can be done using localstorage (key/value pairs, javascript api), html data attributes, jquery's data attribute, hidden document fragments, xml islands. If you don't mind using deprecated technology, you can even resort to websql, the full-fledged client-side sql database. — collapsar, Apr 29 '14 at 06:36

score 0 · Answer 1 · edited May 23 '17 at 10:32

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

You can't save values to local storage directly from the server, you need JavaScript to save that to local storage. So it wont make any difference if you are using the data only once.

If you want to use the values in the periodic table again and again, then you can save the values of the periodic table in the web browser using some onLoad javascript function. so that it wont get fetched from the server every time.

you can look here for an example.

How to store more data using localstorage

1 Answers1