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>

基本上，当点击按钮时，我会从Team1获取输入，将其添加到localStorage.teamlist，并将#nicteamcolumn的html更改为localStorage.teamlist

我第一次点击按钮时得到一个奇怪的输出。它一次又一次地打印团队1的值。第二次单击和打开似乎工作正常，当我关闭页面并返回并继续添加到列表中时。

非常感谢任何帮助？

Answer 1

一次又一次地打印团队1 的值。第二次点击然后似乎正在工作

那是因为localStorage对象是持久性。即使脚本的源代码发生更改，localStorage值仍将存在。您可能会将localStorage与sessionStorage混淆。

修复您的代码：

通过在最后);之后放置}来修复语法错误。
typeof不是一个功能，请不要让它看起来像一个，删除括号。
第一次打印无，因为您要添加空格而不是Team1的值。
建议不要直接设置属性，而是使用.getItem和.setItem方法，以避免使用冲突的密钥名称时出错。
您当前的“列表”是一组连接字符串。这不容易维护。使用唯一的分隔符来分隔您的值，或使用JSON.stringify和JSON.parse来存储真实数组。

演示：http://jsfiddle.net/BXSGj/

代码（使用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>");
    }
});

使用分隔符（仅显示不同的行）：

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

要删除存储的项目，请使用localStorage.removeItem方法：

localStorage.removeItem('teamlist');

另请参阅：Storage对象的Compability table。

在html5中使用localStorage

1 个答案:

修复您的代码：

演示：http://jsfiddle.net/BXSGj/