Question

我在刷新选项卡时遇到了一些问题，而不是Ajax中的整个页面。此选项卡涉及删除信用卡。一旦我选择了要删除的信用卡并进行验证，我就会使用“ window.location.reload (); ”来刷新整个页面，但突然它会将我发回“我的个人资料”（见照片）：

刷新前：

刷新后：

虽然我希望它只刷新标签“付款方式”这里是我的代码：

handleCardDelete = () => {
    var numCard = $('input[name=rbCard]:checked').val();
    console.log(this.state.token);
     $.ajax({
        url: 'http://API.....,

        dataType: 'json',

        type: 'DELETE',

        headers: {
            'Authorization' : 'Bearer ' + this.state.token
        },

        complete: function(){
            alert("carte supprimée avec succès");
            window.location.reload();
        },

    });

};

HTML

<Button animated='fade' onClick={this.handleAddCardSubmit}>
    <Button.Content visible>
        Ajouter une carte
    </Button.Content>
    <Button.Content hidden>
        <Icon name='add' />
    </Button.Content>
</Button>

<Button animated='fade' onClick={this.handleCardDelete}>
    <Button.Content visible>
        Supprimer la carte
    </Button.Content>
    <Button.Content hidden>
        <Icon name='delete' />
    </Button.Content>
</Button>

我希望我已经清楚了，我继续我的研究，祝你有个美好的一天！

Answer 1

有两种简单的方法可以解决这个问题。您看到的问题是页面在刷新时不记得哪个选项卡处于打开状态。您可以将其保存在storage中，也可以将其添加到网址查询字符串中，然后在页面加载时检查选项卡是否已保存并从那里开始。我将包含使用存储的文档，因为这是我的首选方式。

但请注意，此方法存在一些缺点。选项卡更改不会在浏览器历史记录中注册，因此单击后退将转到上一页而不是上一个选项卡，以及某些早期版本的浏览器不支持。

你没有＆＃34; openTab＆＃34;您发布的代码中的方法，因此我将使用openTab(tab)作为代码中该函数的占位符。

Local Storage

这里有两个选项，两者使用相同的方式，本地存储或会话存储。我猜猜会话存储对你来说是最好的选择。

localStorage对象存储没有过期日期的数据。当浏览器关闭时，数据不会被删除，并且可以在第二天，一周或一年中使用。

sessionStorage对象等于localStorage对象，只是它只存储一个会话的数据。当用户关闭特定浏览器选项卡时，将删除数据。

// this will be run on page load
$(function() {
    // check if a tab was saved
    if (sessionStorage.tab) {
        // here is where you will open the tab previously saved
        openTab(sessionStorage.tab);
    }
    // if no tab saved, don't do anything, load page like normal
})

// this will be in your openTab() function
openTab(tab) {
    // this will be the new code
    // this is just saving the opened tab to local storage
    //
    // tab is just what ever identifying piece of data you need
    // to know which tab to open
    sessionStorage.tab = tab;

    // this is what you were normally doing
    .....
}

刷新ajax页面的选项卡

1 个答案: