Points:
1. Using Localstorage Storage
The 2._change_record_progress function takes a string as a parameter and uses eval to perform this parameter
3. jquery custom events are used to update the display in real time when data changes
4. CSS issues are not considered in this version of the code
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <!--jquery - <Scriptsrc= "Jquery-3.2.1.js"></Script> <title>Progress Logging Tool</title></Head><Body> <Table> <TR> <TD><inputtype= "text"ID= ' Item '></TD> <TD><inputtype= "text"ID= ' Progress '></TD> <TD><inputtype= "button"value= "Save"onclick= "Save ()"></TD> </TR> </Table> <Script> $( function() {Show (); $( This). Bind ("record_progress_is_changed", show); } ); functionShow () {$ ("table tr:gt (0)"). Remove (); varo=Json.parse (localstorage.record_progress|| "{}"); for(varkincho) { varHTML= "<tr><td>"+k+"</td><td>"+O[k]+"</td></tr>"; $html=$ (HTML). Append ("<td><a href= ' javascript:void (0); ' onclick= ' My_delete.call (this) ' > delete </a></td>"); $("Table"). Append ($html); } } functionSave () {varItem= $("#item"); varProgress= $("#progress"); if(Item.length!=progress.length) {Console.error ("There are errors, the number of entries and the number of progress does not match!"); return false; } _change_record_progress ("o['"+Item.val ()+"']= '"+Progress.val ()+"';"); Item.val (""); Progress.val (""); } functionMy_delete () {var $ This = $( This); varItem= $ This. Parent (). Prev (). Prev (); _change_record_progress ("Delete o['"+Item.text ()+"'];"); } function_change_record_progress (str) {varo=Json.parse (localstorage.record_progress|| "{}"); eval (str); Localstorage.record_progress=json.stringify (o); $.event.trigger ("record_progress_is_changed"); } </Script> </Body></HTML>
Pure JS Write a single page application of record matters