jquery 即使在刷新后本地存储保存项目

Question

我这里有这段代码：

<input type="text" id="player"/>
<button>join</button>

<div id="tournament"></div>

和jQuery：

$(document).ready(function(){
    $('button').click(function(){
    $('#tournament').append( $('#player').val() + '<br/>' )
  });
});

如果你看到输入，你可以输入文本，点击加入，它将把它添加到#tournament div，现在我正在尝试用本地存储保存它，即使页面被刷新，我真的不知道该怎么做，你能帮帮我吗？

Answer 1

使用 localstorage 非常简单，所以逻辑可以是：

$(document).ready(function () {
    var $tournament = $('#tournament'); // keep reference on element
    // if already data set in localstorage for this element, 
    // set HTML element
    if(localStorage.getItem("#tournament")) { 
        $tournament.html(localStorage.getItem("#tournament"));
    }
    $('button').click(function () {        
        $tournament.append($('#player').val() + '<br/>');
        // once element HTML updated, keep it in localstorage
        localStorage.setItem("#tournament", $tournament.html());
    });
});

jquery 即使在刷新后本地存储保存项目

jquery localstorage save item even after refresh

jquery

local-storage

-jsFiddle-