{"id":47485,"date":"2019-12-25T03:01:46","date_gmt":"2019-12-24T17:01:46","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=47485"},"modified":"2020-08-22T18:35:41","modified_gmt":"2020-08-22T08:35:41","slug":"window-localstorage-client-versus-server-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/window-localstorage-client-versus-server-primer-tutorial\/","title":{"rendered":"Window LocalStorage Client Versus Server Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window LocalStorage Client Versus Server Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.jpg\" title=\"Window LocalStorage Client Versus Server Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window LocalStorage Client Versus Server Primer Tutorial<\/p><\/div>\n<p>Even though we rave on a lot about serverside PHP and its $_POST method=POST (versus HTML\/Javascript recipient via ? and &amp; argument $_GET method=GET scenario) data length advantages as the recipient of an HTML form method=POST set of data that could be sizeable, we&#8217;ve just realized that there is a client Javascript and window.localStorage methodology that may help alleviate the need to involve PHP (and any other serverside intervention) on occasions.<\/p>\n<p>Hint: Yes, we&#8217;ve raved on about this too?!  Does the blog posting title give it away?   Okay, yes, it should read <a target=_blank title='localStorage information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>&#8220;localStorage&#8221;<\/a>, but thought we&#8217;d gone past such juvenile finickiness since the <a target=_blank title='Whac-A-Mole' href='https:\/\/en.wikipedia.org\/wiki\/Whac-A-Mole'>Whac-A-Mole<\/a> controversy of <a target=_blank title='?' \n href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-troubleshooting-tutorial\/'>1st December 2019<\/a> (or even <a target=_blank title=\"The Great Tea Trolley Disaster of \u201967\" href='https:\/\/www.google.com\/search?q=The+Great+Tea+Trolley+Disaster+of+%E2%80%9967&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=The+Great+Tea+Trolley+Disaster+of+%E2%80%9967&#038;aqs=chrome..69i57j69i64.232j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>The Great Tea Trolley Disaster of \u201967<\/a>, we daresay).<\/p>\n<p>It can even use a <a target=_blank title='?' href='http:\/\/www.youtube.com\/watch?v=MA2KmJMKFrQ'>&#8220;self-destruct&#8221;<\/a> approach to the use of this &#8220;localStorage&#8221; on having used it because &#8230;<\/p>\n<ul>\n<li>the web application knows who is using it (localStorage) &#8230; and on having accessed and read it &#8230;<\/li>\n<li>the web application knows it (localStorage) is of no use to any other user (in this web application&#8217;s case, at least)<\/li>\n<\/ul>\n<p> &#8230; which is very pleasing for a Land Surveyor who likes to leave cow paddocks as they&#8217;ve seen them <font size=1>so to speak<\/font>.  Except it&#8217;s like having a ten tonne truck worth of data access in amongst the cow pats when having access to &#8220;localStorage&#8221; (or PHP), rather than a little piddle of calf wee <font size=1>(we<strike>e<\/strike> Metcalfes know a thing or two about these things!)<\/font> data access of ? and &amp; HTML\/Javascript URL arguments (or even if we were to use HTTP Cookies).<\/p>\n<p>It&#8217;s not as if we all have access to serverside language usage, though <i>we<\/i> do, because we really like PHP and <a target=_blank title='MAMP for Apache\/PHP\/MySql on Mac OS X local web server' href='http:\/\/www.mamp.info'><i>MAMP<\/i><\/a> and Apache\/PHP\/MySql web servers (and have arranged our development environment accordingly), but what if you are starting out in web development, and still want to allow for sizeable chunks of data with your web applications?  Huh?  Huh?!  See the possibilities?  Try our proof of concept <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html\" title=\"wls_vs_php.html_GETME>wls_vs_php.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html\" title=\"Click picture\">Capital City Find Matching Country Report live run<\/a>, and highlight a whole swathe of (multiple mode) dropdown option Capital Cities holding down the shift key before pressing the yellow &#8220;Report&#8221; button.  If the URL ends up as &#8230;<\/p>\n<p><code>https:\/\/rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html?capitals=localStorage&countries=localStorage<\/code> <\/p>\n<p> &#8230; <font color=blue>that&#8217;s because<\/font> the web application&#8217;s &#8230;<\/p>\n<p><code><br \/>\nfunction analyze() {<br \/>\n  var purl=document.URL.split('#')[0].split('?')[0] + '?capitals=' + encodeURIComponent(document.getElementById('capitals').value) + '&countries=' + encodeURIComponent(document.getElementById('countries').value);<br \/>\n  if (<font color=green>purl.length &gt; 800<\/font>) {<br \/>\n    if (<font color=red>phpexists<\/font>) {<br \/>\n      document.getElementById('myform').method='POST';<br \/>\n      document.getElementById('myform').action='.\/wls_vs_php.php';<br \/>\n    } else <font color=purple>if (window.localStorage) {<\/font><br \/>\n      <font color=blue>localStorage.setItem('wls_vs_php_countries', encodeURIComponent(document.getElementById('countries').value));<br \/>\n      localStorage.setItem('wls_vs_php_capitals', encodeURIComponent(document.getElementById('capitals').value));<br \/>\n      document.getElementById('capitals').value='localStorage';<br \/>\n      document.getElementById('countries').value='localStorage';<br \/>\n      location.href=document.URL.split('#')[0].split('?')[0] + '?capitals=' + encodeURIComponent(document.getElementById('capitals').value) + '&countries=' + encodeURIComponent(document.getElementById('countries').value);<\/font><br \/>\n      <font color=brown>return false;<\/font><br \/>\n    <font color=purple>}<\/font><br \/>\n  }<br \/>\n  return true;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; HTML form <i>onsubmit<\/i> event logic &#8230;<\/p>\n<ol>\n<li><font color=red>discovered no PHP web application existant<\/font> (via <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings'>Client Pre-emptive Iframe<\/a> techniques) &#8230; and &#8230;<\/li>\n<li>discovered (in a sanity check feeling way) that to go down the proposed HTML form method=GET approach was risking a &#8230;<br \/>\n<code><br \/>\n<font color=green>HTTP 414 \"Request URI too long\"<\/font><br \/>\n<\/code><br \/>\n &#8230; web browser error &#8230; and that &#8230;\n<\/li>\n<li><a target=_blank title='localStorage information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> was a <font color=purple>known web browser piece of functionality<\/font><\/li>\n<p> &#8230; and so as per <font color=blue>our localStorage logic<\/font> we &#8230;<\/li>\n<li><font color=brown>back out of the default HTML form method=GET navigation setup<\/font> of the web application in favour of &#8230;\n<ul>\n<li>storing that data into localStorage<\/li>\n<li>substituting into the URL ? and &amp; arguments the hardcoding &#8220;localStorage&#8221; (and in so doing, getting back under the <font color=green>HTTP 414 &#8220;Request URI too long&#8221;<\/font> limitation, piecing together (what amounts to) &#8230;<br \/>\n      location.href=document.URL.split(&#8216;#&#8217;)[0].split(&#8216;?&#8217;)[0] + &#8216;?capitals=localStorage&#038;countries=localStorage&#8217;;<\/font>)<br \/>\n &#8230; that on a recall to this same web application a &#8230;\n<\/li>\n<li>document.body <i>onload<\/i> event piece of Javascript logic <font color=olive>checks the localStorage<\/font> for its incoming Capital City Country Report data, as per &#8230;<br \/>\n<code><br \/>\nvar phpexists=false;<br \/>\nvar getcapitals=location.search.split('capitals=')[1] ? decodeURIComponent(location.search.split('capitals=')[1].split('&')[0]).replace(\/\\+\/g,' ') : '';<br \/>\nvar getcountries=location.search.split('countries=')[1] ? decodeURIComponent(location.search.split('countries=')[1].split('&')[0]).replace(\/\\+\/g,' ') : '';<br \/>\n<br \/>\nfunction checkforreport() {<br \/>\n  var divcont='';<br \/>\n  var dcaps, dctys, idis;<br \/>\n  <font color=olive>if (getcapitals == 'localStorage') {<br \/>\n   if (window.localStorage) {<br \/>\n    getcapitals=decodeURIComponent(localStorage.getItem('wls_vs_php_capitals')).replace(\/\\+\/g,' ');<br \/>\n    <b>localStorage.removeItem('wls_vs_php_capitals');<\/b><br \/>\n   } else {<br \/>\n    getcapitals='';<br \/>\n   }<br \/>\n  }<br \/>\n  if (getcountries == 'localStorage') {<br \/>\n   if (window.localStorage) {<br \/>\n    getcountries=decodeURIComponent(localStorage.getItem('wls_vs_php_countries')).replace(\/\\+\/g,' ');<br \/>\n    if (getcapitals.replace('localStorage','') != '' && getcountries.replace('localStorage','') != '') { document.getElementById('myh1').innerHTML+=' &lt;font size=1&gt;... yes, it was needed&lt;\/font&gt;'; }<br \/>\n    <b>localStorage.removeItem('wls_vs_php_countries');<\/b><br \/>\n   } else {<br \/>\n    getcountries='';<br \/>\n   }<br \/>\n  }<\/font><br \/>\n  if (getcapitals != '' && getcountries != '') {<br \/>\n    divcont='&lt;table border=5 style=\"width:95%;vertical-align:top;background-color:white;\"&gt;&lt;tr style=background-color:#f0f0f0;\"&gt;&lt;th&gt;Capital&lt;\/th&gt;&lt;th&gt;Country&lt;\/th&gt;&lt;\/tr&gt;&lt;\/table&gt;';<br \/>\n    dcaps=getcapitals.split('|');<br \/>\n    dctys=getcountries.split('|');<br \/>\n    for (idis=0; idis&lt;dcaps.length; idis++) {<br \/>\n      divcont=divcont.replace('&lt;\/table&gt;', '&lt;tr&gt;&lt;td&gt;' + dcaps[idis] + '&lt;\/td&gt;&lt;td&gt;' + dctys[idis] + '&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;');<br \/>\n    }<br \/>\n    document.getElementById('dreport').innerHTML=divcont;<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; the <b>localStorage.removeItem()<\/b> representing that &#8220;self-destruct&#8221; nuance we were talking about before\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>We may well use this methodology in future projects, and hope it has been of some <font size=1>little<\/font> interest to you as well?!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank title='Window LocalStorage Client Versus Server Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/window-localstorage-client-versus-server-primer-tutorial\/'>Window LocalStorage Client Versus Server Primer Tutorial<\/a>.<\/p-->\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d47485' onclick='var dv=document.getElementById(\"d47485\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/localstorage\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47485' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Even though we rave on a lot about serverside PHP and its $_POST method=POST (versus HTML\/Javascript recipient via ? and &amp; argument $_GET method=GET scenario) data length advantages as the recipient of an HTML form method=POST set of data that &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/window-localstorage-client-versus-server-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[1835,2354,264,452,576,3168,652,2415,1830,830,870,1712,997,3404,1319,1357],"class_list":["post-47485","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-arguments","tag-bad-request","tag-cookies","tag-form","tag-html","tag-http-cookies","tag-javascript","tag-localstorage","tag-method","tag-navigation","tag-onload","tag-onsubmit","tag-programming","tag-ternary","tag-tutorial","tag-validate"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47485"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=47485"}],"version-history":[{"count":14,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47485\/revisions"}],"predecessor-version":[{"id":47507,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47485\/revisions\/47507"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=47485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=47485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=47485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}