Question

我有一个功能，允许用户单击按钮将div推到侧面。然后，用户可以再次按下相同的按钮将div推回其原始位置。

但是，如果用户决定将div推开然后刷新页面，则div将返回到其原始位置。这是我的问题。我希望div即使在刷新页面后也能保持推开状态。

然后我搜索了stackoverflow以查看此问题是否已经找到答案，而我最接近的发现是该帖子：stackoverflow post

从那篇文章看来，localStorage可以解决我的问题，但是我尽了最大的能力在脚本中实现了localStorage，但是没有任何运气。如果用户按下div然后刷新页面，则div将返回其原始位置。

这是我尝试localStorage的脚本。

$(function() {

if (localStorage) { //if local storage

        if (!localStorage.getItem('visited')) { // if not site is visited before
          alert("localStorage is working");

        }
    } else { //if not local storage use cookies or just show element in old browsers
      alert("localStorage is working");

    }


$('#hide').click(function(){
    if($('#profile-section').attr("trigger")==="0"){
        $('#profile-section').animate({"left":"80%"},700);
        $('#profile-section').attr("trigger","1");
        localStorage.setItem('visited', true); //set flag, site now visited and element hidden


    }
    else{
        $('#profile-section').animate({"left":"95%"},700);
        $('#profile-section').attr("trigger","0");
        localStorage.setItem('visited', false); //set flag, site now visited and element hidden

    }
});
});

Answer 1

更改为：

if (localStorage) { //if local storage

    if (JSON.parse(localStorage.getItem('visited'))) {
      alert("localStorage is working");
    }
} else { //if not local storage use cookies or just show element in old browsers
  alert("localStorage is working");
}

Answer 2

您可以尝试

if (localStorage.getItem('visited') === 'true') { // if not site is visited before
          alert("localStorage is working");
}

否则，您的表达式始终返回false。

编辑

替换

  if (!localStorage.getItem('visited')) { // if not site is visited before
          alert("localStorage is working");

        }

与

if (localStorage.getItem('visited') === 'true') { // if not site is visited before
          alert("localStorage is working");
}

或上面带有JSON.parse的答案。

使localStorage与我的隐藏/显示功能一起使用时出现问题

2 个答案: