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

概述我目前有一个显示不同团队数据的页面.我有一些数据,用户可以点击这些数据使其处于“开启”或“关闭”状态,每个数据都显示不同的图标.它基本上就像一个清单,只是没有物理复选框.我想记住哪些“复选框”已被勾选,即使用户刷新页面或关闭浏览器并稍后返回.我听说localStorage是一个不错的选择,但我不确定如何在像我这样的情况下使用它.目前我有这个代码：team1

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

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

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

我听说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 – 刷新页面时保存用户的选择全部内容，希望文章能够帮你解决javascript – 刷新页面时保存用户的选择所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。