Develop Reference

localStorage boolean triggers weird behavior

I'm having really strange problems with my code using localStorage...
I would post code either here or in jsfiddle but for it to work I need a bunch of resources and for some reason won't display correctly on jsfiddle.
For an example, you can view the webpage I have it hosted at: http://spedwards.cz.cc/new.html
When you check one (can be any value but lets say 1 for this purpose) of the checkboxes for any hero, click Generate (in the last section) and hit refresh, all of the heroes have their activity checked even though only the one that was checked prior to the refresh should remain checked.
When checking localStorage in the console, only the checked one will have true and all the others will be on false as well which makes it weird. If someone can explain why it's doing this and/or explain an error that I've obviously missed.
Below I will post some of the functions.
Storing everything:
function storage() {
var username = $('#username').val();
var password = $('#password').val();
if (typeof(Storage) != "undefined") {
// Store user's data
window.localStorage.setItem("username", username);
window.localStorage.setItem("password", password);
$.each(heroes, function(index,value){
window.localStorage.setItem("heroActive" + index, $('input#isActive' + index).is(':checked') );
window.localStorage.setItem("heroLevel" + index, $('input#level' + index).val() );
window.localStorage.setItem("heroPrestige" + index, $('input#prestige' + index).val() );
});
} else {
// Browser doesn't support
alertify.alert('<b>Your browser does not support WebStorage</b>');
}
}
Loading the values:
var username, password;
username = localStorage.getItem('username');
$('#username').val(username);
$.each(heroes, function(index,value){
if( localStorage.getItem('heroActive' + index) ){
$('input#isActive' + index).attr('checked', localStorage.getItem('heroActive' + index) );
} else {
$('input#isActive' + index).removeAttr('checked');
}
$('input#level' + index).val( localStorage.getItem('heroLevel' + index) );
$('input#prestige' + index).val( localStorage.getItem('heroPrestige' + index) );
});
The list that is causing problems:
var heroes = ["Black Panther","Black Widow","Cable","Captain America","Colossus","Cyclops","Daredevil","Deadpool",/*"Doctor Strange",*/"Emma Frost",
"Gambit","Ghost Rider","Hawkeye","Hulk","Human Torch","Iron Man","Jean Grey",/*"Juggernaut",*/"Loki","Luke Cage",/*"Magneto","Moon Knight",*/"Ms Marvel",
"Nightcrawler",/*"Nova","Psylocke",*/"Punisher","Rocket Raccoon",/*"Silver Surfer",*/"Scarlet Witch","Spider-Man","Squirrel Girl",/*"Star-Lord",*/"Storm",
/*"Sue Storm",*/"Thing","Thor","Wolverine"/*,"Venom"*/];
Additionally, the last entry (Wolverine) doesn't seem to be functioning correctly. For a starter clicking the label for its activity doesn't trigger the checkbox whereas all the others do. Other problems with this entry:
Doesn't trigger my errors.js file at all
errors.js:
$.each(heroes, function(index,value){
$('input#level' + index).change(function() {
var numbers = /^[0-9]+$/;
var val = $('input#level' + index).val();
if(val > 60) {
alertify.log("Hero " + value + " cannot be above Level 60!", "", 0);
$('#level' + index).addClass('error');
} else if( isNumeric(val) ) {
if( $('#level' + index).hasClass('error') ) {
$('#level' + index).removeClass('error');
}
} else {
alertify.log("Only numbers are accepted.");
$('#level' + index).addClass('error');
}
});
});
function isNumeric(num){
return !isNaN(num);
}

Anything stored in local storage returns as a string.
So if you stored fooo = false in local storage,
if(!fooo){
bar();
}
will never execute bar();
if(fooo){
bar();
}
will always execute bar(), since a string always is true, since the variable is not empty or false.
I've banged my head against this once as well. Kinda stupid, but hey. :)

javascript cookie is not returning the value

