localForage setItem/getItem unreliable in Firefox / FireStorage Plus - javascript

I am loading a local instance of localForage and using it with Promise chains to save basic data. A simple example:
localforage.getItem("sellerExtension").then(function(sellerExtension) {
if ((!sellerExtension) || (sellerExtension.length < 3)) {
var sellerExtension = $('input#sellerExtension').val();
if ((sellerExtension) && (sellerExtension.length > 3)) {
localforage.setItem('sellerExtension', sellerExtension).then( function() {
});
}
}
});
The problem comes when I go into the FF Dev-Tools to check FireStorage Plus! and see nothing related to the saved/set data. BUT I do in Chrome just fine. There should be several saved items.
I'd been replacing localStorage (just for Firefox ugh) and am somewhat perplexed why thier own wrapper isn't showing in this FF specific extension for accessing the local DB instances. It shows key, getItem, clear and all, however.
Any ideas why this is happening? I fully expected to see something, and am looking in the right spot, I believe. (Screenshot below) It doesn't seem to be loading the data from a .getItem request, either.
I am using some AJAX to access other files in a sub-directory which handles localForage, but am on the same domain/port. Could I somehow be working in another scope? How would I know?
Thanx MUCH for any assistance!
And in Chrome I see it all...
BUT not in FF in any of the Scopes listed...

Could the problem be that it's localStorage and not localForage as you have in your code?
Did you notice that in your screen shot, the Firebug tab says localStorage on it?

Extensions like Firestorage Plus! and simplesession are NOT reliable when looking for data being set with localForage!!! The key (pun intended) is to use the Firefox built-in Inspector.
I could NOT find this in my FF after adding extensions, but I had the FF Dev Edition, ran that, enabled the Storage tool in config options, and bam, there they ALL were!! Hope this helps someone else out.
I "believe" that if you set data on a different page/file, those extensions wont see these values, only the orginial file/page's getItem data.

Related

Problems testing XHRs/Fetch with Chrome 42 on OS X

We are using Marty.js (and React.js) in our webapp.
As I read in the Marty.js docs they're using the fetch-polyfill to communicate with the server over http. Everything fine so far ...
While testing in Google Chrome (currently v42) first I noticed that the body of the request isn't shown (but sent ?!?) and then that I can't "replay XHR" from the dev-tools.
Can anybody tell me why this is the case?
update 04/26/15
Because it seems to not have anything to do with marty.js I removed it from the question's title.
I believe what you're seeing is related to two issues in MartyJS' github.
https://github.com/martyjs/marty/issues/308 (success function called regardless off http status code returned)
https://github.com/martyjs/marty/issues/293 (martyjs not deserialzing json properly in certain browser setups) <-- this is the one you're having a specific issue with it looks like.
There was an update to the library to fix both of these. I recommend upgrading. We haven't had any problems since grabbing the latest as of a week ago (0.9.14). I believe a new version has already been released (0.9.15) while work on 0.10 is being done in parallel.

mozChannels/mozSampleRate is undefined

I am using the this within an audio experiment of mine.
audiometa: function(){
channels = audio.mozChannels;
rate = audio.mozSampleRate;
frameBufferLength = audio.mozFrameBufferLength;
fft = new FFT(frameBufferLength / channels, rate);
},
For some reason, mozChannels/mozSampleRate and mozFrameBufferLength is undefined using the latest version of Firefox. Reading the cos, I can't explain myself, why this could happen.
Is there something within the about:config page which I need to turn on? (Have tried it local and on a webserver)
By the way, I am using this example.
https://wiki.mozilla.org/Audio_Data_API#Reading_Audio
Thanks
It looks like Firefox no longer supports mozChannels, mozSampleRate and mozFrameBufferLength. That would cause an undefined error. The link to the doc you provided has a note that says that API has been deprecated in favor of the W3C Web Audio API. And I searched through the Firefox codebase here:
https://dxr.mozilla.org/mozilla-central/source/
And those properties do not appear in the Firefox code. I suggest you try using the W3C Web Audio API:
https://webaudio.github.io/web-audio-api/
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

JSON Stringify crashing

