Question

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

我有一些用户可以点击的数据，使其成为＆＃34; on＆＃34;或者＆＃34;关闭＆＃34;状态，每个都显示不同的图标。它基本上就像一张清单，只是没有物理复选框。

我想记住哪些＆＃34;复选框＆＃34;已被勾选，即使用户刷新页面或关闭浏览器并稍后返回。

我听说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显示哪些列表项是＆＃34; on＆＃34;和＆＃34;关＆＃34;。

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

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

Answer 1

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

JSON.stringify允许您在JSON字符串中编码JavaScript对象。例如，只要修改名为features1 = K * features1 features2 = K * features2的全局对象：

，就可以调用类似下面的函数

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'); }是沙箱，但您可以在此处访问该页面：

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

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

当用户点击团队成员的名字时，将在HTML元素上切换CSS类localStorage，并通过切换其selected属性来更新相应的人物对象：

selected

function memberClick() { $(this).toggleClass('selected'); this.person.selected = (this.person.selected ? false : true); savePageState(); };函数在构建其HTML表示时检查某个人的showTeam属性，并在适当时添加CSS类selected。这使得可以从上一个会话恢复页面的视觉外观。

Answer 2

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

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

并使用以下方式访问它：

flagValue = localStorage.item1

在文档准备好相应地设置复选框的初始值时，在代码中类似地使用这些值

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

2 个答案: