{"id":68294,"date":"2025-05-09T03:01:00","date_gmt":"2025-05-08T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=68294"},"modified":"2025-05-09T07:38:49","modified_gmt":"2025-05-08T21:38:49","slug":"wildcard-url-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wildcard-url-primer-tutorial\/","title":{"rendered":"Wildcard URL Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Wildcard URL Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wildcard_url.gif\" title=\"Wildcard URL Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Wildcard URL Primer Tutorial<\/p><\/div>\n<p>Like with <a title='Page Not Found Error Message Email Subject Tutorial' href='#pnfemest'>Page Not Found Error Message Email Subject Tutorial<\/a> it&#8217;s &#8230;<\/p>\n<p><code><br \/>\n404.shtml<br \/>\n<\/code><\/p>\n<p> &#8230; we&#8217;re interested in embellishing the functionality of, today.  The job is to allow a &#8230;<\/p>\n<p><code><br \/>\nhttps:\/\/www.rjmprogramming.com.au\/[FoldersOfRelevance]\/[FileSpecificationIncluding*Wildcard]<br \/>\n<a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/*.gif' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/*.gif' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/*.gif<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; mean something other than a &#8230;<\/p>\n<p><code><br \/>\nHTTP Error 404 ... Webpage Not Found<br \/>\n<\/code><\/p>\n<p> &#8230; error.  For the case of most RJM Programming URLs this &#8220;normal case&#8221; error reporting will be the responsibility of <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/404.shtml\" rel=\"noopener\">it&#8217;s Apache Document Root 404.shtml<\/a> file <font color=blue>where we&#8217;ve added<\/font> &#8230;<\/p>\n<p><code><br \/>\n  <font color=blue>var locparts=[], rquri='', rfound=false, ri=0;<br \/>\n<br \/>\n  if (document.URL.indexOf('*') != -1 && document.URL.toLowerCase().indexOf('rjmprogramming.com.au\/') != -1) {<br \/>\n   locparts=document.URL.split('#')[0].split('\/');<br \/>\n   while (ri &lt; eval(-1 + eval('' + locparts.length))) {<br \/>\n      if (locparts[ri].toLowerCase().indexOf('rjmprogramming.com.au') != -1) {<br \/>\n         rfound=true;<br \/>\n         ri++;<br \/>\n         rquri=locparts[ri];<br \/>\n         if (rquri == 'PHP') {<br \/>\n           rquri='.';<br \/>\n         } else {<br \/>\n           rquri='..\/';<br \/>\n           if (ri != eval(-1 + eval('' + locparts.length))) {<br \/>\n             rquri+=locparts[ri];<br \/>\n           }<br \/>\n         }<br \/>\n      } else if (ri != eval(-1 + eval('' + locparts.length))) {<br \/>\n         if (rfound) {<br \/>\n           rquri+='\/' + locparts[ri];<br \/>\n         }<br \/>\n      }<br \/>\n      ri++;<br \/>\n   }<br \/>\n   location.href='\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php?fsort=&wsort=&hsort=&path=' + encodeURIComponent(rquri) + '&filespec=' + locparts[eval(-1 + eval('' + locparts.length))] + '&wo=%21%3D&wv=-500&ho=%21%3D&hv=-500';<br \/>\n   exit;<br \/>\n  } else <\/font>if (document.URL.indexOf('.au\/drupal') != -1) {<br \/>\n   location.href='\/\/www.rjmprogramming.com.au\/drupal\/index.htm';<br \/>\n   exit;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; so that we redirect to our inhouse <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php\" rel=\"noopener\">Find Images web application<\/a> and we&#8217;ll see about non-image files, as a consideration, into the future!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/wildcard-url-primer-tutorial\/' rel=\"noopener\">Wildcard URL Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pnfemest'>Previous relevant <a target=\"_blank\" title='Page Not Found Error Message Email Subject Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/page-not-found-error-message-email-subject-tutorial\/' rel=\"noopener\">Page Not Found Error Message Email Subject Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Apache\/shtml_404_redirect.jpg\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Page Not Found Error Message Email Subject Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Apache\/shtml_404_redirect.jpg\" title=\"Page Not Found Error Message Email Subject Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Page Not Found Error Message Email Subject Tutorial<\/p><\/div>\n<p>Why, with today&#8217;s tutorial, are we conflating two quite disparate subjects &#8230;<\/p>\n<ol>\n<li>HTTP (ie. Hypertext Transfer Protocol) Error Code 404 &#8220;Page Not Found&#8221; or &#8220;Server Not Found&#8221; &#8230;with &#8230;<\/li>\n<li>Email Subject lines<\/li>\n<\/ol>\n<p> &#8230; into the one tutorial topic?  Well, as we talked about with body of email scenarios, with some email clients (with <a title='Window SessionStorage Client Versus Server CSS Tutorial' href='#wsscvscsst'>Window SessionStorage Client Versus Server CSS Tutorial<\/a>) &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-css-tutorial\/'>\n<p>As far as links go, you may expect to need serverside means to construct these in online Email and SMS message interfacing, but email (client program) products like <a target=\"_blank\" href='https:\/\/gmail.com' rel=\"noopener\">Gmail<\/a> parse your ascii text and convert http: or https: protocol URLs in your Email body to hyperlinks, as does the Messages SMS application here on this MacBook Pro using macOS Mojave. <\/p>\n<\/blockquote>\n<p> &#8230; it pans out with some email clients such as iOS Mail app, that email subject lines containing similar <i>http: or https: protocol URLs<\/i> also get converted into hyperlinks. For us this has become a more likely scenario ever since the email [date] subject line token work typified by <a target=\"_blank\" title='Local Datetime Token Subject Integrations Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/local-datetime-token-subject-integrations-tutorial\/' rel=\"noopener\">Local Datetime Token Subject Integrations Tutorial<\/a>.  The nature of those hyperlinks created, though, seem to be a great concern for these more helpful email clients and if you put into subject lines URLs containing &#8220;?&#8221; and &#8220;&#038;&#8221; delimited arguments, the email clients mildly &#8220;mash up&#8221; these URLs so that recent ones from our &#8220;Plot Axes &#8211; Linear or Parabolic Formula&#8221; web application for (an example like) &#8230;<\/p>\n<p><code><br \/>\n<a style='text-decoration:none;' target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm?wording=Vertex%20Pointing%20Game&#038;question=%20#blank=plot187|-200,-200,200,200|2,-123' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm?wording=Vertex%20Pointing%20Game&#038;question=%20#blank=plot187|-200,-200,200,200|2,-123' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm?wording=Vertex%20Pointing%20Game&question=%20#blank=plot187|-200,-200,200,200|2,-123<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; on email clients that do not do &#8220;the <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=vNuVifA7DSU' rel=\"noopener\"><font size=1>(monster)<\/a><\/font> mash&#8221;, on an email client that &#8220;does hyperlink but mash up&#8221; the URL the email subject line takes you to is actually (an additional &#8220;layer of <a target=\"_blank\" title='Javascript encodeURIComponent() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_encodeuricomponent.asp' rel=\"noopener\">encodeURIComponent<\/a>&#8216;ed content&#8221; you can see as you hover over the link, the display normalized as far as looks go, via HTML entity mapping) &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm%3Fwording=Vertex%20Pointing%20Game%26question=%20%23blank=plot187|-200,-200,200,200|2,-123' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm%3Fwording=Vertex%20Pointing%20Game%26question=%20%23blank=plot187|-200,-200,200,200|2,-123' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm&#63;wording=Vertex%20Pointing%20Game&amp;question=%20&#35;blank=plot187|-200,-200,200,200|2,-123<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; which, without the tailoring of RJM Programming domain&#8217;s Error 404 trapping 404.shtml would not take you to its true destination (of look) &#8230; because of &#8220;the mash&#8221;.<\/p>\n<p>It&#8217;s been a while since we set up this 404.shtml Apache web server means to serve &#8220;Not Found&#8221; (Page) URLs with a more welcoming experience than the default web browser &#8220;Error 404 &#8230; Not Found&#8221; kind of error message, so we started our research into whether it was possible to redirect from a 404.shtml on an Apache web server <a target=\"_blank\" title='Useful search' href='https:\/\/www.google.com\/search?q=404.shtml+find+URL+getting+you+to+it&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=404.shtml+find+URL+getting+you+to+it&#038;aqs=chrome..69i57j33.20548j0j8&#038;sourceid=chrome&#038;ie=UTF-8' rel=\"noopener\">at this useful Google search<\/a>, thanks.<\/p>\n<p>Now, it must be noted here, that the search engines may penalise you for making the 404.shtml redirection we are going to show you below.  Honestly, we don&#8217;t know, but we feel compelled to let you know that such a redirection is possible on an Apache web server&#8217;s 404.shtml with a document.body &#8220;onload&#8221; <font color=blue>changed<\/font> event (HTML and Javascript code snippet) piece of logic as below &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>&lt;script type='text\/javascript'&gt;<br \/>\n function onPageUnload() {<br \/>\n }<br \/>\n<br \/>\n function onPageLoad() {<br \/>\n  if (document.URL.indexOf('square_hr_tracing.htm%') != -1) {<br \/>\n   location.href=document.URL.replace('%3F','?').replace(\/\\%23\/g, '#').replace(\/\\%26\/g, '&');<br \/>\n   exit;<br \/>\n  }<br \/>\n }<br \/>\n&lt;\/script&gt;<\/font><br \/>\n<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body style=\"background: #d4d4d4; margin: 0pt; \"<font color=blue> onload=\"onPageLoad();\" onunload=\"onPageUnload();\"<\/font>&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; that is helping make sense of the &#8220;mashed up&#8221; URL (from some email client subject lines) above, as well as the rest of this 404.shtml (placed into RJM Programming domain&#8217;s <a target=\"_blank\" title='Apache web server Document Root' href='https:\/\/httpd.apache.org\/docs\/2.4\/urlmapping.html#documentroot' rel=\"noopener\">Document Root<\/a>) showing a more friendly webpage for all those misdirected URLs such as <a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html%3Fwording=Vertex%20Pointing%20Game%26question=%20%23blank=plot187|-200,-200,200,200|2,-123' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html%3Fwording=Vertex%20Pointing%20Game%26question=%20%23blank=plot187|-200,-200,200,200|2,-123' rel=\"noopener\">this one<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/page-not-found-error-message-email-subject-tutorial\/' rel=\"noopener\">Page Not Found Error Message Email Subject Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsscvscsst'>Previous relevant <a target=\"_blank\" title='Window SessionStorage Client Versus Server CSS Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-css-tutorial\/' rel=\"noopener\">Window SessionStorage Client Versus Server CSS Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window SessionStorage Client Versus Server CSS Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_links_css.jpg\" title=\"Window SessionStorage Client Versus Server CSS Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window SessionStorage Client Versus Server CSS Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Window SessionStorage Client Versus Server Integration Tutorial' href='#wsscvsit'>Window SessionStorage Client Versus Server Integration Tutorial<\/a> we have a two pronged improvements set for you today with our current Capital City Find Matching Country Report web application project &#8230;<\/p>\n<ul>\n<li>CSS styling changes &#8230; and &#8230;<\/li>\n<li>additional functionality for Email and SMS links back to our current Capital City Find Matching Country Report web application project (to complete the cycle)<\/li>\n<\/ul>\n<p>We use several modes of CSS application (the first and last of particular relevance to today&#8217;s &#8220;highlighting of workflow&#8221; improvements) &#8230;<\/p>\n<ul>\n<li>&#8220;static&#8221; internal CSS coding within <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html------GETME\" title=\"wls_vs_php.htm\" rel=\"noopener\">the changed<\/a<> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html------GETME\" title=\"wls_vs_php.htm\" rel=\"noopener\">wls_vs_php.htm<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\" rel=\"noopener\">Capital City Find Matching Country Report live run<\/a> link&#8217;s new CSS and linking improvements, which caused <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html--------GETME\" title=\"colour_wheel.html\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html--------GETME\" title=\"colour_wheel.html\" rel=\"noopener\">colour_wheel.html<\/a>&#8216;s colour wheel (at this <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html\" title='Click picture' rel=\"noopener\">live run<\/a> link) to be affected (by integrations &#8220;up&#8221;, opening up the <a target=\"_blank\" href='\/\/map.google.com' title='Google' rel=\"noopener\">Google Maps<\/a> and <a target=\"_blank\" title='YouTube videos' href='https:\/\/www.youtube.com' rel=\"noopener\">YouTube<\/a> interfacing emoji buttons there)<\/li>\n<li>&#8220;static&#8221; internal HTML &#8220;style&#8221; attribute styling<\/li>\n<li>&#8220;dynamic&#8221; Javascript DOM HTML &#8220;style&#8221; attribute changes<\/li>\n<li>&#8220;dynamic&#8221; Javascript DOM &#8220;class&#8221; modifications to dovetail with the <i>&#8220;static&#8221; internal CSS coding<\/i> as above<\/li>\n<\/ul>\n<p> &#8230; the &#8220;static&#8221; measures often helping to highlight the web application&#8217;s main workflow of user interaction and the &#8220;dynamic&#8221; measures helping to alert the user as to where to proceed with their &#8220;workflow&#8221;.<\/p>\n<p>In terms of CSS styling work &#8230;<\/p>\n<ol>\n<li>for non-mobile platforms we allow for more columns to be applied to our Capitals select (dropdown) element (in order to reduce some user scrolling, as does our new additional A-Z letter basis sorting functionality) as per &#8230; the <i>&#8220;dynamic&#8221; Javascript DOM &#8220;class&#8221; modifications<\/i> &#8230;<br \/>\n<code><br \/>\n<i>if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<\/i><br \/>\n<i>    document.getElementById('lefttd').className='lefttd';<\/i><br \/>\n<i>}<\/i><br \/>\n<\/code><br \/>\n &#8230; dovetailing with the <i>&#8220;static&#8221; internal CSS coding<\/i> &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n<i>.lefttd { <\/i><br \/>\n<i>  column-count: 4; <\/i><br \/>\n<i>  max-height: 35%; <\/i><br \/>\n<i>  vertical-align: top; <\/i><br \/>\n<i>  max-width: 70%; <\/i><br \/>\n<i>  font-size: 8px; <\/i><br \/>\n<font color=blue>  background-color: rgba(205,205,205,0.5);<br \/>\n  background-image: -webkit-gradient(<br \/>\n  linear,<br \/>\n  right bottom,<br \/>\n  left top,<br \/>\n  color-stop(0, rgba(205, 205, 205, 0.8)),<br \/>\n  color-stop(0.50, rgba(255, 255, 0, 0.2))<br \/>\n  );<br \/>\n  background-image: -o-linear-gradient(left top, rgba(205, 205, 205, 1) 0%, rgba(255, 255, 0, 0.2) 50%);<br \/>\n  background-image: -moz-linear-gradient(left top, rgba(205, 205, 205, 1) 0%, rgba(255, 255, 0, 0.2) 50%);<br \/>\n  background-image: -webkit-linear-gradient(left top, rgba(205, 205, 205, 1) 0%, rgba(255, 255, 0, 0.2) 50%);<br \/>\n  background-image: -ms-linear-gradient(left top, rgba(205, 205, 205, 1) 0%, rgba(255, 255, 0, 0.2) 50%);<br \/>\n  background-image: linear-gradient(to left top, rgba(205, 205, 205, 1) 0%, rgba(255, 255, 0, 0.2) 50%);<\/font><br \/>\n<i>}<\/i><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n &#8230; and please note that around here at RJM Programming we have a &#8220;far from hard and fast rule&#8221; (but a rule regardless) regarding HTML element <i>ID<\/i> and <i>class<\/i> attributes that they concern (and (usually) be compartmentalised into) <i>Javascript (DOM) manipulations<\/i> and <i>CSS styling<\/i> issues respectively &#8230; and <font color=blue>add a linear-gradient background to the table cell when expecting the initial user interaction on non-mobile platforms<\/font>\n<\/li>\n<li>a <i>&#8220;dynamic&#8221; Javascript DOM &#8220;class&#8221; modification<\/i> &#8230; document.getElementById(&#8216;myrepsb&#8217;).className=&#8217;dglow&#8217;; &#8230; is made to the &#8220;Report&#8230;&#8221; button at the Capitals select (dropdown) <i>onfocusout<\/i> event so as to highlight (with <a target=\"_blank\" title='W3schools glowing text information, thanks' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text' rel=\"noopener\">&#8220;glow&#8221; inspired<\/a> styling) where user interaction may flow to<\/li>\n<\/ol>\n<p>As far as links go, you may expect to need serverside means to construct these in online Email and SMS message interfacing, but email (client program) products like <a target=\"_blank\" href='https:\/\/gmail.com' rel=\"noopener\">Gmail<\/a> parse your ascii text and convert http: or https: protocol URLs in your Email body to hyperlinks, as does the Messages SMS application here on this MacBook Pro using macOS Mojave.   Cute, huh?!  So to close the circle back from remote thar&#8217; parts back to our web application is a simple matter of, in broad brush terms &#8230;<\/p>\n<ul>\n<li>adding two new buttons called &#8220;Email Columns and Links &#8230;&#8221; and &#8220;SMS Columns and Links &#8230;&#8221; that &#8230;<\/li>\n<li>set a global var<font size=1>iable<\/font> andlinkto = true;  &#8230; setting in play, within the report writing code (that likes monospaced fonts) &#8230;<\/li>\n<li>add a new links column to the right with URLs like &#8230;<br \/>\n<code><a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm?andgo=y&#038;countries=Belize&#038;capitals=Belmopan' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm?andgo=y&#038;countries=Belize&#038;capitals=Belmopan' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm?andgo=y&amp;countries=Belize&amp;capitals=Belmopan<\/a><\/code><br \/>\n &#8230; to tell your client programs to form the hyperlinks for us (if they are &#8220;of the mood&#8221;, that is!)\n<\/li>\n<\/ul>\n<p>To improve user experience we use <i>&#8220;dynamic&#8221; Javascript DOM HTML &#8220;style&#8221; attribute change<\/i> means to easier close the &#8220;Colour Wheel&#8221; helper web application &#8220;above the fold&#8221; by changing the CSS z-index (Javascript DOM [element].style.zIndex) of elements accordingly, when the user clicks other elements.  You can see all this with the first &#8220;<a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html------GETME' title='wls_vs_php.htm' rel=\"noopener\">the changed<\/a>&#8221; link above, where all &#8220;glow&#8221; CSS styling will also feature prominently.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-css-tutorial\/' rel=\"noopener\">Window SessionStorage Client Versus Server CSS Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsscvsit'>Previous relevant <a target=\"_blank\" title='Window SessionStorage Client Versus Server Integration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-integration-tutorial\/' rel=\"noopener\">Window SessionStorage Client Versus Server Integration Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window SessionStorage Client Versus Server Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_integration.jpg\" title=\"Window SessionStorage Client Versus Server Integration Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window SessionStorage Client Versus Server Integration Tutorial<\/p><\/div>\n<p>We hope, when performing a &#8220;software integration&#8221; task, that the two or more components of that integration work <i>with<\/i> each other&#8217;s talents, rather than a big tussle like reinventing the wheel.  This ideal makes the work &#8230;<\/p>\n<ul>\n<li>sometimes difficult but rewarding because &#8230;<\/li>\n<li>the differences between two independent software components can be quite large and daunting &#8230; and the programmer has to see that &#8230;<\/li>\n<li>care is applied so as not to wreck previous functionality and integrations in making the current integration work<\/li>\n<\/ul>\n<p> &#8230; and that is why we&#8217;ve made corollaries to &#8220;building from scratch&#8221; (when planning and design is a huge component) can be a lot simpler than a software integration &#8220;renovation&#8221;, in the past, here at this blog.<\/p>\n<p>Our primary integration today is to (software) integrate the great <a target=\"_blank\" title='Weather Underground' href='http:\/\/www.wunderground.com' rel=\"noopener\">Weather Underground<\/a> and its great API service for autocomplete name searches for weather (and hurricane) information.  Why bother?  Well, can you not envisage a user using that Ajax functionality of yesterday&#8217;s <a title='Window SessionStorage Client Versus Server Ajax Tutorial' href='#wsscvsat'>Window SessionStorage Client Versus Server Ajax Tutorial<\/a> as a trip planner, perhaps, or as a &#8220;checking up on relatives overseas&#8221; tool, perhaps?   And not all the capital cities are timezone places, and so for some of those we can use Weather integration to still show apt online information when click\/touching a Countries Report row.  Speaking of this &#8220;row&#8221;, we make an improvement whereby on a first click of a right hand (Country) row cell, that cell is not initially a <i>contenteditable=&#8221;true&#8221;<\/i> one (that may frustrate showing the keyboard on mobile, when most likely it was the row touch intended), but then becomes a <i>contenteditable=&#8221;true&#8221;<\/i> cell henceforth.<\/p>\n<p>As a user experience improvement for &#8220;trip planners&#8221; perhaps, we allow the user to alphabetically sort the presented select (dropdown) element entries &#8230;<\/p>\n<p><code><br \/>\nvar firstopt='';<br \/>\nvar wasopts='';<br \/>\nvar restopts='';<br \/>\n<br \/>\nfunction readyitforsort(iselid) {<br \/>\n  var optsare=[];<br \/>\n  var huhisel=document.getElementById(iselid).innerHTML;<br \/>\n  var huhsopts=huhisel.split('&lt;\/option&gt;');<br \/>\n  for (var ihuh=0; ihuh&lt;huhsopts.length; ihuh++) {<br \/>\n    if (huhsopts[ihuh].trim() != '') {<br \/>\n      if (firstopt == '') {<br \/>\n        firstopt=huhsopts[ihuh] + '&lt;\/option&gt;';<br \/>\n      } else {<br \/>\n        wasopts+=huhsopts[ihuh].replace('option ','option data-ih=\"' + (huhsopts[ihuh].split('&gt;')[eval(-1 + huhsopts[ihuh].split('&gt;').length)] + '\" ')) + '&lt;\/option&gt;';<br \/>\n        optsare.push(huhsopts[ihuh].replace('option ','option data-ih=\"' + (huhsopts[ihuh].split('&gt;')[eval(-1 + huhsopts[ihuh].split('&gt;').length)] + '\" ')) + '&lt;\/option&gt;');<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  optsare.sort();<br \/>\n  for (var jhuh=0; jhuh&lt;optsare.length; jhuh++) {<br \/>\n    restopts+=optsare[jhuh];<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; controlled by a new dropdown in the left hand column header cell.<\/p>\n<p>We also allow the user to move the iframe element with some positioning emoji buttons near the &#8220;Close&#8221; button one (of yesterday&#8217;s work).<\/p>\n<p>Into the future, too, we&#8217;ll have more to say regarding the germination of an idea &#8220;to allow a mobile onmouseover simulator (of sorts)&#8221; be to allow the user to perform a swipe across an individual HTML element of interest on mobile platforms (ie. harness ontouchmove event) as per (so far) &#8230; <b>kicked off<\/b> by &#8220;&lt;body <b>onload=&#8221; setTimeout(athn, 5000); &#8220;<\/b>&gt;&#8221; &#8230;<\/p>\n<p><code><br \/>\nvar last24='';<br \/>\nvar rectdc;<br \/>\n<br \/>\nfunction nodivalert() {<br \/>\n  document.getElementById('divalert').style.display='none';<br \/>\n  document.getElementById('divalert').style.zIndex='-456';<br \/>\n  document.getElementById('divalert').style.left=('-' + rectdc.left).replace('px','') + 'px';<br \/>\n  document.getElementById('divalert').style.top=('-' + rectdc.top).replace('px','') + 'px';<br \/>\n}<br \/>\n<br \/>\nfunction ourdivalert(inmsg) {<br \/>\n  document.getElementById('divalert').style.position='absolute';<br \/>\n  document.getElementById('divalert').style.left=('' + rectdc.left).replace('px','') + 'px';<br \/>\n  document.getElementById('divalert').style.top='' + eval(-80 + eval(('' + rectdc.top).replace('px',''))) + 'px';<br \/>\n  document.getElementById('divalert').style.backgroundColor='#e0e0e0';<br \/>\n  document.getElementById('divalert').style.display='block';<br \/>\n  document.getElementById('divalert').style.zIndex='456';<br \/>\n  document.getElementById('divalert').style.opacity='0.8';<br \/>\n  document.getElementById('divalert').style.padding='5px 5px 5px 5px';<br \/>\n  document.getElementById('divalert').innerHTML=inmsg + '&lt;br&gt;&lt;br&gt;&lt;input type=button value=Close onclick=nodivalert();&gt;&lt;\/input&gt;';<br \/>\n  setTimeout(nodivalert,9000);<br \/>\n}<br \/>\n<br \/>\nfunction athn() {<br \/>\n  rectdc=document.getElementById('dc').getBoundingClientRect();<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n  document.getElementById('dc').ontouchmove=function(event) { if (last24.substring(0,eval(-1 + last24.length)) == event.target.title.substring(0,eval(-1 + event.target.title.length))) { last24=last24; } else { last24=event.target.title; ourdivalert(event.target.title); } }<br \/>\n  } else {<br \/>\n  document.getElementById('dc').onmousemove=function(event) { if (last24.substring(0,eval(-1 + last24.length)) == event.target.title.substring(0,eval(-1 + event.target.title.length))) { last24=last24; } else { last24=event.target.title; ourdivalert(event.target.title); } }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; working <i>with<\/i> <b>the new<\/b> HTML &#8230;<\/p>\n<p><code><br \/>\n<b>&lt;div id=divalert&gt;&lt;\/div&gt;<\/b><br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; to try to allow the &#8220;explainer of an element&#8221; advantages non-mobile platforms have for hovering over an HTML element with a <i>title<\/i> attribute filled in.<\/p>\n<p>And so, yet again, see <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html-----GETME\" title=\"wls_vs_php.htm\" rel=\"noopener\">the changed<\/a<> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html-----GETME\" title=\"wls_vs_php.htm\" rel=\"noopener\">wls_vs_php.htm<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\" rel=\"noopener\">Capital City Find Matching Country Report live run<\/a> link&#8217;s new Weather integration functionality.  It caused <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html--------GETME\" title=\"colour_wheel.html\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html--------GETME\" title=\"colour_wheel.html\" rel=\"noopener\">colour_wheel.html<\/a>&#8216;s colour wheel (at this <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html\" title='Click picture' rel=\"noopener\">live run<\/a> link) to be affected (by integrations &#8220;up&#8221;).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-integration-tutorial\/' rel=\"noopener\">Window SessionStorage Client Versus Server Integration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsscvsat'>Previous relevant <a target=\"_blank\" title='Window SessionStorage Client Versus Server Ajax Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-ajax-tutorial\/' rel=\"noopener\">Window SessionStorage Client Versus Server Ajax Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window SessionStorage Client Versus Server Ajax Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_ajax.jpg\" title=\"Window SessionStorage Client Versus Server Ajax Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window SessionStorage Client Versus Server Ajax Tutorial<\/p><\/div>\n<p>We have a few &#8220;clientside chestnuts&#8221; to use with our current Capital City Find Matching Country Report web application project today, those being &#8230;<\/p>\n<ul>\n<li> <a target=\"_blank\" title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29' rel=\"noopener\">Ajax<\/a> functionality, kicked off by an &#8220;onclick&#8221; event set of logic, allowing mobile platforms to also have a look in (the look in that they miss when the event logic is off the &#8220;onmouseover&#8221; event)<\/li>\n<li>iframe and its &#8230;\n<ol>\n<li><i><a target=\"_blank\" title='Iframe srcdoc information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_iframe_srcdoc.asp' rel=\"noopener\">srcdoc<\/a><\/i> attribute (&#8220;content&#8221; alternative to <i>src<\/i> &#8220;url&#8221; attribute) &#8230; along with, and crucially needing (because <i>srcdoc<\/i> ignores its own document.body <i>onload<\/i> goings on, that we need the <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings' rel=\"noopener\">&#8220;Iframe Client Pre-Emptive&#8221;<\/a> methods below to circumvent) the &#8230;<\/li>\n<li><i>onload<\/i> event opportunity of an iframe element (we group into &#8220;Iframe Client Pre-Emptive&#8221; methods, here)<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; adding onto yesterday&#8217;s <a title='Window SessionStorage Client Versus Server Canvas Tutorial' href='#wsscvsct'>Window SessionStorage Client Versus Server Canvas Tutorial<\/a>.<\/p>\n<p>It&#8217;s not that involved with the Ajax work today, given that there are no cross-domain issues, though there are cross-protocol (SSL https: versus non-SSL http:) issues to be careful about.  Those can be addressed because the web application is recalled to present its &#8220;Country Report&#8221; and that is the opportunity to check on protocol navigation requirements.<\/p>\n<p>Along the way, we also make this happen for the user on &#8230;<\/p>\n<ul>\n<li>click\/touching a table row &#8230; it sets off new &#8220;tr&#8221; (table row) element logic calling our (inhouse) Timezone and Wikipedia Place Information helper (HTML) via Ajax (so not leaving the webpage) &#8230; and because of place name oddities we allow for &#8230;<\/li>\n<li>&#8220;td&#8221; (table cell) element user amendments by setting their <i><a target=\"_blank\" title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a><\/i> attributes to &#8220;true&#8221; (since fixed, but we found the Timezone Europe\/Tirane pointing at Tirane in Albania used to be spelt &#8220;Tirana&#8221;)<\/li>\n<\/ul>\n<p> &#8230; that latter methodology normally a technique we apply to &#8220;div&#8221; elements <font size=1>(so, there you are!)<\/font><\/p>\n<p>Also used are &#8220;overlay&#8221; techniques, two of the &#8220;usual suspects&#8221; here coming into play, to present to the &#8220;Ajax content to srcdoc iframe arrangements&#8221; &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp' rel=\"noopener\">position:absolute<\/a> property (with associated top and left (px defined) properties)<\/li>\n<li><a target=\"_blank\" title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' rel=\"noopener\">z-index<\/a><\/li>\n<\/ul>\n<p>Yet again, see <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html----GETME\" title=\"wls_vs_php.htm\" rel=\"noopener\">the changed<\/a<> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html----GETME\" title=\"wls_vs_php.htm\" rel=\"noopener\">wls_vs_php.htm<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\" rel=\"noopener\">Capital City Find Matching Country Report live run<\/a> link&#8217;s new &#8220;Ajax&#8221; functionality.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-ajax-tutorial\/' rel=\"noopener\">Window SessionStorage Client Versus Server Ajax Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsscvsct'>Previous relevant <a target=\"_blank\" title='Window SessionStorage Client Versus Server Canvas Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-canvas-tutorial\/' rel=\"noopener\">Window SessionStorage Client Versus Server Canvas Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window SessionStorage Client Versus Server Canvas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_canvas.jpg\" title=\"Window SessionStorage Client Versus Server Canvas Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window SessionStorage Client Versus Server Canvas Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Window SessionStorage Client Versus Server Share Tutorial' href='#wsscvsst'>Window SessionStorage Client Versus Server Share Tutorial<\/a> dealt with ascii text clipboard copy assisted sharing options with our current Capital City Find Matching Country Report web application project.  This suited both Email and SMS share options we coded for, but today&#8217;s extension of functionality from &#8220;ascii text&#8221; data to &#8220;graphical data&#8221; only suits Email sharing.  The other caveat with our work is that no serverside (for us, PHP) help is allowed, so no PHP mail here.<\/p>\n<p>What comes into play with a &#8220;graphical data&#8221; clientside (only) sharing approach?  It will not surprise many readers that, for us, it involves &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp' rel=\"noopener\">canvas<\/a> element &#8230; converting HTML table outerHTML &#8220;ascii text&#8221; data &#8230; via &#8230;<\/li>\n<li>canvas drawing methods &#8220;[canvasContext].<a target=\"_blank\" href='http:\/\/www.w3schools.com\/tags\/canvas_stroketext.asp' title='HTML5 Canvas strokeRect() method information from w3schools ... thanks' rel=\"noopener\">strokeRect<\/a>()&#8221; and &#8220;[canvasContext].<a target=\"_blank\" href='http:\/\/www.w3schools.com\/tags\/canvas_stroketext.asp' title='HTML5 Canvas strokeText() method information from w3schools ... thanks' rel=\"noopener\">strokeText<\/a>()&#8221; via &#8220;[cellElement].<a target=\"_blank\" title='Javascript getBoundingClientRect method information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect' rel=\"noopener\">getBoundingClientRect<\/a>()&#8221; &#8230; to convert that canvas element content via &#8230;<\/li>\n<li>[canvasElement].<a target=\"_blank\" title='HTML5 canvas element toDataURL method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL' rel=\"noopener\">toDataURL<\/a>() &#8230; to an &#8230;<\/li>\n<li>img element nested in a div <a target=\"_blank\" title=\"Global\" contenteditable attribute information from rel=\"noopener\">contenteditable<\/a>=true element &#8230; so as to hook in with today&#8217;s <a target=\"_blank\" title='Very useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/27863617\/is-it-possible-to-copy-a-canvas-image-to-the-clipboard' rel=\"noopener\">very useful helper link<\/a>, thanks &#8230; use &#8230;<\/li>\n<li>\n<code><br \/>\nfunction tabletoclipboard(canvas) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/27863617\/is-it-possible-to-copy-a-canvas-image-to-the-clipboard<br \/>\n var img = document.createElement('img');<br \/>\n img.src = canvas.toDataURL();<br \/>\n<br \/>\n var div = document.createElement('div');<br \/>\n div.contentEditable = true;<br \/>\n div.appendChild(img);<br \/>\n document.body.appendChild(div);<br \/>\n<br \/>\n \/\/ do copy<br \/>\n SelectText(div);<br \/>\n document.execCommand('Copy');<br \/>\n document.body.removeChild(div);<br \/>\n}<br \/>\n<br \/>\nfunction SelectText(element) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/27863617\/is-it-possible-to-copy-a-canvas-image-to-the-clipboard<br \/>\n    var doc = document;<br \/>\n    if (doc.body.createTextRange) {<br \/>\n        var range = document.body.createTextRange();<br \/>\n        range.moveToElementText(element);<br \/>\n        range.select();<br \/>\n    } else if (window.getSelection) {<br \/>\n        var selection = window.getSelection();<br \/>\n        var range = document.createRange();<br \/>\n        range.selectNodeContents(element);<br \/>\n        selection.removeAllRanges();<br \/>\n        selection.addRange(range);<br \/>\n    }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>to leave the user&#8217;s device&#8217;s clipboard containing a useful table (with linework) &#8230; ready to &#8230;<\/li>\n<li>paste into an email body section<\/li>\n<\/ul>\n<p> &#8230; sharing off to an emailee collaborator.<\/p>\n<p>Again, see <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html---GETME\" title=\"wls_vs_php.htm\" rel=\"noopener\">the changed<\/a<> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html---GETME\" title=\"wls_vs_php.htm\" rel=\"noopener\">wls_vs_php.htm<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\" rel=\"noopener\">Capital City Find Matching Country Report live run<\/a> link&#8217;s new &#8220;Email Table&#8221; button functionality.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/new-window-sessionstorage-client-versus-server-share-tutorial\/' rel=\"noopener\">New Window SessionStorage Client Versus Server Share Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsscvsst'>Previous relevant <a target=\"_blank\" title='Window SessionStorage Client Versus Server Share Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-share-tutorial\/' rel=\"noopener\">Window SessionStorage Client Versus Server Share Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window SessionStorage Client Versus Server Share Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_email.jpg\" title=\"Window SessionStorage Client Versus Server Share Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window SessionStorage Client Versus Server Share Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Window SessionStorage Client Versus Server Tutorial' href='#wsscvst'>Window SessionStorage Client Versus Server Tutorial<\/a> has been amended today for two new sharing and collaboration options, those being &#8230;<\/p>\n<ul>\n<li>email<\/li>\n<li>SMS<\/li>\n<\/ul>\n<p> &#8230; but you may well be familiar with the restrictions on email and SMS client (program) approaches to this, coming from HTML &#8220;a&#8221; link &#8220;mailto:&#8221; and &#8220;sms:&#8221; href property prefixes respectively.  We&#8217;re going to need help with the 800 odd character (length) restrictions with the (resultant) web address (bar) URL, but what?  How about working off the great advice of this <a target=\"_blank\" title='Great link' href='https:\/\/hackernoon.com\/copying-text-to-clipboard-with-javascript-df4d4988697f' rel=\"noopener\">wonderful link<\/a>, thanks, to copy what we&#8217;d have assembled into an ascii text Report into the characters contained by the user&#8217;s device&#8217;s clipboard?<\/p>\n<p><code><br \/>\nfunction copytoclipboard(str) { \/\/ thanks to https:\/\/hackernoon.com\/copying-text-to-clipboard-with-javascript-df4d4988697f<br \/>\n  var el = document.createElement('textarea');<br \/>\n  el.value = str;<br \/>\n  el.setAttribute('readonly', '');<br \/>\n  el.style.position = 'absolute';<br \/>\n  el.style.left = '-9999px';<br \/>\n  document.body.appendChild(el);<br \/>\n  el.select();<br \/>\n  document.execCommand('copy');<br \/>\n  document.body.removeChild(el);<br \/>\n}<br \/>\n<\/code><\/p>\n<p>An issue that springs up here using such clipboard ascii text content, whenever you get the Font choice given to you, pick a monospaced Font like Courier New or &#8220;Fixed Width&#8221;.<\/p>\n<p>See <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html--GETME\" title=\"wls_vs_php.htm\" rel=\"noopener\">the changed<\/a<> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html--GETME\" title=\"wls_vs_php.htm\" rel=\"noopener\">wls_vs_php.htm<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\" rel=\"noopener\">Capital City Find Matching Country Report live run<\/a> link&#8217;s new sharing functionality.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-share-tutorial\/' rel=\"noopener\">Window SessionStorage Client Versus Server Share Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsscvst'>Previous relevant <a target=\"_blank\" title='Window SessionStorage Client Versus Server Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-tutorial\/' rel=\"noopener\">Window SessionStorage Client Versus Server Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window SessionStorage Client Versus Server Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php_session.jpg\" title=\"Window SessionStorage Client Versus Server Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Window SessionStorage Client Versus Server Tutorial<\/p><\/div>\n<p>Sometimes it&#8217;s the case at this blog that we&#8217;d like to introduce a new topic, but do not do so, because we cannot show any real world (or real application) use of that concept.  So it has been, up until now, with the concept of (web browser) window (object) <a target=\"_blank\" title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp' rel=\"noopener\">sessionStorage<\/a> property.  But yesterday&#8217;s <a title='Window LocalStorage Client Versus Server Primer Tutorial' href='#wlscvspt'>Window LocalStorage Client Versus Server Primer Tutorial<\/a> represented an opportunity akin to when Haley&#8217;s Comet gets at its closest to the Earth &#8230; <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=0j6g_uUhH2c' rel=\"noopener\">while you see a chance, take it<\/a> &#8230; chance because of that nuance whereby we were not trying to store data for any other purpose than passing data onto &#8230;<\/p>\n<ol>\n<li>a known entity &#8230; ie. same web application &#8230; at &#8230;<\/li>\n<li>a known time &#8230; ie. immediately<\/li>\n<\/ol>\n<p> &#8230; two conditions that make the code design &#8220;marginally&#8221; more ideal for the window object property concept of <a target=\"_blank\" title='Window object localStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp' rel=\"noopener\">sessionStorage<\/a> rather than <a target=\"_blank\" title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp' rel=\"noopener\">localStorage<\/a>, in that any &#8230;<\/p>\n<p><code><br \/>\nlocalStorage.removeItem([knownLocalStorageName]);<br \/>\n<\/code><\/p>\n<p> &#8230; becomes superfluous as with <a target=\"_blank\" title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp' rel=\"noopener\">sessionStorage<\/a> data will disappear between web browser sessions, anyway.<\/p>\n<p>We offer this new concept as a non-default option of a select (dropdown) element replacement to the h1 element hardcoding &#8220;localStorage&#8221; with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html-GETME\" title=\"wls_vs_php.htm\" rel=\"noopener\">the changed<\/a<> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html-GETME\" title=\"wls_vs_php.htm\" rel=\"noopener\">wls_vs_php.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.htm\" title=\"Click picture\" rel=\"noopener\">Capital City Find Matching Country Report live run<\/a>.  The other nuance of difference with <a target=\"_blank\" title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp' rel=\"noopener\">sessionStorage<\/a> usage is that in the document.body <i>onload<\/i> event logic, we may as well <font color=green>(as part of other changes)<\/font> pre-emptively look for, and if there, respond to, any found <a target=\"_blank\" title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp' rel=\"noopener\">sessionStorage<\/a> data points, <font color=blue>even without the user having flagged it specifically<\/font> &#8230;<\/p>\n<p><code><br \/>\nvar datamode='localStorage';<br \/>\n<br \/>\nfunction checkforreport() {<br \/>\n  var divcont='';<br \/>\n  var dcaps, dctys, idis;<br \/>\n  if (getcapitals == 'localStorage') {<br \/>\n   if (window.localStorage) {<br \/>\n    getcapitals=decodeURIComponent(localStorage.getItem('wls_vs_php_capitals')).replace(\/\\+\/g,' ');<br \/>\n    localStorage.removeItem('wls_vs_php_capitals');<br \/>\n   } else {<br \/>\n    getcapitals='';<br \/>\n   }<br \/>\n  } <font color=green>else if (getcapitals == 'sessionStorage') {<br \/>\n   document.getElementById('smode').value=getcapitals;<br \/>\n   datamode=getcapitals;<br \/>\n   if (window.sessionStorage) {<br \/>\n    getcapitals=decodeURIComponent(sessionStorage.getItem('wls_vs_php_capitals')).replace(\/\\+\/g,' ');<br \/>\n   } else {<br \/>\n    getcapitals='';<br \/>\n   }<br \/>\n  }<\/font> <font color=blue>else if (getcapitals == '' && window.sessionStorage) {<br \/>\n   getcapitals=decodeURIComponent(('' + sessionStorage.getItem('wls_vs_php_capitals')).replace(\/^null$\/g,'')).replace(\/\\+\/g,' ');<br \/>\n   if (getcapitals != '') {<br \/>\n    document.getElementById('smode').value='sessionStorage';<br \/>\n    datamode='sessionStorage';<br \/>\n   }<br \/>\n  }<\/font><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    localStorage.removeItem('wls_vs_php_countries');<br \/>\n   } else {<br \/>\n    getcountries='';<br \/>\n   }<br \/>\n  } <font color=green>else if (getcountries == 'sessionStorage') {<br \/>\n   if (window.sessionStorage) {<br \/>\n    getcountries=decodeURIComponent(sessionStorage.getItem('wls_vs_php_countries')).replace(\/\\+\/g,' ');<br \/>\n    if (getcapitals.replace('sessionStorage','') != '' && getcountries.replace('sessionStorage','') != '') { document.getElementById('myh1').innerHTML+=' &lt;font size=1&gt;... yes, it was needed&lt;\/font&gt;'; }<br \/>\n   } else {<br \/>\n    getcountries='';<br \/>\n   }<br \/>\n  }<\/font> <font color=blue>else if (getcountries == '' && document.getElementById('smode').value == 'sessionStorage' && window.sessionStorage) {<br \/>\n   getcountries=decodeURIComponent(('' + sessionStorage.getItem('wls_vs_php_countries')).replace(\/^null$\/g,'')).replace(\/\\+\/g,' ');<br \/>\n   if (getcountries != '') {<br \/>\n    document.getElementById('smode').value='sessionStorage';<br \/>\n    datamode='sessionStorage';<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  <font color=green>document.getElementById('smode').value=datamode;<\/font><br \/>\n }<br \/>\n<\/code><\/p>\n<p>Which beggars the question <a target=\"_blank\" title='Difference between sessionStorage and localStorage' href='https:\/\/www.google.com\/search?rlz=1C5CHFA_enAU832AU832&#038;sxsrf=ACYBGNQEjiBrN6mf-JpqOZbxckzjOREa5A%3A1577252199998&#038;ei=Z_UCXoHVPJLorQHI0peoAg&#038;q=differences+between+sessionStorage+and+localStorage&#038;oq=differences+between+sessionStorage+and+localStorage&#038;gs_l=psy-ab.3..0i7i30j0i333l3.36328.36328..36699...0.2..0.215.215.2-1......0....1..gws-wiz.......0i71.WuAPyJrUflA&#038;ved=0ahUKEwjBpOioitDmAhUSdCsKHUjpBSUQ4dUDCAs&#038;uact=5' rel=\"noopener\">&#8220;What are the differences between sessionStorage and localStorage?&#8221;<\/a>   A quick reading might surmise that &#8220;the latter has an expiration date&#8221;.  We leave you with an open ended <a target=\"_blank\" title='Google' href='https:\/\/google.com' rel=\"noopener\">Google<\/a> search so that you may extend your readings on this.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-tutorial\/' rel=\"noopener\">Window SessionStorage Client Versus Server Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wlscvspt'>Previous relevant <a target=\"_blank\" title='Window LocalStorage Client Versus Server Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-localstorage-client-versus-server-primer-tutorial\/' rel=\"noopener\">Window LocalStorage Client Versus Server Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html\" rel=\"noopener\"><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' rel=\"noopener\">&#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' rel=\"noopener\">Whac-A-Mole<\/a> controversy of <a target=\"_blank\" title='?' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-troubleshooting-tutorial\/' rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\">&#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' rel=\"noopener\"><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\" rel=\"noopener\">wls_vs_php.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wls_vs_php.html\" title=\"Click picture\" rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\">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\/' rel=\"noopener\">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<hr>\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='#d47508' onclick='var dv=document.getElementById(\"d47508\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/session\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47508' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d47516' onclick='var dv=document.getElementById(\"d47516\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/share\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47516' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d47523' onclick='var dv=document.getElementById(\"d47523\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47523' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d47527' onclick='var dv=document.getElementById(\"d47527\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ajax\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47527' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d47535' onclick='var dv=document.getElementById(\"d47535\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/weather\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47535' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d47550' onclick='var dv=document.getElementById(\"d47550\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/glow\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47550' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d49224' onclick='var dv=document.getElementById(\"d49224\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/http-error\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49224' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d68294' onclick='var dv=document.getElementById(\"d68294\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/redirect\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68294' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Like with Page Not Found Error Message Email Subject Tutorial it&#8217;s &#8230; 404.shtml &#8230; we&#8217;re interested in embellishing the functionality of, today. The job is to allow a &#8230; https:\/\/www.rjmprogramming.com.au\/[FoldersOfRelevance]\/[FileSpecificationIncluding*Wildcard] https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/*.gif &#8230; mean something other than a &#8230; HTTP Error &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wildcard-url-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,37],"tags":[3848,4159,85,1750,1797,418,2655,2671,576,5176,590,4442,652,4158,932,997,1035,1319,1345,3302],"class_list":["post-68294","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-3848","tag-404-shtml","tag-apache","tag-document-root","tag-extension","tag-file","tag-file-extension","tag-file-specification","tag-html","tag-http-error-404","tag-image","tag-image-file","tag-javascript","tag-page-not-found","tag-php","tag-programming","tag-redirect","tag-tutorial","tag-url","tag-wildcard"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/68294"}],"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=68294"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/68294\/revisions"}],"predecessor-version":[{"id":68300,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/68294\/revisions\/68300"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=68294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=68294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=68294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}