Javascript HTML5存储不工作
我正在将数据从当前页面转发到下一页,即,每当再次加载页面时,代码会检查是否存在此类存储,如果存在,则会在文本框中加载值。我无法让它工作,下面是代码-Javascript HTML5存储不工作,javascript,html,local-storage,Javascript,Html,Local Storage,我正在将数据从当前页面转发到下一页,即,每当再次加载页面时,代码会检查是否存在此类存储,如果存在,则会在文本框中加载值。我无法让它工作,下面是代码- <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <script type="te
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function values()
{
if(localStorage.getItem(pranav))
{
document.getElementById(FName).innerText= sessionStorage.getItem(pranav);
document.getElementById(OName).innerText= sessionStorage.getItem(k);
}
else
{
sessionStorage.setItem("pranav", "P");
sessionStorage.setItem("k", "P");
return;
}
}
</script>
</head>
<body>
<form name="myform" action="Idea.html" onload="values(this.form)">
<label>Please Enter Your Full Name = </label><input type="text" name="FName" id="FName" />
<label>Please Enter Your Current Organization</label><input type="text" name="OName" id="OName" />
<input type="submit" value="Submit" onclick="values(this.form)" />
</form>
</body>
</html>
函数值()
{
if(localStorage.getItem(pranav))
{
document.getElementById(FName).innerText=sessionStorage.getItem(pranav);
document.getElementById(OName.innerText=sessionStorage.getItem(k);
}
其他的
{
sessionStorage.setItem(“pranav”、“P”);
sessionStorage.setItem(“k”、“P”);
返回;
}
}
请输入您的全名=
请输入您当前的组织
请帮助我解释为什么这不起作用?您尚未声明所使用的
pranav
和k
变量。此外,在为输入字段赋值时,应使用.value
属性,而不是.innerText
也可以考虑在2个函数中拆分代码:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function loadValues() {
var data = localStorage.getItem('data');
if(data) {
data = JSON.parse(data);
document.getElementById('FName').value = data.firstName;
document.getElementById('OName').value = data.lastName;
}
}
function saveValues() {
var data = {
firstName: document.getElementById('FName').value,
lastName: document.getElementById('OName').value
};
localStorage.setItem('data', JSON.stringify(data));
}
</script>
</head>
<body onload="loadValues()">
<form name="myform" action="Idea.html" onsubmit="saveValues()">
<label>Please Enter Your Full Name = </label>
<input type="text" name="FName" id="FName" />
<label>Please Enter Your Current Organization</label>
<input type="text" name="OName" id="OName" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
函数loadValues(){
var data=localStorage.getItem('data');
如果(数据){
data=JSON.parse(数据);
document.getElementById('FName')。value=data.firstName;
document.getElementById('OName')。value=data.lastName;
}
}
函数saveValues(){
风险值数据={
名字:document.getElementById('FName')。值,
lastName:document.getElementById('OName').value
};
setItem('data',JSON.stringify(data));
}
请输入您的全名=
请输入您当前的组织
在第一次调用时,键“pranav”应该用引号括起来。getItem()
刚刚尝试了这一点,但JavaScript并没有在页面重新加载或单击提交按钮时自动更改文本框值。您可能想将其分为两个函数:一个是在调用socument时调用的函数(body onload)以及在提交表单时调用的。我已经用一个例子更新了我的答案。我用XAMPP和我所有的浏览器(包括Chrome、Waterbox和IE)尝试了这段代码,但当页面刷新时,什么都没有发生。文本字段的值不会在加载时自动填充?您需要首先提交表单,以便将值存储在localstorage中。我还犯了一个小错误,将onsubmit
属性放在按钮上,而它本应该放在表单上。我现在更新了我的答案。确保您使用的代码如图所示。情况要好得多,JS在表单提交时正在文本字段中加载未定义的内容。谢谢(顺便说一句:)