对输入表单数据使用JavaScript本地存储

我有两个简单表单的HTML页面。我想在用户单击“提交”时使用localStorage保存index.html中的文本输入，并使该值显示在html1.html的文本字段中。我想我的retrieveName（）函数的实现可能有问题。为了使其正常工作，可以改进什么

index.html

姓名：
函数submitName（）{
var userName=document.getElementById（“fname”）；
setItem（“lastName”，userName.value）；
}

这应该行得通。用于存储的键与用于检索值的键相同

这应该行得通。用于存储的键与用于检索值的键相同

---

详细信息在片段和中进行了注释。 代码段无法正常工作，因为SO上的沙盒非常严格，因此请查看Plunker。顺便说一句，主要问题是您没有使用与

setItem（）相同的键
getItem（）

例子：
你基本上就是这么做的<代码>'CAT'

=

“lastName”

和

'DOG'

=

=“textValue”

在您的案例中

注意：你不应该改变问题中的错误，这会使读者感到困惑。 指数

HTML1
姓氏：
（2） 单击保存

//引用输入的lastName
var x=document.getElementById（“lastName”）；
/*
|使用
|正确的键，即数据名
|将dataName的值指定为
|x的值
*/
函数retrieveName（e）{
var text=localStorage.getItem（“dataName”）；
x、 值=文本；
}

详细信息在代码段和中注释。 代码段无法正常工作，因为SO上的沙盒非常严格，因此请查看Plunker。顺便说一句，主要问题是您没有使用与

setItem（）相同的键
getItem（）

例子：
你基本上就是这么做的<代码>'CAT'

=

“lastName”

和

'DOG'

=

=“textValue”

在您的案例中

注意：你不应该改变问题中的错误，这会使读者感到困惑。 指数

HTML1
姓氏：
（2） 单击保存

//引用输入的lastName
var x=document.getElementById（“lastName”）；
/*
|使用
|正确的键，即数据名
|将dataName的值指定为
|x的值
*/
函数retrieveName（e）{
var text=localStorage.getItem（“dataName”）；
x、 值=文本；
}

没有调用

submitName（）

函数（无论如何，在显示的代码中）。@nnnnnn谢谢，我错过了它。只需编辑代码并添加submitName（）方法。但它仍然不起作用..不能将

submitName（）

用作函数名。我已经反复尝试过了，除非我将函数名设置为其他名称，否则它将不起作用。只需更改函数的名称，就可以了。示例：

SaveName（）

@NewToJS哇！！！谢谢由于某种原因，在我将submitName（）函数的名称更改为mySubmit（）后，它就可以工作了。不使用event.preventdefault（）。出现这种奇怪行为的原因可能是什么？我想您会发现问题在于全局函数的名称与表单元素的

name

或

id

属性相同，因为。因此，您在控制台中看到的错误是“submitName不是函数”。（因此重命名输入或函数应该可以解决问题。）没有调用

submitName（）

函数（无论如何，在显示的代码中）。@nnnnnn谢谢，我错过了它。只需编辑代码并添加submitName（）方法。但它仍然不起作用..不能将

submitName（）

用作函数名。我已经反复尝试过了，除非我将函数名设置为其他名称，否则它将不起作用。只需更改函数的名称，就可以了。示例：

SaveName（）

@NewToJS哇！！！谢谢由于某种原因，在我将submitName（）函数的名称更改为mySubmit（）后，它就可以工作了。不使用event.preventdefault（）。出现这种奇怪行为的原因可能是什么？我想您会发现问题在于全局函数的名称与表单元素的

name

或

id

属性相同，因为。因此，您在控制台中看到的错误是“submitName不是函数”。（因此，重命名输入或函数应该可以解决问题。）

localStorage.getItem("lastName");

     On the first page: setItem('CAT', animal.value)

     On the second page: getItem('DOG');