刷新页面时保存用户的选择
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
如果合适的话。这使得恢复上次会话的页面视觉外观成为可能。
我目前有一个页面显示不同团队的数据。
我有一些数据,用户可以单击这些数据使其成为 "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
如果合适的话。这使得恢复上次会话的页面视觉外观成为可能。