<!DOCTYPE HTML><HTML><Head> <Metaname= "Author"content= "Yeeku.h.lee (crazyit.org)" /> <Metahttp-equiv= "Content-type"content= "text/html; CHARSET=GBK" /> <title>Client Message Board</title> <styletype= "Text/css">Table{Border-collapse:collapse; }td, Th{Border:1px solid #888;padding:4px; } </style></Head><Body><H2>Client Message Board</H2><textareaID= "MSG"name= "MSG"cols= " the"rows= "8"></textarea><BR/><inputtype= "button"value= "Add Message"onclick= "addmsg ();"/><inputtype= "button"value= "clear Message"onclick= "clearmsg ();"/><HR/><Tablestyle= "width:550px"> <TR> <th>Message content</th> <th>Message time</th> </TR> <tbodyID= "Show"></tbody></Table><Scripttype= "Text/javascript"> //Load Message Information varloadmsg= function() { varTB=document.getElementById ("Show"); //clears the contents of the original display. tb.innerhtml= ""; //Traverse all message information for(varI= 0; I<localstorage.length; I++) { varKey=Localstorage.key (i); varDate= NewDate (); Date.settime (key); //Get message Time varDatestr=date.tolocaledatestring ()+ " " +date.tolocaletimestring (); //Get message content varvalue=Localstorage.getitem (key); varRow=Tb.insertrow (i); //Add the first cell and display the message contentRow.insertcell (0). InnerHTML=value; //Add a second cell and display the message content. Row.insertcell (1). InnerHTML=Datestr; } } varaddmsg= function() { varmsgelement=document.getElementById ("msg"); var Time= NewDate (). GetTime (); //Save your message with the current time keyLocalstorage.setitem (time, Msgelement.value); Msgelement.value= ""; Alert ("The data has been saved. "); Loadmsg (); } functionclearmsg () {//clears the data stored in the local storage. localstorage.clear (); Alert ("all messages have been cleared. "); Loadmsg (); } window.onload=loadmsg ();</Script></Body></HTML>
H5 Web Storage-based client message board