刷新页面时保存用户的选择

Saving user's selection when refreshing the page

我目前有一个页面显示不同团队的数据。

我有一些数据,用户可以单击这些数据使其成为 "on" 或 "off" 状态,每个状态显示不同的图标。它基本上就像一个清单,只是没有物理复选框。

我想记住哪个 "checkboxes" 被打勾了,即使在用户刷新页面或关闭浏览器后 returns 之后。

我听说 localStorage 是一个不错的选择,但我不确定在像我这样的情况下如何使用它。

目前我有这个代码:

team1 = {
    "information1": {
        "name": "tom",
        "age": "34"
    },
    "information2": {
        "name": "bob",
        "age": "20"
    },
};

team2 = {
    "information1": {
        "name": "betsy",
        "age": "27"
    },
    "information2": {
        "name": "brian",
        "age": "10"
    },
};

$(document).ready(function() {

    $("#displayObject1").on("click", function() {
        switchData(team1);
    });

    $("#displayObject2").on("click", function() {
        switchData(team2);
    });
    $("#table").on("click", ".on", function() {
        $(this).removeClass("on");
        $(this).addClass("off");
    });
    $("#table").on("click", ".off", function() {
        $(this).addClass("on");
        $(this).removeClass("off");
    });
}); 


function switchData(object) {
    $("#table").contents("div").remove();
    if (!('rows' in object)) {
        var rows = [];
        Object.keys(object).forEach(function (key) {
            if (key != 'rows') {
                rows.push($('<div class="row on">' + object[key].name + '</div>'));
            }
        });
        object.rows = rows;
    }
    object.rows.forEach(function (row) {
        $('#table').append(row);
    });
}

这使得行代表一个团队。当用户在浏览器会话期间查看不同的团队时,这些行将保留并突出显示颜色。

这是我的 HTML:

<div id="displayObject1">
    <span>Display object 1</span>
</div>
<div><hr></div>
<div id="displayObject2">
    <span>Display object 2</span>
</div>
<div id="table">
</div>

还有一些 CSS 来显示哪些列表项是 "on" 和 "off"。

.on {
  background-color: green;
}
.off {
  background-color: red;
}

页面如何记住颜色突出显示?

您可以使用以下方法在 localStorage 中为每个选项设置一个标志:

localStorage.setItem('item1',true) //set the value to the checkbox's value

并使用以下方式访问它:

flagValue = localStorage.item1

一旦文档准备好相应地设置复选框的初始值,就可以在您的代码中类似地使用这些值

如果您想使用 local storage 使团队列表的状态在浏览器会话中保持不变,您必须维护状态的逻辑表示,并在状态发生变化时将其保存为字符串。

JSON.stringify 允许您在 JSON 字符串中编码 JavaScript 对象。例如,每当您修改名为 pageState:

的全局对象时,您都可以调用如下函数
function savePageState() {
  localStorage.setItem('pageState', JSON.stringify(pageState));
}

要在页面加载时检索页面状态,您可以这样做:

pageState = JSON.parse(localStorage.getItem('pageState'));
if (pageState === null) {
  pageState = {
    teams: teams
  };
  savePageState();
} else {
  teams = pageState.teams;
}

如果 pageState 在之前的会话中没有保存,现在创建并保存到本地存储。否则,我们会参考 pageState 以获取可用于恢复团队列表以前外观的数据。

此代码示例假设全局对象 teams 包含与页面状态相关的信息。您可以向页面状态对象添加更多属性以存储更多信息。例如,要记住当前显示的是哪支球队,您可以这样做:

pageState.showTeam = teamName;

那你可以在初始化页面内容的时候参考一下pageState.showTeam,大概是这样的:

if (teamName == pageState.showTeam) {
  showTeam(teamName);
  $(label).addClass('selected');
}

我制作了一个页面来演示这种方法。我不能将它作为一个片段包含在我的答案中,因为 localStorage 是沙盒,但你可以在这里访问该页面:

http://michaellaszlo.com/so/click-rows/

我已重新组织您的团队数据以启用动态页面初始化。现在每个团队对象都包含一组人员对象。

当用户点击团队成员的姓名时,CSS class selected 在 HTML 元素上切换,相应的人员对象通过切换更新它的 selected 属性:

function memberClick() {
  $(this).toggleClass('selected');
  this.person.selected = (this.person.selected ? false : true);
  savePageState();
};

showTeam 函数在构建其 HTML 表示时检查一个人的 selected 属性,并添加 CSS class selected 如果合适的话。这使得恢复上次会话的页面视觉外观成为可能。