使用JavaScript localStorage输入表单数据
[英]Using JavaScript localStorage for input form data
问题描述
I have two HTML pages with simple forms. 
我有两个简单表单的HTML页面。 I want to save text input from index.html using localStorage when a user clicks "Submit" and make this value appear in a text field of html1.html. 我想在用户点击“提交”时使用localStorage保存index.html的文本输入，并使该值显示在html1.html的文本字段中。 I think there might be a problem with my implementation of retrieveName() function. 我认为我的retrieveName（）函数的实现可能存在问题。 What may be improved to make it work correctly? 可以改进哪些使其正常工作？
index.html 的index.html
<form name="form1" method="post" action="html1.html"> <label>Name: <input type="text" id="fname" name="lastName" /> </label> <input type="submit" name="submitName" value="Submit" onclick = "submitName()"> <script> function submitName() { var userName = document.getElementById("fname"); localStorage.setItem("lastName", userName.value); } </script> </form>
html1.html html1.html
<body onload="retrieveName()"> <form name="form2"> <br> <label>Last Name: <input type="text" id="lName" /> </label> <input type="submit" name="submitLastName" value="Save" /> <script> var x = document.getElementById("lName"); function retrieveName() { var text = localStorage.getItem("textValue"); x.value = text; } </script> </form> </body>
2 个解决方案
解决方案1
0 2016-10-12 01:37:08
localStorage.getItem("lastName");
This should work. 这应该工作。 The key with which you store, is the same key with which you retrieve the value. 您存储的密钥与检索值的密钥相同。
https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
解决方案2
0 已采纳 2016-10-12 02:27:43
The details are commented in the Snippet and PLUNKER . 详细信息在Snippet和PLUNKER中进行了注释 。 The Snippet will not function properly because the sandbox on SO is strict, so review the Plunker instead. 由于SO上的沙箱是严格的，所以Snippet将无法正常运行，因此请查看Plunker。 Btw, the main problem is that you didn't getItem() with the same key as you used with setItem() 顺便说一下，主要的问题是你没有使用与setItem()相同的密钥的getItem() setItem()
Example: 例：
On the first page: setItem('CAT', animal.value)
On the second page: getItem('DOG');
That's what you basically did. 这就是你基本上做的。 'CAT' = "lastName" and 'DOG' = "textValue" in your case specifically. 在你的情况下， 'CAT' = "lastName"和'DOG' = "textValue" 。
NOTE: you shouldn't change the mistake in your question, it confuses the reader. 注意：你不应该改变你的问题中的错误，它会使读者感到困惑。
INDEX 指数
<!doctype html> <html> <head> <meta charset='utf-8'> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no"> </head> <body onload='retrieveName()'> <form name="form2"> <fieldset> <legend>HTML1</legend> <label>Last Name: <input type="text" id="lastName" /> </label> <input type="submit" id="submitLastName" value="Save" /> </fieldset> <p>(2) Click <kbd>Save</kbd> </p> </form> <script> // Reference the input lastName var x = document.getElementById("lastName"); /* | Retrieve the stored data with the | CORRECT KEY IE dataName | Assign the value of dataName as the | value of x */ function retrieveName(e) { var text = localStorage.getItem("dataName"); x.value = text; } </script> </body> </html>
HTML1 HTML1
<!doctype html> <html> <head> <meta charset='utf-8'> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no"> </head> <body onload='retrieveName()'> <form name="form2"> <fieldset> <legend>HTML1</legend> <label>Last Name: <input type="text" id="lastName" /> </label> <input type="submit" id="submitLastName" value="Save" /> </fieldset> <p>(2) Click <kbd>Save</kbd> </p> </form> <script> // Reference the input lastName var x = document.getElementById("lastName"); /* | Retrieve the stored data with the | CORRECT KEY IE dataName | Assign the value of dataName as the | value of x */ function retrieveName(e) { var text = localStorage.getItem("dataName"); x.value = text; } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.