Question

我有一个标签式导航菜单，我为每个标签创建了散列网址。在一个标签中，我有多张信息卡和每张卡右上角的复选框。选中此复选框后，卡片的背景颜色会发生变化。

我的目标是当页面刷新或作为链接发送时，已检查的卡片将与更改的背景颜色一起保持检查状态。任何帮助都会非常感激。

Answer 1

您可以使用以下功能：

function dataToQueryString(data){
    var encoded = [];

    for(var key in data){
        // skip prototype properties
        if(!data.hasOwnProperty(key)) continue;

        // encode string properly to use in url
        encoded.push(key + '=' + encodeURIComponent(data[key]));
    }

    return '?' + encoded.join('&');
}

并使用它：

data = {
    id: 1,
    name: "John Doe"
}

url = url + dataToQueryString( data );

或者更具体针对您的情况：

function storeCardsInQueryString(cards){
    var encoded = [];

    for(var i = 0; i < cards.length; i++){
        encoded.push('cards[]=' + cards[i]);
    }

    return '?' + encoded.join('&');
}

并使用它：

cards = [ 1, 7, 21, 22, 53 ];

url = url + storeCardsInQueryString( cards );

Answer 2

我认为您需要使用url参数和localStorage的组合来实现刷新和链接要求。

让我们说用户使用此网址打开您的网站：

www.mysite.com/mypgae?tab=tab1&card1=checked&card2=unchecked&card3=checked

您在页面javascript中读取这些参数，并转到tab1并将card2和card3标记为已选中，将card2标记为未选中

现在让我们假设用户更改了标签和一些卡片，您应该将这些更改存储在localStorage中，并在下次用户刷新页面时，首先检查localStorage，如果它是空的，则转到url。但是，如果localStorage不为空，则优先使用localStorage并根据localStorage而不是url应用更改。

这是我想到的同时支持网址和本地更改的唯一方法。

如何使用javascript将数据存储为url参数？

2 个答案: