gpt4 book ai didi

javascript - 编写body元素以包含css类时如何访问浏览器本地存储

转载 作者:行者123 更新时间:2023-11-27 23:36:49 25 4
gpt4 key购买 nike

我有一个左侧导航菜单,用户可以展开和折叠它。为了在页面刷新之间保持菜单状态(展开或折叠),每当用户单击展开/折叠按钮并查看该变量以将其包含在 body 元素的类属性中时,我都会设置一个 TempData 变量。这工作正常,但我想不再使用 TempData 以帮助我的应用程序变得更加无状态。

我通过写入浏览器本地存储并在文档加载时从中读取来实现类似的功能。这个问题是页面总是闪烁,因为它会首先以扩展模式加载页面(没有 body 标签中的类),然后在 javascript 运行以添加所需的类时折叠菜单。每次加载页面时,这都会造成非常烦人的用户体验。

有没有办法让本地存储直接读入类属性,或者有不同的方法来实现这一点?请注意,我想尽可能避免从数据库中写入/读取,以避免在每次页面加载时调用数据库。

这是我现在可以使用的,但包括 TempData 变量...

_布局页面

<body class="hold-transition fixed sidebar-mini @TempData.Peek("MenuState")">

单击菜单按钮时的 JQuery/JavaScript

$('#left-menu-toggle').on('click', function () {
var menuState = '';
if ($('body').hasClass('sidebar-collapse') === false) {
menuState = 'sidebar-collapse';
}
$.post('/Header/ToggleMenu', { state: menuState });
});

Controller 操作

[HttpPost]
public IActionResult ToggleMenu(string state)
{
TempData["MenuState"] = state;
return Ok();
}

这是我尝试替换 TempData 变量的内容...

_布局页面

<body class="hold-transition fixed sidebar-mini">

单击菜单按钮时的 JQuery/JavaScript

$('#left-menu-toggle').on('click', function () {
if ($('body').hasClass('sidebar-collapse')) {
localStorage.setItem('menuState', 'sidebar-collapse');
}
else {
localStorage.removeItem('menuState');
}
});

页面加载时的 JQuery/JavaScript - 这会导致菜单始终以扩展模式加载,然后在需要时折叠,这种转换对用户来说是令人讨厌的可见

$(document).ready(function () {
if (localStorage.getItem('menuState') !== null) {
$('body').addClass('sidebar-collapse');
}
else {
$('body').removeClass('sidebar-collapse');
}
});

最佳答案

我设法通过如下设置和删除 cookie 来解决此问题...

_布局

@inject Microsoft.AspNetCore.Http.IHttpContextAccessor HttpContextAccessor
@{
HttpContextAccessor.HttpContext.Request.Cookies.TryGetValue("MenuState", out string menuState);
}

...

<body class="hold-transition fixed sidebar-mini @menuState">

...

Controller

[HttpPost]
public IActionResult ToggleMenu(string menuState)
{
if (menuState != null)
{
Response.Cookies.Append("MenuState", menuState);
}
else
{
Response.Cookies.Delete("MenuState");
}
return Ok();
}

关于javascript - 编写body元素以包含css类时如何访问浏览器本地存储,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57212143/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com