jQuery localstorage保存项目，即使刷新后 [英] jquery localstorage save item even after refresh

问题描述

我在这里有此代码:

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

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

和jQuery:

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

如果看到输入内容，则可以输入文本，单击"join"，它将把它添加到#tournament div中.该怎么做，你能帮我吗?

If you see the input, you can enter text, click join and it will add it to the #tournament div, now I'm trying to save it with localstorage even if the page is refreshed and I really don't know how to do this, can you help me please?

推荐答案

使用本地存储非常简单，因此逻辑可以是:

Using localstorage is quite simple, and so the logic could be:

$(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());
    });
});

-jsFiddle-

这篇关于jQuery localstorage保存项目，即使刷新后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！