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

Question

我有一个选项卡式导航菜单，并且我为每个选项卡创建了散列 URL。在一个选项卡中，我有多个信息卡和每张卡右上角的复选框。检查此复选框后，卡的背景颜色更改。

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

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 应用更改。

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