[英]Retrieving AND Displaying saved data from local storage inanother web page
I am doing a school project on creating a web site. 我正在做一个有关创建网站的学校项目。 I have managed to save user data into local storage upon signing up for an account.
注册帐户后,我设法将用户数据保存到本地存储中。 I want to retrieve and display the saved user data from local storage into an edit profile page, such that when I load the edit profile page, there would be some data already shown in the page.
我想从本地存储中检索保存的用户数据并将其显示在编辑配置文件页面中,这样,当我加载编辑配置文件页面时,页面中已经显示了一些数据。 For example in social media accounts whenever we want to edit our profile, our current information would be shown, and we just edit our info from that page.
例如,在社交媒体帐户中,只要我们要编辑个人资料,就会显示我们的当前信息,而我们只是在该页面上编辑我们的信息。 How do I achieve this?
我该如何实现?
Here are my codes: 这是我的代码:
<script>
var currentUser=null;
document.addEventListener("DOMContentLoaded",loadUserData);
function loadUserData() {
currentUser = localStorage.getItem("currentUser");
if(currentUser!=null) {
currentUser = JSON.parse(currentUser);
console.log(currentUser.username);
console.log(currentUser.name);
console.log(currentUser.password);
console.log(currentUser.email);
}
}
</script>
I know the console.log only shows the data in console, but I need the data to be shown in the text box instead when users go to the edit profile page. 我知道console.log仅显示控制台中的数据,但是当用户转到编辑配置文件页面时,我需要将数据显示在文本框中。 Is the following script correct to display a username in the username text box?It didn't work for me though.
以下脚本在用户名文本框中显示用户名是否正确?对我来说不起作用。
<p>
<label for="newusername">Change Username:</label>
<input type="text" name="username" onload="valueAsPlaceHolder();"
id="username" required="required"/>
<!--<script>
function valueAsPlaceHolder() {
var changeUsernameInput = document.getElementById("username");
localStorage["username"] = changeUsernameInput.value;
var changeUsernameSetting = localStorage["username"];
if (changeUsernameSetting == null) {
changeUsernameInput.value = "";
}
else {
changeUsernameInput.value = changeUsernameSetting;
}
}
</script-->
</p>
You should have to modify the loadUserData function like below. 您应该像下面那样修改loadUserData函数。 I have set example for username you can follow for all fields like name, email and password.
我已经为用户名设置了示例,您可以在所有字段(例如名称,电子邮件和密码)中遵循该名称。
function loadUserData() {
currentUser = localStorage.getItem("currentUser");
if(currentUser!=null) {
currentUser = JSON.parse(currentUser);
document.getElementById('username').value = currentUser.username;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.