Вы можете легко загружать элементы для отображения пользователям.
Просто переберите все элементы в локальном хранилище, используя Javascript при загрузке страницы ...
<body>
<script language="JavaScript" type="text/javascript">
var item = "";//array to hold string values for each key value
var key ="";//array to hold string values for each key name
for (i=0;i < localStorage.length;i++) {
var count = 0;
if (key != "" | key != null) { //or matches what you're looking for
item[count] = localStorage.getItem(key);
key(i) = localStorage.key(i);
count += 1;
}
}
function load_table()
{
if (item == "" || item == " " || item == null) {
document.write("<div id=\"list_table\" style=\"display: block;\">");
document.write("<h3>You have no stored items.</h3>");
document.write("</div>");
}
else {
document.write("<div id=\"list_table\" style=\"display: block;\">");
document.write("<h3>Stored Items</h3>");
document.write("<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
for (i=0;i < item.length;i++) {
document.write("<tr><td width=\"33%\" valign=\"top\">"+item(i)+"</td>");
document.write("<td width=\"67%\" valign=\"top\" style=\"padding-left: 0px; text-transform: capitalize;\">"+key(i)+"</td></tr>");
}
}
document.write("</table>");
document.write("</div> <!-- end list_table div -->");
} // end if (item != "")
} // end load_table
</script>
В html вы помещаете div, который можно показать или скрыть, в соответствующем месте.
<div id="items_table" style="display: none;">
<script language="JavaScript" type="text/javascript">
//alert("calling load_table");
load_table();
//alert("DONE calling load_table");
</script>
</div>
Если они нажимают на ссылку, вы можете отобразить items_table, который заполняется при загрузке страницы и скрыт. Пока у вас нет тысячи предметов для загрузки, он загружается быстро.
Я могу выкопать ссылку на переключение отображения между блоками и ничего для свойства стиля отображения, если хотите.