I have a cookie that is being set by this function (page calendar.html):
function bookit(id){
document.cookie='eventid' + "=" + id;
document.location.href ="/sys/account.php";
}
After that the users is redirected to account.php so he can sign in and the id is used on that page and this is what I have on account.php:
function getCookieValue(key)
{
currentcookie = document.cookie;
if (currentcookie.length > 0)
{
firstidx = currentcookie.indexOf(key + "=");
if (firstidx != -1)
{
firstidx = firstidx + key.length + 1;
lastidx = currentcookie.indexOf(";",firstidx);
if (lastidx == -1)
{
lastidx = currentcookie.length;
}
return unescape(currentcookie.substring(firstidx, lastidx));
}
}
return "";
}
alert(getCookieValue("eventid"));
well the dilemma is : when I refresh calendar.html the alert returns 51 for example which is the value of that event, BUT when i refresh account.php it says: NULL
I have tried a jquery cookie plugin, same results so I went back to basic javascript, its driving me insane at this point I dont understand how to pass that value.
I figured using cookies would be the right method - but its not working.any suggestions please? I have a javascript debugger my code has no errors.

dojo.cookie(id) not able to look up cookie by id intermittently

_setPrintExportCookieInterval: function(/**String*/requestId, /**function*/closePopup) {
//have the interval autoexpire after some amount of seconds
var count = 0;
var intervalMs = 2000;
var intervalId = self.setInterval(function() {
var reportCookie = dojo.cookie(requestId);
console.debug('requestId ' + requestId);
if(reportCookie || count > 300000) { //5 mins
//if there's a status failure, don't close the window
console.debug('reportCookie ' + reportCookie);
if(reportCookie == undefined){
console.debug("print/export request returned with undefined status ");
} else if(reportCookie == "success") {
closePopup();
} else{
console.debug("print/export request returned with nonstandard status " + reportCookie);
}
window.clearInterval(intervalId);
//delete the cookie
dojo.cookie(requestId, null, {path: "/", expires: -1});
//destroy the iframe
//dojo.destroy(dojo.byId(requestId));
};
count+=intervalMs;
}, intervalMs);
return intervalId;
},
I'm having problems with the above javascript function. The problem generally is that sometimes:
var reportCookie = dojo.cookie(requestId);
returns null, but when I look in my browser's debugging tool I'm able to see that the cookie exists with a value of success. This happens one in every 10 times this function is called. Any ideas why dojo.cookie() is not able to look up the cookie by ID only some of the time?

Make sure that you specify the path when you are retrieving the cookie, otherwise it defaults to the current location. This will allow you to get the Cookie from any path within your domain.
dojo.cookie(requestId, null, {path: "/" });

How to run a setInterval that loops and tries a max of 10 times before breaking?

I have the following to try to reload on a connection drop:
setInterval(window.location.reload(), 1000);
My concern with this is that it could continue forever, ddos'ing my application.
How can I update the above to try at max 20 times before giving up and breaking?
Thank you

This makes me feel dirty, but you could update/extract the window hash with each refresh:
function hack () {
var last = parseInt(location.hash.slice(1));
if (last < 20) {
window.location.hash = last + 1;
window.location.reload();
}
}
window.location.hash = 0;
setTimeout(hack, 1000);

You need to persist some counter state from one page load to the next so you can know when 20 reloads have been done. Your options are:
A hash value
A query parameter
A cookie value
Something stored in local storage
If you don't need this value to persist beyond just the reloads of this page, then options 1) and 2) are better as they are only as persistent as you need. A hash value will not be sent to your server, but could interfere with other uses of the hash value. A query parameter would be sent to the server, but any reasonable server will ignore query values it doesn't know and it won't interfere with anything else. I'd probably pick a query parameter and have actually used one to avoid infinite redirection loops in some of my code. You could implement option 2) like this:
function checkAutoReload() {
var currentCnt = 0;
var re = /(\?|&)(reloadCnt=)(\d+)/;
var param = window.location.search.match(re), newURL;
if (param) {
currentCnt = parseInt(param[3], 10);
newURL = window.location.href.replace(re, "$1$2" + (currentCnt + 1))
} else {
newURL = window.location.href;
newURL += window.location.search ? "&" : "?";
newURL += "reloadCnt=1";
}
if (currentCnt < 20) {
window.location.replace(newURL);
}
}
setTimeout(checkAutoReload, 1000);
Notice, there's no need for a setInterval() because a given page's code only runs once before it either reloads or finds that it is done reloading.

