why ie thrown error while using local storage

Question

Hey i can't figure out why my code is not working. I've pulled out my hair please take a look and tell me what's wrong with this code

Note : it's working fine in chrome and mozilla only not working in IE10 and all below versions of IE

please note that am trying by two different ways so please don't confuse in that here is fiddle link http://jsfiddle.net/rEmn6/

here is my html code

<div id="wrapper">
    <div id="editable" contenteditable="true" onkeyup="SaveValue(this)"></div>
    <button onclick="clearData()" id="reset">Reset</button>
    <br>

    <textarea id="message" onKeyUp="setVal(this)"></textarea>
</div>

here is javascript code

var editable = document.getElementById('editable');

var store = window["localStorage"], storage = window.localStorage;


if (navigator.appVersion.indexOf("MSIE 7.") != 1){
    console.log(navigator);
    var msg = document.getElementById('message');
    function setVal(ths) {
        console.log(ths.value);
        storage.setItem('sms', ths.value);
    };
    if(storage.getItem('sms')){
        msg.value = storage.getItem('sms');
    }
}

function SaveValue(ths){
    var val = ths.innerHTML;
    if (val != ''){
        store.setItem('contenteditable', val)
        console.log(val);
    }
}
function clearData(){
    console.log('clear hoga');
    store.clear();
}

if (store.getItem('contenteditable')) {
  editable.innerHTML = store.getItem('contenteditable');
}

Answer 1

If you are trying localStorage on a local machine and without use of a web server like WAMP, XAMPP or similar programs. IE browser will definitely throws an error. So make sure that you are trying it in a web server for development purposes.

When you run your page from local filesystem, the browser will not act like he does for web server.

Answer 2

I suspect this is what you wanted to achieve :

<div id="wrapper">
    <div id="editable" contenteditable="true"></div>
    <button onclick="localStorage.clear()">Reset</button>
    <br>
    <textarea id="message"></textarea>
</div>
<script>
function init()
{
    function setup (name, prop)
    {
        function save (prop)
        {
            localStorage.setItem (this.id, this[prop]);
        }

        var elem = document.getElementById(name);

        // retrieve value
        elem[prop] = localStorage.getItem (name) || '';

        // setup save handler
        //elem.onkeyup = save.bind (elem, prop);
        elem.onkeyup = function (e,p) {          // IE8+ compat.
                           return function () {
                               save.call (e, p); 
                           };
                       }(elem, prop);
    }

    setup ('editable', 'innerHTML');
    setup ('message' , 'value');
}

window.onload = init;
</script>

Your code was flawed in so many ways I reckoned it was easier to rewrite it from scratch:

• complete duplication of code for the saving/restoring of your 2 elements, with the code located in two different places while the problem is basically the same
• confusing names ('ths' is an eyesore. The first time I checked your code I automatically identified it as a typo for 'this')
• wrong way of defining event handlers and passing them parameters (defining event handlers inside HTML code is causing all sorts of problems, since you can't access anything but this and global variables)
• mumble-jumble of global and local variables (due to the definition of the event handlers inside HTML)
• your code did not work in the fiddle since all your global functions were moved into the init procedure

It was much less work (at least for me) to rewrite it than to try to rebuild a functional version and then try to understand what went wrong with it.

I dumped the attempt at detecting whatever IE7 version. It was getting in the way, since your problem was targeting IE10 anyway. As a side note, a site using this kind of features should simply drop IE7- compatibility altogether, IMHO.

I tested this code on IE8/XP, FF, Opera, Chrome, IE11 and safari/XP.

All tests were run from a web server except IE11. It is well possible IE10- have problems with local storage when run localy.

Answer 3

In Internet Explorer 11 I get the error message SaveValue is undefined appearing here:

<div id="editable" contenteditable="true" onkeyup="SaveValue(this)"></div>

You should be using unobtrusive Javascript techniques and place the onKeyUp event handling in your script instead of in the div.

var editable = document.getElementById('editable');
editable.onkeyup = SaveValue;

In your SaveValue function you can now use this.innerHTML to get the text

This should save you some tears