{"id":38943,"date":"2018-06-21T03:01:04","date_gmt":"2018-06-20T17:01:04","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=38943"},"modified":"2018-06-20T21:29:40","modified_gmt":"2018-06-20T11:29:40","slug":"monthly-chronicler-localstorage-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/monthly-chronicler-localstorage-tutorial\/","title":{"rendered":"Monthly Chronicler LocalStorage Tutorial"},"content":{"rendered":"
\"Monthly<\/a>

Monthly Chronicler LocalStorage Tutorial<\/p><\/div>\n

Are you familiar with “LocalStorage”<\/a> at the client side of web application usage, as an alternative to HTTP Cookie usage? It can store much more information than HTTP Cookies, but has no expiry date as such. This is not to say that you can’t “removeItem” “LocalStorage” entries.<\/p>\n

Where and why is this of interest in terms of our “Monthly Chronicler” web application last talked about with the recent Monthly Chronicler Date Range Tutorial<\/a>? Well, as you can imagine, especially for somebody using this web application like a “Diary” the daily entries could get quite long. “LocalStorage” can handle this data where HTTP Cookies will “fail”.<\/p>\n

What does it mean to “fail” in Javascript? Think, the (Javascript) use of try\/catch<\/a> in our proof of concept of this idea below …<\/p>\n


\n<!doctype html>
\n<html>
\n<head>
\n<title>Proof of concept HTTP Cookies to localStorage usage - RJM Programming - June, 2018<\/title>
\n<style> td { text-align: center; } <\/style>
\n<script type='text\/javascript'>
\nvar qcok=true, cok=true, uselocal=false;
\nvar str=\"0123456789\", prestr=\"0123456789\";
\nfunction vr_cookieVal(thisl) {
\n var tCookie, subfor=\"\";
\n if (uselocal) {
\n if (localStorage) {
\n var lthere=null;
\n eval(\"lthere=localStorage.\" + thisl);
\n if (lthere) {
\n subfor=thisl + '=' + localStorage.getItem(thisl) + \"; \";
\n tCookie=subfor.split(\"; \");
\n }
\n }
\n }
\n if (subfor != \"\" || document.cookie != '') {
\n if (subfor == \"\") {
\n tCookie=document.cookie.split(\"; \");
\n }
\n for (var j=0; j<tCookie.length; j++) {
\n if ((\"\" + thisl.trim()) == tCookie[j].split(\"=\")[0]) {
\n return decodeURIComponent(tCookie[j].split(\"=\")[1]);
\n }
\n }
\n }
\n return '';
\n}
\nfunction vr_setCookie(thisl, thisg) { \/\/ thanks to JavaScript and Ajax by Tom Negrino and Dori Smith
\n var expireDate = new Date();
\n expireDate.setMonth(expireDate.getMonth()+6);
\n try {
\n if (uselocal) {
\n if (localStorage) {
\n localStorage.setItem(thisl, encodeURIComponent(thisg));
\n return true;
\n } else {
\n document.cookie = \"\" + thisl + \"=\" + encodeURIComponent(thisg) + \"; expires=\" + expireDate.toGMTString();
\n if (vr_cookieVal(thisl) != thisg) return false;
\n return true;
\n }
\n } else {
\n document.cookie = \"\" + thisl + \"=\" + encodeURIComponent(thisg) + \"; expires=\" + expireDate.toGMTString();
\n if (vr_cookieVal(thisl) != thisg) return false;
\n return true;
\n }
\n } catch(error) {
\n try {
\n if (uselocal) {
\n document.cookie = \"\" + thisl + \"=\" + encodeURIComponent(thisg) + \"; expires=\" + expireDate.toGMTString();
\n return false;
\n } else {
\n expireDate.setMonth(expireDate.getMonth()-6);
\n document.cookie = \"\" + thisl + \"=; expires=\" + expireDate.toGMTString();
\n if (localStorage) {
\n localStorage.setItem(thisl, encodeURIComponent(thisg));
\n return false;
\n } else {
\n document.cookie = \"\" + thisl + \"=\" + encodeURIComponent(thisg) + \"; expires=\" + expireDate.toGMTString();
\n return false;
\n }
\n }
\n } catch(errortwo) {
\n return false;
\n }
\n }
\n}
\nfunction startoff() {
\n if (qcok && cok) {
\n str+=prestr; \/\/\"0123456789\";
\n if (str.length < 520) prestr=str;
\n document.title='' + str.length;
\n cok=vr_setCookie(\"ourstring\", str);
\n cok=vr_setCookie(\"ourstring2\", str);
\n if (cok) {
\n document.getElementById('Cookie').innerHTML='' + str.length;
\n document.getElementById('Cookie2').innerHTML='' + str.length;
\n setTimeout(startoff,200);
\n } else {
\n uselocal=true;
\n document.getElementById('localStorage').innerHTML='' + str.length;
\n document.getElementById('localStorage2').innerHTML='' + str.length;
\n setTimeout(startoff,200);
\n }
\n } else {
\n prestr=str.substring(0,2000);
\n qcok=false;
\n cok=true;
\n for (var ii=0; ii<1; ii++) {
\n str+=prestr; \/\/\"0123456789\";
\n document.title='' + str.length;
\n cok=vr_setCookie(\"ourstring\", str);
\n cok=vr_setCookie(\"ourstring2\", str);
\n if (cok) {
\n document.getElementById('localStorage').innerHTML='' + str.length;
\n document.getElementById('localStorage2').innerHTML='' + str.length;
\n setTimeout(startoff,200);
\n } else if (document.getElementById('localStorage').innerHTML.indexOf(' failed at ') == -1) {
\n localStorage.removeItem(\"ourstring\");
\n localStorage.removeItem(\"ourstring2\");
\n document.getElementById('localStorage').innerHTML+=' failed at ' + str.length;
\n document.getElementById('localStorage2').innerHTML+=' failed at ' + str.length;
\n prestartoff();
\n }
\n }
\n }
\n}
\nfunction prestartoff() {
\n var xexpireDate = new Date(); xexpireDate.setMonth(xexpireDate.getMonth()-6); document.cookie = \"\" + \"ourstring\" + \"=; expires=\" + xexpireDate.toGMTString(); document.cookie = \"\" + \"ourstring2\" + \"=; expires=\" + xexpireDate.toGMTString();
\n}
\n<\/script>
\n<\/head>
\n<body onload=' prestartoff(); startoff();'>
\n<table style='width:100%;'>
\n<tr><th>Cookie<\/th><th>localStorage<\/th><\/tr><tr>
\n<td id=Cookie><\/td><td id=localStorage><\/td><\/tr>
\n<td id=Cookie2><\/td><td id=localStorage2><\/td><\/tr>
\n<\/table>
\n<\/body>
\n<\/html>
\n<\/code><\/p>\n

… and that you can either download to your local web server (such as MAMP<\/a> local Apache\/PHP\/MySql) and execute to test this yourself.<\/p>\n

“Failure” is relative. How do you learn without failure? Why do we come down so hard on “failure” when a lot of what we learn can only be learnt through failure? I expect an answer to these by tomorrow, otherwise we’ll just have to tell your parents, OK?! Well, no, it’s not OK … it’s okay … but, well it’s not OK … okay?!<\/p>\n

It could be some time, or never that today’s (changed code of<\/a>) monthly_chronicler.html<\/a>‘s live run<\/a> link comes into play, but we’re here for the “long game”. Quidditch<\/a>, anyone?!<\/p>\n

\n

Previous relevant Monthly Chronicler Date Range Tutorial<\/a> is shown below.<\/p>\n

\"Monthly<\/a>

Monthly Chronicler Date Range Tutorial<\/p><\/div>\n

Today’s crucial Javascript function is called “nothing” (or more specifically setTimeout(nothing,600);<\/i> (to have a small delay to when it gets used)). How did this come to pass? Well, today, with some new onclick event logic allowing for the user to define date range “Monthly Chronicle” data entries, we define new onclick<\/i> logic on a whole lot of table td (cell) HTML elements. You click on a table cell then click on another (or its nested a<\/i> link) and that’s two dates ready to define a date range … right? Well, yes, “right”, but with event logic, events flow through to parent HTML elements as well, and so without some care, we could end up with ugly consequences … right?!<\/p>\n

Without that care, of calling “nothing” (a Javascript function that resets some arrays …<\/p>\n


\nfunction nothing() {
\n range=[];
\n tdclicklist=[];
\n}
\n<\/code><\/p>\n

… back to pre-cell clicking (or touching) days … good times<\/a><\/font>) a lot<\/a>, at the correct times for non-cell “nested”<\/em> …<\/p>\n


\nfunction getinfo(bb) {
\n if ((document.URL.split('#')[0] + '&').indexOf('close=&') != -1) theopen='';
\n var rv='', sparerv='';
\n rv=vr_cookieVal('c' + bb);
\n if (rv != '') {
\n sparerv=rv.replace(\/\\'\/g,'`').replace(\/\\\"\/g,'`');
\n while (sparerv.indexOf(String.fromCharCode(10)) != -1) {
\n sparerv=sparerv.replace(String.fromCharCode(10), ' ');
\n }
\n while (sparerv.indexOf('<br>') != -1) {
\n sparerv=sparerv.replace('<br>', ' ');
\n }
\n while (sparerv.indexOf('<div>') != -1) {
\n sparerv=sparerv.replace('<div>', ' ');
\n }
\n while (sparerv.indexOf('<\/div>') != -1) {
\n sparerv=sparerv.replace('<\/div>', ' ');
\n }
\n while (sparerv.indexOf(' ') != -1) {
\n sparerv=sparerv.replace(' ', ' ');
\n }
\n return '<details onclick=\"setTimeout(nothing,600);\"<\/em> title=\"' + sparerv.split('<')[0] + '\" id=dt' + bb + theopen + '><summary onclick=\"setTimeout(nothing,600);\"<\/em> title=\"' + sparerv.split('<')[0] + '\" id=sy' + bb + '><\/summary><div onclick=\"setTimeout(nothing,600);\"<\/em> onblur=\"makeit(' + \"'c\" + bb + \"',this.innerHTML\" + ');\" contenteditable=\"true\">' + rv + '<\/details>';
\n }
\n return rv;
\n}
\n<\/code><\/p>\n

… elements, we’ll not be able to differentiate a click of an a<\/i> link (ie. right on the number) from a “first of two” click date range definition.<\/p>\n

If you think about it, this “propogation” of event logic (and please know there are Javascript methods such as stopPropogation<\/a> which may help you out here too, as an alternative approach) can actually be used to your advantage the other way when you want to departmentalize several things you want to do with a click (or touch) anywhere within a table cell. It’s just not what we want today, though.<\/p>\n

And so, apart from “nothing”, what do we have today amongst the new Javascript logic for this?<\/p>\n


\nvar appendmode=false;
\nvar xtowhat='', xdwo='', xnta='';
\nvar tdclicklist=[];
\nvar range=[];
\n<\/em>
\nfunction qt(twp, suggestion) {
\n var dateo;
\n if (tdclicklist.length == 1) {
\n var towhat=tdclicklist[0];
\n range=[];
\n var tds=document.getElementsByTagName('a');
\n for (var ia=eval(-1 + tds.length); ia>=0; ia--) {
\n if (tds[ia].id.substring(1).length == towhat.substring(1).length && tds[ia].id.substring(1) >= towhat.substring(1) && tds[ia].id.substring(1) <= twp) {
\n dateo=new Date(eval(tds[ia].id.substring(1).substring(0,4)), eval(-1 + eval(tds[ia].id.substring(1).substring(4,6))), eval(tds[ia].id.substring(1).substring(6,8)));
\n range.push('d' + tds[ia].id.substring(1) + ',' + daysofweek[dateo.getDay()]);
\n }
\n }
\n tdclicklist=[];
\n if (range.length == 0) return suggestion;
\n appendmode=false;
\n return 'date range from date ' + range[eval(-1 + range.length)].split(',')[1] + ', ' + towhat.substring(1).substring(6) + ' ' + months[eval(-1 + eval(towhat.substring(1).substring(4,6)))] + ' ' + towhat.substring(1).substring(0,4) + ' to ' + suggestion + ' (prefix by + to append what is said here to any pre-existing chronicles)';
\n }
\n return suggestion;
\n}
\n<\/em>
\nfunction tdclick(tdo) {
\n if (tdclicklist.length == 1) {
\n document.getElementById('a' + tdo.id.substring(2)).click();
\n } else {
\n tdclicklist.push('a' + tdo.id.replace('td',''));
\n }
\n}
\n<\/em>
\nfunction preask() {
\n ask(xtowhat, xdwo, xnta);
\n if (range.length == 1) {
\n document.getElementById('t' + xtowhat).style.backgroundColor='yellow';
\n range=[];
\n tdclicklist=[];
\n } else {
\n if (range.length >= 1) {
\n document.getElementById('t' + xtowhat).style.backgroundColor='yellow';
\n xdwo=range[0].split(',')[1];
\n xtowhat=range[0].split(',')[0];
\n setTimeout(preask, 500);
\n } else {
\n document.getElementById('t' + xtowhat).style.backgroundColor='yellow';
\n tdclicklist=[];
\n range=[];
\n appendmode=false;
\n }
\n }
\n}
\n<\/em>
\nfunction ask(towhat, dwo, nta<\/em>) {
\n xtowhat=towhat;
\n xdwo=dwo;<\/em>
\n var retval=document.getElementById(towhat).innerHTML.split('<\/div><\/details>')[0].split('<\/details>')[0].split('<\/div>')[0];
\n if (retval.indexOf('<\/summary>') != -1) {
\n retval=retval.split('<\/summary>')[1];
\n if (retval.indexOf('\">') != -1) {
\n retval=retval.replace(retval.split('\">')[0] + '\">','');
\n while (retval.indexOf(String.fromCharCode(10)) != -1) {
\n retval=retval.replace(String.fromCharCode(10), ' ');
\n }
\n while (retval.indexOf('<br>') != -1) {
\n retval=retval.replace('<br>', ' ');
\n }
\n while (retval.indexOf('<div>') != -1) {
\n retval=retval.replace('<div>', ' ');
\n }
\n while (retval.indexOf('<\/div>') != -1) {
\n retval=retval.replace('<\/div>', ' ');
\n }
\n while (retval.indexOf(' ') != -1) {
\n retval=retval.replace(' ', ' ');
\n }
\n }
\n } else if (retval.indexOf('<div') != -1 && retval.indexOf('\">') != -1) {
\n retval=retval.replace(retval.split('\">')[0] + '\">','');
\n while (retval.indexOf(String.fromCharCode(10)) != -1) {
\n retval=retval.replace(String.fromCharCode(10), ' ');
\n }
\n while (retval.indexOf('<br>') != -1) {
\n retval=retval.replace('<br>', ' ');
\n }
\n while (retval.indexOf('<div>') != -1) {
\n retval=retval.replace('<div>', ' ');
\n }
\n while (retval.indexOf('<\/div>') != -1) {
\n retval=retval.replace('<\/div>', ' ');
\n }
\n while (retval.indexOf(' ') != -1) {
\n retval=retval.replace(' ', ' ');
\n }
\n }
\n var newretval;
\n if (nta.trim() != '') {
\n if (appendmode && retval != '') {
\n newretval=retval + ' <br>' + nta;
\n } else {
\n newretval=nta;
\n }
\n } else {<\/em>
\n if (document.URL.toLowerCase().replace('http:\/\/localhost','https:\/\/localhost').indexOf('http:') == 0 || (!passwordpassed && passwordrequired)) {
\n newretval=prompt('What do you want to chronicle for ' + qt(towhat.substring(1), '<\/em>date ' + dwo + ', ' + towhat.substring(1).substring(6) + ' ' + months[eval(-1 + eval(towhat.substring(1).substring(4,6)))] + ' ' + towhat.substring(1).substring(0,4))<\/em> + '? (NB: <br> is line feed)', retval);
\n } else {
\n newretval=prompt('What do you want to chronicle for ' + qt(towhat.substring(1), '<\/em>date ' + dwo + ', ' + towhat.substring(1).substring(6) + ' ' + months[eval(-1 + eval(towhat.substring(1).substring(4,6)))] + ' ' + towhat.substring(1).substring(0,4))<\/em> + '? (NB: <br> is line feed) (append with ?password=[yourPassword] to ask for a password to access from here on)', retval);
\n }
\n }<\/em>
\n if (newretval == null) {
\n return retval;
\n } else if (nta == '' && newretval != '') {
\n if (newretval.substring(0,1) == '+') {
\n appendmode=true;
\n if (retval != '') {
\n if (newretval != '') xnta=newretval.substring(1);
\n var xnewretval=retval + ' <br>' + newretval.substring(1);
\n newretval=xnewretval;
\n } else {
\n if (newretval != '') xnta=newretval.substring(1);
\n newretval=newretval.substring(1);
\n }
\n } else {
\n xnta=newretval;
\n }<\/em>
\n }
\n if (newretval.indexOf('?password=') != -1) {
\n \/\/document.getElementById('pd').innerHTML=newretval.split('?password=')[0];
\n makepd(document.getElementById('pd').innerHTML, newretval.split('?password=')[1]);
\n }
\n if (newretval.indexOf('\/password\/') != -1) {
\n \/\/document.getElementById('pd').innerHTML=newretval.split('\/password\/')[0];
\n makepd(document.getElementById('pd').innerHTML, newretval.split('\/password\/')[1]);
\n }
\n if (newretval.split('?password=')[0].split('\/password\/')[0] != retval) {
\n vr_setCookie('c' + towhat.substring(1), newretval.split('?password=')[0].split('\/password\/')[0]);
\n }
\n document.getElementById(towhat).innerHTML='<div onblur=\"makeit(' + \"'c\" + towhat.substring(1) + \"',this.innerHTML\" + ');\" contenteditable=\"true\">' + newretval + '<\/div>';
\n if (range.length == 1) {
\n range=[];
\n tdclicklist=[];
\n } else if (range.length > 1) {
\n document.getElementById('t' + towhat).style.backgroundColor='yellow';
\n range.shift();
\n if (range.length >= 1) {
\n xdwo=range[0].split(',')[1];
\n xtowhat=range[0].split(',')[0];
\n setTimeout(preask, 500);
\n }
\n } else {
\n range=[];
\n tdclicklist=[];
\n setTimeout(nothing, 600);
\n }<\/em>
\n return newretval;
\n}
\n<\/code><\/p>\n

… set into motion via the new onclick<\/em> logic for table cells established in the document.body onload event populate<\/i> function’s …<\/p>\n


\n mstr=mstr.replace(' title=' + thedayindex + '&gt;', ' onclick=\"tdclick(this);\"<\/em> title=' + thedayindex + ' id=td' + tddaystr + '&gt;' + alink(dmoy, tddaystr, daysofweek[eval(thedayindex % 7)]));
\n<\/code><\/p>\n

… where you will see us [array].push<\/a>ing<\/font> and [array].shift<\/a>ing<\/font> and you can appreciate the value of setTimeout<\/i><\/a> delays when creating your own event simulations.<\/p>\n

You can join with us, trying this out at (the changed<\/a>) monthly_chronicler.html<\/a>‘s live run<\/a> link.<\/p>\n

\n

Previous relevant Monthly Chronicler Password Protect Tutorial<\/a> is shown below.<\/p>\n

\"Monthly<\/a>

Monthly Chronicler Password Protect Tutorial<\/p><\/div>\n

When you have sensitive data involving personal information and monetary matters you ideally need to …<\/p>\n