localstorage on Internet Explorer not working

javascript html internet-explorer local-storage

42,745

Solution 1

Adding the doctype declaration means your mark-up is resolved by the browser the way it should (i.e. as HTML5).

Internet Explorer has a couple of issues with local storage. First of all, it doesn't work at all in versions prior to 8 -- you don't specify the version you're running in your post.

Important: you mention you are running on your C: drive: does this mean you are using the file:// protocol rather than http? if so, problem solved. Using the file protocol will cause various issues, not least that localStorage simply won't work in IE.

If you're still having issues, you may find you need to tinker with the browser's security settings to allow local storage.

This page includes a matrix detailing localStorage support in the various browsers:

http://www.html5rocks.com/en/features/storage

Be sure to check out Mark Pilgrim's excellent HTML5 resource, which includes some IE-specific code for detecting the storage event:

http://diveintohtml5.info/storage.html

Solution 2

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

I tried with IE 11 , that working for me!

42,745

Author by

Admin

Updated on August 09, 2022

Comments

Admin almost 2 years

localstorage seems to work on: - Google Chrome - Mozilla Firefox - Opera - Opera mini - probably Safari

but not on internet explorer (I'm using internet explorer 11). My is is windows 7. I need something equivalent that will do the same job. This is for a project and I'm doing everything on my C: drive (security is not important) so my protocol is file:\. I've done some research and some people got it fixed by adding:

    <!DOCTYPE html>

but it didn't work for me.

here is my code:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Login</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style type="text/css">
                * {
                    font-family:Cambria;
                    color:blue;
                }
            </style>
        </head>
        <body>
            <script>
                function transfer() {
                    confirm("Would you like to save your password for this site?");
                    var contents = document.getElementById('email_input').value;
                    var contents_2 = document.getElementById("password_input").value;
                    localStorage.setItem('user', contents);
                    localStorage.setItem('password', contents_2);
                    window.location.href = 'page2.html';
                    };

                var button_clicked = function(){
                    email_content = document.getElementById("email_input").value;
                    pass_content = document.getElementById("password_input").value;
                    points = 0;
                    if (email_content.length < 1){
                        document.getElementById("empty_1").innerHTML = ("*please input your email address");
                    } else {
                        document.getElementById("empty_1").innerHTML = ("<br>");
                        points += 1;
                    };
                    if (pass_content.length < 1){
                        document.getElementById("empty_2").innerHTML = ("*please input your password");
                    } else {
                        document.getElementById("empty_2").innerHTML = ("<br>");
                        points += 1;
                    };
                    if (points === 2){
                        transfer();
                    }
                };

            </script>
            <div id="top_bar" style="height:100px;background-color:lightslategray;">
                <marquee scrollamount="20" behavior="scroll"><p style="font-size:30px;color:white;">
                    Welcome, please login to your account to continue</p>
                </marquee>
            </div>
            <div>
                <div style="margin-left:500px;width:300px;height:200px;background-color:lightblue;"></div>    
                <div style="margin-left:440px;">
                    <div style="background-color:whitesmoke;width:350px;height:270px;margin-left:30px;border-radius:15px;
                         margin-bottom:30px;">
                            <div style="margin-left:40px;">
                                <h1>Login below</h1>
                                <p id="empty_1" style="color:red;"><br></p>
                                <p>Email address: <input id="email_input" type="text" style="width:150px;"/></p>
                                <p id="empty_2" style="color:red;"><br></p>
                                <p>Password: <input id="password_input" type="password" style="width:180px;"/></p>
                                <br>
                                <button onclick="button_clicked()">Submit</button>
                            </div>
                        </div>
                </div>
                <div style="margin-left:500px;width:300px;height:500px;background-color:lightblue;"></div>
            </div>

        </body>
    </html>

saved as page1.html and second page is:

    <!DOCTYPE html>
    <html>
        <head>
            <title id='title'>title goes here</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style type='text/css'>
                h1 {
                    color:blue;
                }
            </style>
        </head>
        <body>
            <h1 id='my_title'>Title</h1>
            <h2 id='my_pass'>Title</h2>
            <script>
                var full_name = localStorage.getItem('user');
                list = [];
                for (i=0;i<full_name.length;i++){
                    if (full_name[i]==="@"){
                        break;
                    }
                    else{
                        list.push(full_name[i]);
                    }
                };
                document.getElementById("my_title").innerHTML = ("Name: " + list.join(""));
                var full_pass = localStorage.getItem('password');
                document.getElementById("my_pass").innerHTML = ("Email address: " + full_name);
            </script>
        </body>
    </html>

saved as page2.html

All answers appreciated.

Leonid Vasilev over 7 years

Is that localStorage is undefined for documents opened with file protocol somehow related to a document.domain being equal to empty string in such case?
Kyle Vassella over 6 years

You mentioned localStorage not working pior to 8. Does sessionStorage also not work in IE versions prior to 9?
Scott Martin over 5 years

As of IE11 it is possible to use localStorage over file: - see the answers to localStorage object is undefined in IE.