Internet Explorer上的本地存储无法正常工作 [英] localstorage on Internet Explorer not working
问题描述
localstorage似乎适用于：
- Google Chrome
- Mozilla Firefox
- Opera
- Opera mini
- 可能是Safari
但在Internet Explorer上（我正在使用Internet Explorer 11）。我的是Windows 7.
我需要一些相同的东西来完成相同的工作。这是一个项目，我正在做我的C：驱动器（安全性不重要），所以我的协议是文件：\。我已经做了一些研究，有些人通过添加以下内容来修复它：
<！DOCTYPE html>
但它不适用于我。
这里是我的代码：
<！DOCTYPE html>
< html>
< head>
< title>登入< / title>
< meta charset =UTF-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< style type =text / css>
* {
font-family：Cambria;
颜色：蓝色;
}
< / style>
< / head>
< body>
< script>
function transfer（）{
confirm（您想保存您的密码吗？）;
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;
分= 0;
if（email_content.length <1）{
document.getElementById（empty_1）。innerHTML =（*请输入您的电子邮件地址）;
} else {
document.getElementById（empty_1）。innerHTML =（< br>）;
分数+ = 1;
};
if（pass_content.length< 1）{
document.getElementById（empty_2）。innerHTML =（*请输入您的密码）;
} else {
document.getElementById（empty_2）。innerHTML =（< br>）;
分数+ = 1;
};
if（points === 2）{
transfer（）;
}
};
< / script>
< div id =top_barstyle =height：100px; background-color：lightslategray;>
< marquee scrollamount =20behavior =scroll>< p style =font-size：30px; color：white;>
欢迎您，请登录您的帐户继续操作< / 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>登入下方< / h1>
< p id =empty_1style =color：red;>< br>< / p>
< p>电子邮件地址：< input id =email_inputtype =textstyle =width：150px;/>< / p>
< p id =empty_2style =color：red;>< br>< / p>
< p>密码：< input id =password_inputtype =passwordstyle =width：180px;/>< / p>
< br>
< button onclick =button_clicked（）>提交< / button>
< / div>
< / div>
< / div>
< div style =margin-left：500px; width：300px; height：500px; background-color：lightblue;>< / div>
< / div>
< / body>
< / html>
另存为page1.html
，第二页为：
<！DOCTYPE html>
< html>
< head>
< title id ='title'> title goes here< / title>
< meta charset =UTF-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< style type ='text / css'>
h1 {
color：blue;
}
< / style>
< / head>
< body>
< h1 id ='my_title'>标题< / h1>
< h2 id ='my_pass'>标题< / 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>
另存为page2.html
全部
添加doctype声明意味着您的标记由浏览器按其应该的方式解析（即以HTML5 ）。
Internet Explorer在本地存储方面存在一些问题。首先，它在8之前的版本中根本不起作用 - 您不会指定您在帖子中运行的版本。
重要：您提到您正在C：驱动器上运行：这是否意味着您正在使用 file：// 协议而不是http？如果是这样，问题解决了。使用文件协议会导致各种问题，尤其是 localStorage 在IE中不起作用。
如果您仍然遇到问题，您可能会发现您需要修改浏览器的安全设置以允许本地存储。
此页面包含一个矩阵，详细介绍各种浏览器中的localStorage支持：
http://www.html5rocks.com/en/features/storage
请务必检查Mark Pilgrim的优秀HTML5资源，其中包含一些用于检测存储事件的IE特定代码： ：//diveintohtml5.info/storage.htmlrel =noreferrer> http://diveintohtml5.info/storage.html
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.
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
这篇关于Internet Explorer上的本地存储无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
