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

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

我有一些数据,用户可以点击这些数据使其处于“开启”或“关闭”状态,每个数据都显示不同的图标.它基本上就像一个清单,只是没有物理复选框.

我想记住哪些“复选框”已被勾选,即使用户刷新页面或关闭浏览器并稍后返回.

我听说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($('


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


还有一些CSS显示哪些列表项是“开”和“关”.

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

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


最佳答案
如果要使用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以获取可用于恢复团队列表先前外观的数据.
此代码示例的工作原理是全局对象团队包含与页面状态相关的信息.您可以向页面状态对象添加更多属性以存储更多信息.例如,要记住当前显示的是哪个团队,您可以执行以下操作：

pageState.showTeam = teamName;

然后你可以在初始化页面内容时咨询pageState.showTeam,也许是这样的：

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

我已经制作了一个演示这种方法的页面.我不能将其作为片段包含在我的答案中,因为localStorage是沙盒,但您可以在此处访问该页面：
http://michaellaszlo.com/so/click-rows/
我重新组织了您的团队数据以启用动态页面初始化.现在每个团队对象都包含一个人物对象数组.
当用户单击团队成员的名称时,将在HTML元素上切换所选的CSS类,并通过切换其选定的属性来更新相应的人员对象：

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

showTeam函数在构建其HTML表示时检查某人的选定属性,并在适当时添加所选的CSS类.这使得可以从上一个会话恢复页面的视觉外观.

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

相关文章