using localStorage in html5

Question

<form>
<input name="Team1" id="team1" type="text" value="Team1?">
<button id="dostuff" value="Go">Go</button>
</form>

<div id ="nicteamcolumn">Team: </div>

<script>
$('#dostuff').click(function(e) {

var team1 = $('input[name="Team1"]').val();

if (typeof(Storage) !== "undefined") {
            if (localStorage.teamlist) {
                localStorage.teamlist= localStorage.teamlist + team1;

            }
            else {
            localStorage.teamlist = " ";    
            }

            $('#nicteamcolumn').html("Team:" + "<br>" + localStorage.teamlist + "<br>")
      }
}
</script>

Basically, when the button is clicked, I am taking the input from Team1, add it to localStorage.teamlist, and changing the html of #nicteamcolumn to localStorage.teamlist

I am getting a weird output the first time I click the button. It prints the value for team 1 a ton of times over and over. The 2nd click and on seem to be working fine as well as when I close the page and coming back and keep adding to the list.

Any help would be greatly appreciated?

Your button as it is submits the form when you click it, because buttons by default are submit buttons. Since your form has no action parameter, submitting it causes a reload of the page. Change your button to have an attribute type="button", then see what happens when you click it. — Arnavion, Feb 25 '12 at 10:56

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

It prints the value for team 1 a ton of times over and over. The 2nd click and on seem to be working

That's because the localStorage object is persistent. Even when the source code of your script changes, the localStorage values will still exist. You might be confusing localStorage with sessionStorage.

Fixing your code:

Fix the syntax error by placing a ); after the last }.
typeof is not a function, please do not make it look like one, by removing the parentheses.
The very first time, nothing will print, because you're adding a space instead of the value of Team1.
Instead of setting the property directly, it is recommended to use the .getItem and .setItem methods, to avoid mistakes as using conflicting key names.
Your current "list" is a set of a concatenated string. That's not easily maintainable. Either use an unique separator to separate your values, or use JSON.stringify and JSON.parse to store real arrays.

Demo: http://jsfiddle.net/BXSGj/

Code (using JSON):

$('#dostuff').click(function(e) {
    e.preventDefault(); // Prevent the form from submitting
    var team1 = $('input[name="Team1"]').val();
    if (typeof Storage !== "undefined") {
        // Will always show an array:
        var teamlist = JSON.parse(localStorage.getItem('teamlist') || '[]');
        teamlist.push(team1);
        localStorage.setItem('teamlist', JSON.stringify(teamlist));
        $('#nicteamcolumn').html("Team:<br>" + teamlist.join('<br>') + "<br>");
    }
});

Using a separator (only showing different lines):

        var SEP = '|'; // Separator example
        var teamlist = (localStorage.getItem('teamlist') || '').split(SEP);
        teamlist.push(team1);   // Still the same
        localStorage.setItem('teamlist', teamlist.join(SEP));

To remove the stored items, use the localStorage.removeItem method:

localStorage.removeItem('teamlist');

See also: Compability table for the Storage object.

using localStorage in html5

1 Answers1

Fixing your code:

Demo: http://jsfiddle.net/BXSGj/

Linked