HTML5本地存储未存储密码框中的值

Question

I have written a HTML file, and it contains two entry boxes, one is called username and the other called password. Something like this:

<input class='registerinput' id='registerusername' placeholder='Username'></input>
<input class='registerinput' id='registerpassword' placeholder='Password' type='password'></input>
<input class='registerinput' id='registerpasswordrepeat' placeholder='Repeat Password' type='password'></input>

And I want to store it into a local storage using these codes.

if (document.getElementById('registerusername').value != "") {
    localStorage.username=document.getElementById('registerusername').value }
else if (document.getElementById('registerusername').value == "") {
    alert('You must enter a username.') } 
if (document.getElementById('registerpassword').value != "" && document.getElementById('registerpasswordrepeat').value == document.getElementById('registerpassword').value) {
    localStorage.password==document.getElementById('registerpassword'.value) }
else if (document.getElementById('registerpassword').value == "") {
    alert('You must enter a password') }
if (document.getElementById('registerpasswordrepeat').value != document.getElementById('registerpassword').value) {
    alert('The password did not match.') } 

Everything worked except I cannot save the value in password box. Is it a HTML5 storage limitation for security or a bug in my code? Thanks.

Answer 1

Before answering, please note that there may be browsers in the wild that don't support this, and you can detect this as follows:

if(window.localStorage) {
    // do your local storage stuff here
} else {
    // do something else instead as localStorage is not available
}

Aside from this information, here's your typo:

localStorage.password==document.getElementById('registerpassword'.value) }

You're missing the parentheses after the closing ' .

Answer 2

As jmort253 points out it can be wise to check for browser support even though virtually all browsers supports localStorage (but the one that really need to use your app is the one that doesn't...).

And also change this line (double = and end-parenthesis in the wrong place):

localStorage.password==document.getElementById('registerpassword'.value)

to:

localStorage.password = document.getElementById('registerpassword').value;

However, the more "correct" syntax for localStorage is to use:

localStorage.setItem(key, value);

which you retrieve with:

var value = localStorage.getItem(key);

which gives you the value as String or null if it does not exist (the direct property way will as always give undefined if key does not exist).

Another tip to make it easier to avoid typos such as this is to centralize your variables, for example:

var password1 = document.getElementById('registerpassword').value,
    password2 = document.getElementById('registerpasswordrepeat').value;

if (password1.length > 0 && password1 === password2) { ... }

This way you can discover more easily if an error occurs (and as a bonus it's a bit faster as well).