1

I have this string which i'm trying to store and get to localStorage, and retrieve from it so it could show. Here's my code:

var datas = new Array;
if (navigator.appName !== 'Microsoft Internet Explorer'){
    var qsVal = document.getElementsByClassName("val");
}
else{
    var qsVal = document.querySelectorAll('.val');
}
if (navigator.appName !== 'Microsoft Internet Explorer'){
    var qsKey = document.getElementsByClassName("key");
}
else{
    var qsKey = document.querySelectorAll('.key');
}
var storedPlays;
var stuff = document.getElementById("stuff");

function pushArray(){
    for (var i=0, len = qsVal.length; i < len; i++){
    thisValue = qsVal[i].value;
    thisKey = qsKey[i].value;
    datas.push([thisValue,thisKey]);
    }
localStorage.setItem('datas', JSON.stringify(datas));
}

function showStuff(){
    storedPlays = JSON.parse(localStorage.getItem('datas'));
    document.getElementById("stuff").innerHTML = storedPlays;
}

It works great with FF and Chrome, but IE8 returns "'localStorage' is null or not an object" when I call 'showStuff'.

What's interesting is that it doesn't give me an error when I call 'pushArray', which uses 'localStorage' as well.

Iv'e also tried using "window.localStorage" instead of just "localStorage", it returned the same error...

IE8 is supposed to support localStorage, according to Microsoft and W3, so does anyone has any clue as to where the problem is? Thanks a million!

EDIT - This is a jsfiddle for the code. for some reason, it doesn't work that good but just to give you a feel of the code...

Tomcatom
  • 365
  • 3
  • 6
  • 16
  • 3
    CanIUse.com also thinks IE8 should support it. http://caniuse.com/#search=local – Spudley Oct 07 '12 at 19:23
  • I have added this jsfiddle: http://jsfiddle.net/yrhdN/2/ (just changing little thigns to make your code work) and everything seems to work fine. I have tested in IE9 under IE8 compatibility mode) – kabaros Oct 07 '12 at 20:32
  • Could it be something like document.querySelectorAll firing before the DOM is loaded in your application? – kabaros Oct 07 '12 at 20:42

5 Answers5

6

As per my understanding IE8 give storage to only valid domains. Try placing your example in some Web-server it should resolve the issue.

I faced the same issue when I tested it as an individual file but when i placed it in a server(Tomcat in my case) it just worked fine.

darwinbaisa
  • 688
  • 2
  • 8
  • 13
  • yep, that did it. I ran it through a "xampp" local server and it worked. Thank you! – Tomcatom Oct 08 '12 at 19:34
  • Had the same problem testing with "file://" on IE. Will test with Chrome instead, then check IE after deployment. – yoyo Jan 09 '15 at 03:34
3

Check if you are actually in IE 8 mode - as opposed to quirks or IE 7 mode. Fastest way to do this is hit F12 to bring up the dev tools, and the browser mode is listed on the upper right of that tab.

Patrick
  • 13,872
  • 5
  • 35
  • 53
  • 1
    I was hoping that's the problem, but I'm in IE8 mode indeed. – Tomcatom Oct 07 '12 at 19:25
  • can you create a jsfiddle or something then so others can help more easily? – Patrick Oct 07 '12 at 19:28
  • Iv'e added the link to the post for everyone to see – Tomcatom Oct 07 '12 at 19:35
  • 1
    It wasn't working because your code was being loaded in onload, but also had var declarations. that scoped everything inside of the onload listener. I modified your code slightly to add click listeners iniside of the load listener - http://jsfiddle.net/yrhdN/5/. the issue, however, is that this works fine in IE 8 for me. – Patrick Oct 07 '12 at 20:39
  • Your code does seem to work great on jsfiddle, but when I try to implement your changes I get an "Uncaught TypeError: Object [object Object] has no method 'addEvent'" error in chrome, and an "object doesn't support this property or method" error in IE, both for line 31. – Tomcatom Oct 07 '12 at 22:08
  • I just used mootools because your fiddle was using it already (jsfiddle defaults to it). You'd want to attach it using whatever library you are using (jquery would be http://api.jquery.com/on, for example). That being said, my changes shouldn't make your code work if you were getting localStorage is null/not an object. If you can make a case that doesn't work only in IE8, or share the site in question, thatd be great. – Patrick Oct 08 '12 at 02:26
1

I would give using window.localStorage as shot. See Introduction to Web Storage for IE

krg
  • 2,650
  • 2
  • 12
  • 9
  • 3
    See this [post](http://stackoverflow.com/questions/3452816/does-ie8-out-of-the-box-have-support-for-localstorage). – krg Oct 07 '12 at 19:27
  • 1
    @Ibu it means using "window.localStorage.getItem" instead of just localStorage.getItem – Tomcatom Oct 07 '12 at 19:27
0

Can you open the developer tools in IE and check that typeof json. stringify and json.parse are functions and also localstorage. I am not sure whether native JSON exist on IE.

Also why are you setting the object inside the loop, shouldnt it be outside it?

[Edit] Added this fiddle for your code jsfiddle.net/yrhdN/2 and everything seems to work fine. I have tested in IE9 under IE8 compatibility mode)

[Edit] One more thing about this code, it seems innerHtml in showStuff() doesn't work with a paragraph. Changing the html from p to div and using innerText makes things a little better:

<div id="stuff">
</div>


function showStuff(){
    var storedPlays    = JSON.parse(localStorage.getItem('datas'));
    document.getElementById("stuff").innerText = storedPlays;
}

This seems to happen only in IE. Here is an updated fiddle: http://jsfiddle.net/yrhdN/7/

kabaros
  • 5,083
  • 2
  • 22
  • 35
  • Iv'e already checked the "typeof" for "storage" - it returned "object".Now I checked JSON.stringify and JSON.parse and they both returned "function". As for the object - you're right, I took it out of the loop, thanks :) – Tomcatom Oct 07 '12 at 20:00
  • Actually, your version of the fiddle doesn't work for me. When I tried it on jsfiddle the buttons don't do anything and when I tried to implement your changes to my code it gave me an "object expected" error on line 16 in IE, and an "Uncaught ReferenceError: $ is not defined" error for the same line in chrome. I've included jquery. BTW, is there any way of doing it without jquery? my assignment says strictly no libraries or frameworks... Thanks alot! – Tomcatom Oct 07 '12 at 20:50
  • is jQuery loaded in the fiddle options? – kabaros Oct 07 '12 at 21:03
  • could you check my last edit? Does that help with your problem – kabaros Oct 07 '12 at 21:20
  • I took your code, only Iv'e added the eventListeners onload with JS other than jquery as so: `function putPiece(){ var push = document.getElementById("push"); var pull = document.getElementById("pull"); if (window.addEventListener){ push.addEventListener('click', pushArray, false); pull.addEventListener('click', showStuff, false); } else if (window.attachEvent){ push.attachEvent('onclick', pushArray); pull.attachEvent('onclick', showStuff); }` still, works on Chrome, "'localStorage' is null or not an object" on IE. – Tomcatom Oct 07 '12 at 22:26
0

Try this also if you do not wish any local server application to shoot the webpage.

  • Look for the code in your script : window['localStorage'] !== null
  • change it to : window['localStorage'] != null

It worked in my case.

Baby Groot
  • 4,637
  • 39
  • 52
  • 71
James.B
  • 1