Question

因此，我编写了一些代码，其中显示/隐藏文本并在您单击后更改。因此，如果您隐藏文本链接变为：显示文本和其他方式。现在我需要将其保存在webstorage中，这样如果您重新加载页面，文本将保持隐藏或显示。我对JavaScript和HTML一般都不熟悉。

我的代码的一部分：

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <div id='link'><a href='javascript:clo_fun()'>Always hide</a></div>
  		<section class="aufgabenstellung" id="Aufgabenstellung1a">
          text
      </section>
</body>
<script>

function open_fun() {
  document.getElementById('link').innerHTML = "<a href='javascript:clo_fun()'>Always hide</a>"
  $(".aufgabenstellung").show();
}

function clo_fun() {
  document.getElementById('link').innerHTML = "<a href='javascript:open_fun()'>Always show</a>"
  $(".aufgabenstellung").hide();
}
</script>
</html>

＆＃13;

我的尝试看起来像这样：

＆＃13;

<script type="text/javascript">
 
 function Auf(open){
    localStorage.setItem('testObject', JSON.stringify("display"));
    var e = document.getElementById(open);
    e.style.display = "";
   }
 
   function Zu(close){
   localStorage.setItem('testObject', JSON.stringify("display=none"));
   var e = document.getElementById(close);
   e.style.display = "none";
  
  }
 
	function testStorage(){
     var retrievedObject = localStorage.getItem('testObject');  
     //alert(retrievedObject);
    
    	if( retrievedObject == "display" ) {
    	
        	Auf('containerid');
     	}
    }
   
testStorage();

</script>
     
  
     <a href="javascript:Auf('containerid')">Open</a>

     <a href="javascript:Zu('containerid')">Close</a>
     
      

<div id="containerid" style="display=none">
test </div>

＆＃13;

我尝试了一堆，并了解localstorage的工作原理，但我似乎无法使用我的代码示例。与使用setItem和getItem保存数据一样，似乎并不难，但出于某种原因，我无法使其发挥作用。

Answer 1

你做错了你应该做的是

1）将点击事件绑定到链接，然后将toggle()面板的状态绑定，而不是尝试删除锚点，并使用onclick属性添加另一个锚点，以及{ {1}}小组会在toggle变量localStorage中保存小组的状态，您将使用伪选择器: visible Selector。

2）在每次加载页面时，您应该检查panel_state中是否有任何名称为localStorage的变量，如果存在则应检查状态是什么根据保存的值保存并显示或隐藏div。

`localStorage`

保存变量使用

panel_state

获取变量

localStorage.setItem('myCat', 'Tom');

删除变量use

var cat = localStorage.getItem("myCat");

以下是您的基本代码，执行您希望的功能，您可以根据需要对其进行修改，它不会在SO片段中运行，因此我添加了Fiddle让您看到它正常工作，请尝试要通过单击链接隐藏面板，然后刷新页面，您将看到在刷新后它仍然会保持面板隐藏，如果您再次通过单击链接切换面板并再次刷新页面，它将使面板保持可见。 / p>

将您的javascript更改为以下

localStorage.removeItem("myCat");

将您的$(document).ready(function() { //get the current state var panel_state = localStorage.getItem('panel_state'); //check if not null if (panel_state !== null) { //check if previously saved state is visible if (panel_state==1) { //show the panel on page load $("#Aufgabenstellung1a").show(); } else { //hide the panel on page load $("#Aufgabenstellung1a").hide(); } } $("#link").on('click', function() { $("#Aufgabenstellung1a").toggle(); localStorage.setItem('panel_state', $("#Aufgabenstellung1a:visible").length); }); });更改为以下

HTML

将set preference保存到localstorage中

1 个答案:

`localStorage`