I've been testing some code which takes a variable in a json format and should print that, it prints an empty array however.
If I'm trying this:
console.log(JSON.stringify({first:1,second:2}));
Then I'm crashing the page (Chrome: "Aw, Snap!").
I've asked a few people, and they weren't able to reproduce it, I however get it every time. Tested it in FireFox too, and there it crashes too.
This was the code:
var timer={first:0,second:0,third:0,fourth:0};
localStorage.setItem('saveTimers', JSON.stringify(timer));
And that sets [] in the localStorage
I was able to crash it when running it this a lot:
for (var i = 0; i < 100000; i ++) {
var timer={first:0,second:0,third:0,fourth:0};
localStorage.setItem('saveTimers', JSON.stringify(timer));
}
Perhaps you're running this code a bunch of times really quickly? A solution to this might be to throttle your function, which can be done by implementing a throttle function or with Underscore.js's throttle.
So by my understanding the problem you're really having is saving things to localStorage.
This seems more like a permissions problem than anything else. Does the browser have permission to access the filesystem? Are the folders used by the browser available for writing? Have you tried re-installing the browsers?
These are the things you should be checking.
If you are using a beta or dev build of chrome, double check that this behaviour is the same in a stable build and if not, then there's your problem.

HTML Offline Application Cache, Listing Downloaded Files

As part of a loading screen for an offline-enabled web application I'm building (using a cache manifest), I'd like to display an accurate progress bar that lets users know which files has thus far been downloaded and which are still pending. Something like the following:
Loading...
/assets/images/logo.png: loaded
/assets/images/splashImage.png: pending
I know that I can use the cache "pending" event, but I don't see that the event arguments have any data associated with them.
Is there any way to do this?
There is a progress event that gets triggered when each file downloads, however its payload does not include the file name in any browser that I've tested with (Chrome, Safari, FF beta). Chrome displays the file name in the Console (though as far as I know it's inaccessible to JS), but neither Safari nor FF even go that far. And from what I've seen, the files do not download in the same order that they're listed in the manifest, so there's not even a way to generate an ordered list then knock them off one at a time.
So in answer to your question, no, there isn't any way to do this right now. It's possible that in the future the progress event will include the filename - at least in some browsers - but right now this isn't possible.
I should add that in Chrome (not in Safari or FF) you can at least get a count of files to be downloaded, allowing you to at least calculate an accurate progress bar. To get this in Chrome you'd use the following:
function downloadProgress(e) {
totalfiles = Number(e.total);
}
window.applicationCache.addEventListener("progress", downloadProgress, false);
However this will error out in other browsers, so you need to wrap a try/catch or some other method (typeof(e.total)) to avoid the error.
This is a few years late, but maybe it'll help someone else who's researching this.
It doesn't list the files or anything, but it shows an accurate(ish) progress bar based on the total number of files loaded. It may still need a little work...
https://github.com/joelabeyta/app-cache-percent-bar

jQuery.data() works in Mac OS WebKit, but not on iPhone OS?

I'm playing around with jQTouch for an iPhone OS app that I've been toying with off and on for a while. I wanted to try my hand building it as a web app so I started playing with jQTouch. For reference, here is the page+source (all my code is currently in index.html so you can just "View Source" to see it all):
http://rpj.me/doughapp.com/wd/
Essentially, I'm trying to save pertinent JSON objects retrieved from Google Local into DOM objects using the data() method (in this example, obj is the Google Local object):
$('#locPane').data('selected', obj);
then later (in a different "pane"), retrieving that object to be used:
$('#locPane').bind('pageAnimationEnd', function(e, inf) {
var selobj = $(this).data('selected');
// use 'selobj' here ...
}
In Chromium and Safari on the desktop OS (Snow Leopard in my case), this works perfectly (try it out).
However, the same code returns undefined for the call to $(this).data('selected') in the second snippet above. I've also tried $('#' + e.target.id).data('selected') and even the naive $('#locPane').data('selected'). All variants return undefined in the iPhone OS version of WebKit, but not on the desktop.
Interestingly, the running this on Mobile Safari in the iPhone Simulator fails as well.
If you look at the full source, you'll see that I even try to save this object into my global jQTouch object (named jqt in my code). This, too, fails on the mobile platform.
Has anyone else ever ran into this? I'll admit to not being a web/javascript programmer by trade, so if I'm making an idiot's error please call me out on it.
Thank you in advance for the help!
-RPJ
Update: I didn't make it clear in the original post, but I'm open to any workaround if it works consistently. Since I'm having trouble storing these objects in general, anything that allows me to keep them around is good enough for now. Thanks!
Have you tried using HTML5 data-ref attributes? The data has to be stringified, but you can just do
$('#locPane').attr('data-selected', "somestring");
and still have valid HTML5 markup.
As far as I can tell there seems to be a bug in Mobile Safari storing objects like this. So what I did was to simply store the components of the object in the documents data store.
$(document).data( "lessonCode" , lesson.lessonCode);
$(document).data( "question" , lesson.question);
$(document).data( "answer" , lesson.answer);

Categories