localStorage.setItem not persisting on refresh - javascript

I'm trying to do a mega-simple setItem and getItem using HTML5 local storage. It just doesn't seem to work though. This works:
$(document).ready(function () {
localStorage.setItem('keyA', 'valueA');
var testA = localStorage.getItem('keyA');
alert(testA);
});
It outputs an alert box saying 'valueA'. But when I comment out line 2 (which sets the item value) and refresh the page it just alerts 'null'.
Why is the value not persisting? It's like it's just not actually getting stored at all.
The browser is Firefox 6, so no problem there. Could it be something to do with calling it in the jquery document.ready? I've googled but couldn't see anything about that.
If anyone could get me over this initial hurdle I'd be most grateful, thanks!

Okay, after a lot of frustration I have the solution. Basically, I was running this locally just from the filesystem as a 'quick' proof of concept. It didn't work in Firefox nor in IE9 but it did work in Chrome.
What I ended up doing was trying this on a real domain, and that seems to have done the trick.
So the conclusion I can draw is that localStorage in Firefox (6.0.2 at least) and IE9 does not work when run on a file-system path. It does in Chrome. Firefox and IE9 require a 'proper' domain to run from, presumably because they are more strict than Chrome in the way they associate the localStorate object to a 'domain' (in Chrome it doesn't need to be a domain as such).
I hope this has helped people as it's frustrated the hell out of me! :)

Related

Lightning script error in Chrome and Firefox but not in IE

I'm so used to having things work in Chrome and Firefox and then having to be fixed in IE that this has me well and truly stumped.
I'm trying to get DataTables to work within a Lightning component and keep getting this error: Uncaught TypeError: Failed to construct 'Option': Please use the 'new' operator, this DOM object constructor cannot be called as a function. As you can see here:
A mate at work suggested I try it in IE and it all works fine:
So I guess my question has multiple parts, not only do I need to understand why it fails in Chrome (and Firefox, because it errors there as well) and how I might correct it, but I'd also really like to understand what's going on within Lightning for this to happen as it seems as though the culprit is aura_prod.js but I've checked the script in both environments and it's the same in each...
Any help greatly appreciated.
EDIT
Quite rightly it has been pointed out that I haven't included any code, I guess the reason I didn't is because it's trivial:
$("#example").DataTable();
which is called after the table has been generated as a static table.

In what situation would document.open() return null?

I'm trying to understand an intermittent script error that I am seeing in a JavaScript intensive thin-client application running under Internet Explorer 6 and Windows XP. The root cause of the problem is that the following function call returns a null value (however it does succeed without an error):
var doc = targetWindow.document.open("text/html","_replace");
Where targetWindow is a window object.
Neither targetWindow nor targetWindow.document is null and so I'm struggling to understand why this call would return null. My interpretation of the documentation is that this method shouldn't ever return null.
This code has been unchanged and working perfectly for many years - until I understand why this is happening I'm not sure either how I might handle this, or what might have changed to cause this to start happening.
What might cause this function call to return null?
According to the documentation you should be passing "replace", not "_replace". Try this instead:
var doc = targetWindow.document.open("text/html", "replace");
Since you say your code has worked for years, then it is likely that something has changed and the above suggestion may not be the issue. However, it is still worth a try.
Have you changed any js files / libraries you are using in your application lately? Also, are you using any browser plugins within the page? It is possible that a newer version of either of these could be somehow affecting your call to "document.open".
document.open() does not have any parameters by W3C standard. Check out this link: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-72161170
I recommend you to use W3C documentation instead of Microsoft's one because with W3C you are sure it works on all modern browsers, while Microsoft is well known for adding extensions that, of course, works only in their own products. It's called EEE (Embrace, extend and extinguish).
Simply use document.open() without arguments. There are ways to manipulate user history, but that's called bad programming practice. History is user's private data and web application should not try to manipulate it.

Getting all info on a Javascript variable

I'm not a JavaScript Wizard by a long shot. But I am a web-developer and so I need to know my way around it at least a bit.
Something I'll often do is simply alert a variable to see what it is.
However, the problem is that I'll often get a result like: "object HTMLInputElement". To me this means little to nothing. Sure I can look it up, but I need to alert children() of children() of children(), etc...
I've tried walking through the JavaScript with Firebug, but for some reason this is very slow. Firefox hangs when I start a debug session, for every single debug session and I don't know why.
So, I want to inform if there is a way to get detailed info on variables some other way. Or a system I can use to work with to make things easier.
I find the developer tools in Chrome work quite well, giving a good amount of detail on demand (usually just hovering the mouse over the variable in the script tab; if that variable is a structured object, a little tree control appears and you can drill down). But then, I don't have your Firebug issue either (or at least, not often anymore).
Debugging with alert is very time-wasteful and, as you've found, frustrating; if at all possible I'd look at using a real debugger (like Chrome's Dev Tools; I've also heard good things about Opera's).
This should help:
http://www.openjs.com/scripts/others/dump_function_php_print_r.php
The easiest way to inspect a javascript variable is with a debugger. If Firebug is not working out for you try using Google Chrome, it has an inspector built in.
Btw - not sure what you mean by "start a debug session". If you have firebug installed, you should simply be able to click on the firebug icon on the bottom right of your browser. Go to the script tab, and select from the drop down whatever js file you want, stick in a break point (just left-click on the margin) and refresh the page. I've never had a problem with Firebug, it's always worked extremely well. I strongly advise figuring out whatever your issue with it is, it will make your life a million times easier.
Using any of the browser dev tools, including IE9, you can use console.log to get the variable output on the console. What information this gives you will vary by browser, but with Firebug it allows you to explore the variable in the DOM inspector tab, with full access to all properties and functions (you can even copy the content of a function to paste elsewhere).
For instance:
var foo = {};
// Do lots of stuff with foo
if (typeof(console) !== "undefined" && console.log) { // prevent errors when console not open, ideally all console calls should be removed before going into production
console.log(foo);
}
This has the advantage that it doesn't require any break points, so no slow step-debugging. It won't solve everything though, you'll often still need the debugger.

VERY confused - javascript not being executed - unless Console is turned on in Firebug?

I just started doing some Javascript work for a project, I do mostly backend work so I'm sorry for being new at this! Also, not using a Javascript framework because I want to learn about the fundamentals before making everything very easy for myself :)
So, here is my question/confusion: I wrote a little javascript that dynamically changed forms. This is how I called the code:
// loads the initial box
window.onload = initList(environment_box);
// loads artifacts on each change to environment select box
environment_box.onchange = changeList;
This worked like magic - in CHROME that is! I never noticed it wasn't working in Firefox (its just an internal tool, so I can assume decent browsers, but I figure hey, if its working in Chrome, it will work in Firefox!). So, I did some investigation, and it seems as though the code isnt getting executed in Firefox. I whipped out firebug and wanted to see what was going on.
The interesting thing was, when I enabled Console on firebug, my code got executed! I am very confused as to why, and I would much appreciate any help I could get. Thanks!
-Shawn
You are calling some method on console in your JavaScript is my best guess. Chrome has console defined be default, so it is not a problem.
On Firefox, however, there is no such global object (not without Firebug), so when you try to call a property on an undefined object like,
console.log(..);
it throws an exception which you are not catching, so the JavaScript execution halts.
You're probably calling a method of the console object which just doesn't exist by default in most web browsers. It may be always available on webkit based browsers (like Chrome) but with firefox/IE(/opera?) it requires an external add-on, either firebug or a javascript dependency.
Checkout things like firebugx which simply defines the most common methods of a console object as no-op functions.

VS2008 javascript debugger IE8 "there is no source code available for the current location"

I have almost the same problem as this unanswered question. The only difference is I'm using VS2008, but I'm in an MVC project calling this javascript function:
function CompanyChange(compCtrl) {
alert(compCtrl.value);
debugger;
var test;
for (var i = 0; i < document.all.length; i++) {
test = document.all[i];
}
}
I hit the alert, then I get the message "there is no source code available for the current location." At which point the page becomes unresponsive and I have to manually stop the debugger just to shut it down.
I've logged into another machine and ran this exact code and it works fine, I hit the debugger and can step through. I've checked to make sure all settings in VS>Tools>Options>Debugging are identical as well as IE>Options>Advanced and they are. Both machines are Windows 7 Enterprise edition 32-bit, VS2008, IE8.
I've also tried attaching a process manually in VS, and using the 'Developer Tools' in IE which didn't work (said there already was a process attached).
I was hoping someone may have had this problem and found a work-around because I've already done a lot of searching and tried all the options I've read. Anyone else run into this?
Thank you,
Jeff
I recently answered the original question, so thought I'd post my answer here too:
The debugger cannot debug both Silverlight code and Script code at the same time, if the Silverlight debugger is selected JavaScript debugging is switched off.
To resolve this go to the Project's Properties and select "Start Options". Next check that the Silverlight checkbox is NOT ticked if you want to be able to debug JavaScript. (It is unfortunate that the UI here is not clear about this side effect.)
Even I had the same "Source code not available" msg for ie8. Actually I was having 2 different methods with same names having different parameters in 2 different pages and one of the method which I was invoking was not getting called due to the overloaded method which Ie8 doesn't detect. So I just renamed the function and it resolved the issue

Categories

Resources