页面加载后在javascript中存储值？答案

【问题标题】：store value in javascript after page load?页面加载后在javascript中存储值？
【发布时间】：2017-02-05 11:05:12
【问题描述】：

$("#divid1").click(function(){
    $("#divid1").hide(); //want this to keep hidden after refresh
    $("#hideid1").hide(); //want this to keep hidden after refresh
    $("#id1").show(); //want this to keep showing after refresh
});

.hide{
    display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/img/done.png"  id="divid1" alt="divid1"/>
<img src="/img/schedule.png" height="12" width="12" id="hideid1" alt="hideid1" />
<div id="id1" class="hide"><img src="/img/done.png" height="12" width="12" alt="id1" /></div>

我试图在页面加载后显示图像，当 onclick();显示新图像并隐藏旧图像。但是，在页面刷新时它会重置。

请给我一个解决方法。

将不胜感激包含我的 ID 的工作代码！

【问题讨论】：

localStorage 可以提供解决方案
我不知道如何使用它@depperm
stackoverflow.com/questions/16206322/…
Global Variable usage on page reload的可能重复

标签： javascript jquery html css cookies

【解决方案1】：

试试localStorage。

设置项目

localStorage.setItem('selectedId', 100);

获取项目

localStorage.getItem('selectedId');

最后，删除项目

localStorage.removeItem("selectedId");

示例

$(document).ready(function(){
    //Function for events
    function dummyFunction(){
        $("#divid1").hide(); //want this to keep hidden after refresh
        $("#hideid1").hide(); //want this to keep hidden after refresh
        $("#id1").show(); //want this to keep showing after refresh
    }
    //Check localStorage value
    if(localStorage.setItem('itemClicked') == 1)
    {
       dummyFunction();
    }
    //Div click event
    $("#divid1").click(function(){
        dummyFunction();
        //Set localStorage
        localStorage.setItem('itemClicked', 1);
    });
});

【讨论】：

告诉我如何在编码中实现它
我已经更新了我的答案，请检查如何使用 localStorage。如果您仍然发现任何问题，请告诉我。
将重复的代码移动到一个方法中，这样它就更干净了。你可能想说明代码需要放在正文的底部或准备好使用文档
哦，我明白了，@monemacu 我的答案是第一个在董事会上，但你还是选择了另一个，不公平的工作。
@monemacu 没问题的人，如果我的回答对您有所帮助，我很高兴。我在这里只是为了提供帮助，+rewards 是加分项:) 这总是鼓励特定的人提供越来越多的帮助......

【解决方案2】：

您可以使用 cookie 来调用，就像用户点击页面加载一样。

除此之外，你有点不走运。页面刷新是为了重置页面的javascript。

【讨论】：

【解决方案3】：

查看Example。这应该足够清楚了。

$("#divid1").click(function(){
   $("#divid1").hide(); //want this to keep hidden after refresh
   $("#hideid1").hide(); //want this to keep hidden after refresh
   $("#id1").show(); //want this to keep showing after refresh
   localStorage.setItem('hidden', true);
});

$(function() {
   // if localStorage has hidden as true, hide the div and show other
   if(localStorage.getItem('hidden')){
     $("#divid1").hide(); 
     $("#hideid1").hide(); 
     $("#id1").show();
   }
});

【讨论】：

thanx so mch 就像一个魅力.. 还有如何重置存储.. 例如 clearstorage 不起作用！
没问题，能提供帮助总是很愉快：] 嗯，奇怪的是它对我有用。如果你不点击就重新加载，div 是隐藏的，但是当你点击按钮（清除存储）并重新加载时，div 应该会回来。
@monemacu 您可以使用localStorage.removeItem("name of localStorage variable you want to remove"); 从localStorage 中删除。
+1 @Loading.. 是的，我忘了说，使用localStorage.clear() 可以清除有时您可能不想这样做的 WHOLE localStorage。在这种情况下，请改用removeItem()。
是的，它在示例中有效，但不适用于我的本地主机！代码就像魅力一样工作，只有明确的本地存储有问题

【解决方案4】：

希望以下代码对您有所帮助。只需将代码放入加载事件并解决问题即可。

$(window).load(function(){
    $("#divid1").hide(); 
    $("#hideid1").hide();
    $("#id1").show(); 
});

.hide{
    display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/img/done.png"  id="divid1" alt="divid1"/>
<img src="/img/schedule.png" height="12" width="12" id="hideid1" alt="hideid1" />
<div id="id1" class="hide"><img src="/img/done.png" height="12" width="12" alt="id1" /></div>

【讨论】：