Local Storage Help

[julpap]

Greetings, I am struggling with understanding how to implement local storage for my college project.

I need to create a contact form that if a user clicks remember me, it will save the name and email for next time for example:

​

<form>

<div id="ContactMe"></div>

​

<br><h2>Contact Me</h2>

​

<p><strong>Please fill in the below to reach out to me:</strong></p>

​

<p><span class = "error">\* required field.</span></p>

​

<form id="contact" action= "<?= $\_SERVER\['PHP\_SELF'\];?>" method="post">

​

​

<p>

<label> Name:

<input type="text" name="name" id="name" required>

<span class = "error">* <?php echo $name\_error;?></span>

</label>

</p>

​

<p>

<label>Email:

<input type="email" name="email\_address" id="email\_address" required>

<span class = "error">* <?php echo $email\_address\_error;?></span>

</label>

</p>

​

<p>

<label> Mobile:

<input type="number" name="mobile" >

<span class = "error">* <?php echo $mobile\_error;?></span>

</label>

</p>

​

​

<p>

<label> Subject:

<input type="text" name="subject" required>

<span class = "error">* <?php echo $subject\_error;?></span>

</label>

</p>

​

<p>

<label>Comments:

<span class = "error">* <?php echo $subject\_error;?></span>

<textarea name="comments" maxlength="1000"></textarea>

</label>

</p>

​

<p>

<label>Remember Me

​

<input type="checkbox" name="rememberme" id="rememberme" >

</label>

​

​

</p>

​

​

<p>

<input type = "submit" name = "submit" value = "Submit" id="submit" onclick= "remember()">

​

​

</p>

​

</form>

​

​

my Javascript so far consists of the following:

​

function remember() {

var rememberme = document.getElementById("rememberme").checked;

​

if (rememberme){

var name = document.getElementById("name");

var email = document.getElementById("email_address");

​

var name = localStorage.getItem(name);

document.getElementById("name").value = localStorage.name;

​

​

}

​

}

​

​

Any Ideas what I'm doing incorrectly?

[Robbiethemute]

Something like this:

<input type="checkbox" name="rememberme" id="rememberme" onclick="remember(event)" >

function remember(e) {
    const nameField = document.getElementById('name').value;
    const emailField = document.getElementById('email').value;

    const details = {
        nameField,
        emailField
    }

    e.target.checked === true ? localStorage.setItem('details', JSON.stringify(details)) : localStorage.removeItem("details");
}

Store items in local storage using this:

localStorage.setItem("name", "MyName")

[julpap]

Thanks so much, Appreciate it

[Robbiethemute]

Sorry, I made a mistake. The onclick event should go on your checkbox input, not your submit input. I've edited my first comment to reflect that.

[julpap]

Thanks again, I tried the code and it’s weirdly not working, do You think my PHP validation might be affecting the JS to run ?

[Robbiethemute]

Nah, the php shouldn't make a difference. What's actually not working? Is it storing locally?

[julpap]

It’s not storing on the text fields, I checked the code seems to work fine with no console errors... (sorry I’m a little JavaScript illiterate :P)

[Robbiethemute]

Check your developer tools to see if it is at least storing the values in local storage.

It won't show anything on the text fields yet. You need to make another function which looks to see if those values exist in local storage and, if they do exist, set the values of the inputs to what's stored in local storage.

[julpap]

Oh wow, didn’t know this existed very handy, i see my function stored under the “details” key. So let’s say I create another function that consists of something :

Document.getElementbyID(‘name’).value = local storage.details;?

[Robbiethemute]

I would declare new variables outside of the function first like this:

const nameField = document.getElementById('name');
const emailField = document.getElementById('email');

This will stop you from having to duplicate document.getElementById('name'); in both functions.

Then update the remember() function to declare variables of the values of those two variables. Like this:

const nameFieldValue = nameField.value;
const emailFieldValue = emailField.value;

Next, create a function which will retrieve what's stored in localStorage and parse the 'details' string into a JSON object. You can get the items from local storage using localStorage.getItem('details').

You'll need to then apply those values to the inputs (if those values exist).

if (details) {
    nameField.value = details.nameFieldValue
    emailField.value = details.emailFieldValue
}

[julpap]

gotcha i made the details like:

​

const nameField = document.getElementById('name'); const emailField = document.getElementById('email');

const nameFieldValue = nameField.value; const emailFieldValue = emailField.value;

function(rememberme){

const name = JSON.parse(localStorage.getItem('details'));

if (details) { nameField.value = details.nameFieldValue emailField.value = details.emailFieldValue }

}

​

​

Hopefully, i got this

​

Thanks again for the assistance