Store the reloadCount in localStorage
MDN DOM Storage
var maxReload = 20;
var reloadPage = function() {
if (typeof a !== "undefined" && a !== null) {
console.log(localStorage.reloadCount);
localStorage.reloadCount = 0;
};
var reloadCount = parseInt(localStorage.reloadCount, 10);
console.log(reloadCount);
if (reloadCount < maxReload) {
reloadCount += 1;
localStorage.reloadCount = reloadCount;
// RELOAD CODE HERE
};
};
// call reloadPage from your code
reloadPage();

Using new Image().src for click tracking

I am attempting to figure out why this click tracker isn't working. The code was written by another developer so I am not entirely sure if this ever did work.
function trackSponsor(o, p) {
(new Image()).src = PATH_BASE + 'click/' + p + '/' + o + "?_cache=" + (+(new Date()));
return false;
}
From what I can gather is that when this function is called it 'creates a new image' to fire a php script asynchronously. According to Firebug, the request is made however it is 'aborted' ~30ms in. The odd thing is that it will 'sometimes' work as in 1 in every 10+ regardless of the browser.
I would much rather fix this so that it works instead of re-writing it as an ajax request.
Any help is appreciated.
Thanks in advance.
EDIT
Because of tvanfosson's post that got me thinking. I have included the line which calls the click tracker below.
<a onclick="trackSponsor(60, 15077); goToNextStep(1988, 15077, 0); return false;" href="#">view</a>
the goToNextStep() actually changes the page. I am under the impression that it would only be executed after trackSponsor() had finished.

It's actually pretty trivial to rewrite as a get request using jQuery. Rewriting it will certainly help the next developer understand what's happening and might fix your problem. I'd need to know more about the contents of the variables -- perhaps they need to be urlEncoded? -- before I could help you any more on it. You might try urlEncoding them and see what happens.
function trackSponsor(o, p) {
var url = PATH_BASE + 'click/' + p + '/' + o + "?_cache=" + (+(new Date()));
$.get(url);
return false;
}
EDIT: you might want to check that another handler isn't redirecting the browser to a new location when the event triggering the tracking is invoked. This would abort any pending requests on the page -- and might allow a few to succeed based on the timing of the requests and if the results are delivered before the page is unloaded.

"(new Image()).src = url;" just asks for browser to hit the url.
You should delay for a 50-100ms in order to be sure that tracking info were sent to the server.
function delay(a) {
for (var b = +new Date, c = 1; 0 < c; c++) {
if (0 == c % 1E3) {
var e = +new Date;
if (b > e) break;
if (e - b > a) break;
}
}
}
function trackSponsor(o, p) {
(new Image()).src = PATH_BASE + 'click/' + p + '/' + o + "?_cache=" + (+(new Date()));
delay(100);
return false;
}

I poked around Google Analytics’ ga.js, which does use the new Image() method similar to your script.
The only difference that I could see was in how the object is created. Google's script assigns the object to a variable.
var d=new Image(1,1);d.src=f;
Maybe give that a shot?
function trackSponsor(o, p) {
var i = new Image(1,1);
i.src = PATH_BASE + 'click/' + p + '/' + o + "?_cache=" + (+(new Date()));
return false;
}
It shouldn't make a difference, but is worth a shot.

Maybe try this, for avoiding Garbage Collection to make your log not be lost.
var sendLog = (function () {
var _unique = (function () { /* 产生唯一标识*/
var time = (new Date()).getTime() + '_',
i = 0;
return function () {
return time + (i++);
}
}());
var run = function (url) {
var data = window['imgLogData'] || (window['imgLogData'] = {}),
img = new Image(),
uid = _unique();
data[uid] = img; /* 防止img被垃圾处理*/
img.onload = img.onerror = function () { /* 成功或失败后销毁对象*/
img.onload = img.onerror = null;
img = null;
delete data[uid];
};
img.src = url + '&_cache=' + uid; /* 发送统计内容*/
};
return run;
}());
sendLog('http://log_');