当页面刷新时，我希望我的设置保持不变(When the page refreshes, I want my settings to stay the same)

当页面刷新时，我希望我的设置保持不变(When the page refreshes, I want my settings to stay the same)

大家好，我有一个设置框。 然后我点击这个框中的按钮，并作为sidebard css进行更改。 但是，刷新页面时，设置框中所做的更改将返回到初始状态。 我希望这些设置在刷新页面时保持不变。 我希望我充分解释。 您能否查看下面的JQuery代码？ 谢谢大家。

$(".option-box a.one-part").click(function(){ $(".sidebar-element").removeClass("sidebar-element-multi-part"); $(".sidebar-element").addClass("sidebar-element-one-part"); $(".sidebar").addClass("sidebar-one-part"); return false }); $(".option-box a.multi-part").click(function(){ $(".sidebar-element").removeClass("sidebar-element-one-part"); $(".sidebar").removeClass("sidebar-one-part"); $(".sidebar-element").addClass("sidebar-element-multi-part"); return false });

我的选项框HTML代码 `

<!-- Option Box --> <div class="option-box"> <a href="#" class="option-box-icon"><i class="fa fa-cog" aria-hidden="true"></i></a> <div class="option-box-title"><h3>SİDEBAR AYARLAR</h3></div><div class="clear"></div> <ul> <li><a class="one-part" href="#">Tek Parça</a></li> <div class="clear"></div> <li><a class="multi-part" href="#">Çoklu Parça</a></li> </ul> </div> <!-- #Option Box -->

我的边栏HTML代码

<!-- SideBar --> <div class="sidebar sidebar-one-part"> <!-- Sidebar Redea Banner --> <div class="sidebar-element"> <div class="banner-one"> <h2><i class="fa fa-window-maximize" aria-hidden="true"></i> Reklam Alanı</h2> <div class="sidebar-redea-300x250"> <h3>Reklam Alanı</h3> </div> </div> </div> <!-- #Sidebar Redea Banner -->

Everybody hi, I have a setting box. And I click on the buttons in this box and am making changes as sidebard css. However, when the page is refreshed, changes made in the setting box return to the initial state. I want these settings to remain the same when the page is refreshed. I hope I'm sufficiently explanatory. Would you please examine the JQuery code below? Thank you everybody.

$(".option-box a.one-part").click(function(){ $(".sidebar-element").removeClass("sidebar-element-multi-part"); $(".sidebar-element").addClass("sidebar-element-one-part"); $(".sidebar").addClass("sidebar-one-part"); return false }); $(".option-box a.multi-part").click(function(){ $(".sidebar-element").removeClass("sidebar-element-one-part"); $(".sidebar").removeClass("sidebar-one-part"); $(".sidebar-element").addClass("sidebar-element-multi-part"); return false });

My Option Box Html Codes`

<!-- Option Box --> <div class="option-box"> <a href="#" class="option-box-icon"><i class="fa fa-cog" aria-hidden="true"></i></a> <div class="option-box-title"><h3>SİDEBAR AYARLAR</h3></div><div class="clear"></div> <ul> <li><a class="one-part" href="#">Tek Parça</a></li> <div class="clear"></div> <li><a class="multi-part" href="#">Çoklu Parça</a></li> </ul> </div> <!-- #Option Box -->

My Sidebar Html Codes

<!-- SideBar --> <div class="sidebar sidebar-one-part"> <!-- Sidebar Redea Banner --> <div class="sidebar-element"> <div class="banner-one"> <h2><i class="fa fa-window-maximize" aria-hidden="true"></i> Reklam Alanı</h2> <div class="sidebar-redea-300x250"> <h3>Reklam Alanı</h3> </div> </div> </div> <!-- #Sidebar Redea Banner -->

最满意答案

您可以使用本地存储。 W3学校（ HTML5存储 ）提供了一个很好的教程。

它像这样工作（一个简单的例子）。

// Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname");

You can use local storage. A good tutorial is available on W3 School (HTML5 Storage).

It works like this (a quick example).

// Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname");