{"id":47508,"date":"2019-12-26T03:01:00","date_gmt":"2019-12-25T17:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=47508"},"modified":"2019-12-26T18:00:02","modified_gmt":"2019-12-26T08:00:02","slug":"window-sessionstorage-client-versus-server-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-tutorial\/","title":{"rendered":"Window SessionStorage Client Versus Server Tutorial"},"content":{"rendered":"
\"Window<\/a>

Window SessionStorage Client Versus Server Tutorial<\/p><\/div>\n

Sometimes it’s the case at this blog that we’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) sessionStorage<\/a> property. But yesterday’s Window LocalStorage Client Versus Server Primer Tutorial<\/a> represented an opportunity akin to when Haley’s Comet gets at its closest to the Earth … while you see a chance, take it<\/a> … chance because of that nuance whereby we were not trying to store data for any other purpose than passing data onto …<\/p>\n

    \n
  1. a known entity … ie. same web application … at …<\/li>\n
  2. a known time … ie. immediately<\/li>\n<\/ol>\n

    … two conditions that make the code design “marginally” more ideal for the window object property concept of sessionStorage<\/a> rather than localStorage<\/a>, in that any …<\/p>\n


    \nlocalStorage.removeItem([knownLocalStorageName]);
    \n<\/code><\/p>\n

    … becomes superfluous as with sessionStorage<\/a> data will disappear between web browser sessions, anyway.<\/p>\n

    We offer this new concept as a non-default option of a select (dropdown) element replacement to the h1 element hardcoding “localStorage” with the changed<\/a<> wls_vs_php.htm<\/a> Capital City Find Matching Country Report live run<\/a>. The other nuance of difference with sessionStorage<\/a> usage is that in the document.body onload<\/i> event logic, we may as well (as part of other changes)<\/font> pre-emptively look for, and if there, respond to, any found sessionStorage<\/a> data points, even without the user having flagged it specifically<\/font> …<\/p>\n


    \nvar datamode='localStorage';
    \n
    \nfunction checkforreport() {
    \n var divcont='';
    \n var dcaps, dctys, idis;
    \n if (getcapitals == 'localStorage') {
    \n if (window.localStorage) {
    \n getcapitals=decodeURIComponent(localStorage.getItem('wls_vs_php_capitals')).replace(\/\\+\/g,' ');
    \n localStorage.removeItem('wls_vs_php_capitals');
    \n } else {
    \n getcapitals='';
    \n }
    \n } else if (getcapitals == 'sessionStorage') {
    \n document.getElementById('smode').value=getcapitals;
    \n datamode=getcapitals;
    \n if (window.sessionStorage) {
    \n getcapitals=decodeURIComponent(sessionStorage.getItem('wls_vs_php_capitals')).replace(\/\\+\/g,' ');
    \n } else {
    \n getcapitals='';
    \n }
    \n }<\/font> else if (getcapitals == '' && window.sessionStorage) {
    \n getcapitals=decodeURIComponent(('' + sessionStorage.getItem('wls_vs_php_capitals')).replace(\/^null$\/g,'')).replace(\/\\+\/g,' ');
    \n if (getcapitals != '') {
    \n document.getElementById('smode').value='sessionStorage';
    \n datamode='sessionStorage';
    \n }
    \n }<\/font>
    \n if (getcountries == 'localStorage') {
    \n if (window.localStorage) {
    \n getcountries=decodeURIComponent(localStorage.getItem('wls_vs_php_countries')).replace(\/\\+\/g,' ');
    \n if (getcapitals.replace('localStorage','') != '' && getcountries.replace('localStorage','') != '') { document.getElementById('myh1').innerHTML+=' <font size=1>... yes, it was needed<\/font>'; }
    \n localStorage.removeItem('wls_vs_php_countries');
    \n } else {
    \n getcountries='';
    \n }
    \n } else if (getcountries == 'sessionStorage') {
    \n if (window.sessionStorage) {
    \n getcountries=decodeURIComponent(sessionStorage.getItem('wls_vs_php_countries')).replace(\/\\+\/g,' ');
    \n if (getcapitals.replace('sessionStorage','') != '' && getcountries.replace('sessionStorage','') != '') { document.getElementById('myh1').innerHTML+=' <font size=1>... yes, it was needed<\/font>'; }
    \n } else {
    \n getcountries='';
    \n }
    \n }<\/font> else if (getcountries == '' && document.getElementById('smode').value == 'sessionStorage' && window.sessionStorage) {
    \n getcountries=decodeURIComponent(('' + sessionStorage.getItem('wls_vs_php_countries')).replace(\/^null$\/g,'')).replace(\/\\+\/g,' ');
    \n if (getcountries != '') {
    \n document.getElementById('smode').value='sessionStorage';
    \n datamode='sessionStorage';
    \n }
    \n }<\/font>
    \n if (getcapitals != '' && getcountries != '') {
    \n divcont='<table border=5 style=\"width:95%;vertical-align:top;background-color:white;\"><tr style=background-color:#f0f0f0;\"><th>Capital<\/th><th>Country<\/th><\/tr><\/table>';
    \n dcaps=getcapitals.split('|');
    \n dctys=getcountries.split('|');
    \n for (idis=0; idis<dcaps.length; idis++) {
    \n divcont=divcont.replace('<\/table>', '<tr><td>' + dcaps[idis] + '<\/td><td>' + dctys[idis] + '<\/td><\/tr><\/table>');
    \n }
    \n document.getElementById('dreport').innerHTML=divcont;
    \n }
    \n document.getElementById('smode').value=datamode;<\/font>
    \n }
    \n<\/code><\/p>\n

    Which beggars the question “What are the differences between sessionStorage and localStorage?”<\/a> A quick reading might surmise that “the latter has an expiration date”. We leave you with an open ended Google<\/a> search so that you may extend your readings on this.<\/p>\n

    \n

    \n

    Previous relevant Window LocalStorage Client Versus Server Primer Tutorial<\/a> is shown below.<\/p>\n

    \"Window<\/a>

    Window LocalStorage Client Versus Server Primer Tutorial<\/p><\/div>\n

    Even though we rave on a lot about serverside PHP and its $_POST method=POST (versus HTML\/Javascript recipient via ? and & 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’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

    Hint: Yes, we’ve raved on about this too?! Does the blog posting title give it away? Okay, yes, it should read “localStorage”<\/a>, but thought we’d gone past such juvenile finickiness since the Whac-A-Mole<\/a> controversy of 1st December 2019<\/a> (or even The Great Tea Trolley Disaster of \u201967<\/a>, we daresay).<\/p>\n

    It can even use a “self-destruct”<\/a> approach to the use of this “localStorage” on having used it because …<\/p>\n