localstorage on Internet Explorer not working

StackOverflow https://stackoverflow.com/questions/23391353

Question

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.

Était-ce utile?

La solution

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

Autres conseils

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

I tried with IE 11 , that working for me!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top