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

Posted 2023-03-05

【中文标题】刷新页面时保存用户的选择

【英文标题】：Saving user's selection when refreshing the page

【发布时间】：2016-03-31 06:36:40

【问题描述】：

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

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

我想记住哪些“复选框”已被勾选，即使在用户刷新页面或关闭浏览器并稍后返回时也是如此。

我听说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 
  background-color: green;

.off 
  background-color: red;

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

【问题讨论】：

你也有你的标记吗？然后我可以在 JS Fiddle 中运行它，然后看看让它工作。

糟糕！是的，补充说，我的错。

cookies、localstorage、服务器端保存通过onbeforeunload或beforeunload这里有很多选项。

【参考方案1】：

如果您想使用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');

我制作了一个页面来演示这种方法。我无法将它作为 sn-p 包含在我的答案中，因为 localStorage 已被沙盒化，但您可以在此处访问该页面：

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

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

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

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

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

【讨论】：

事实上，我一直在努力让它与我的代码一起使用。如果可以的话，我会向您发送一封更深入的电子邮件。

我没有时间进行一对一辅导。如果您只需要修复几行，我也许可以做到。

【参考方案2】：

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

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

并使用以下方式访问它：

flagValue = localStorage.item1

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