javascript - 如何让我的滑动条通过刷新保持位置

Question

我的滑动条有问题，因为当我重新加载页面时，它会转到他最初拥有的位置。我需要它在 php 或其他东西的 session 中存储一些值，但我找不到任何方法让它工作，如果滑动条在刷新时关闭我需要它在页面加载时关闭，但如果滑动条之前打开刷新 我需要在页面加载时打开 sldiebar。

PHP:

<div id="sidebar" style="transform: translate(<?php
if($_SESSION['slide'] == 0) {
    echo '-100';
} else if($slide == 1) {
    echo '0';
} else {
    $_SESSION['slide'] = 0;
}
?>%,0);">

CSS:

#sidebar {
position:fixed;
width:25%;
min-width: 350px;
height:100%;
left: 0px;
background-color: #F2F2F2;
margin-top: 0px;
padding-top:40px;
overflow:hidden;

font-family:  "helveticaneue", "helvetica-neue", "helvetica", "lucida grande", "arial";
color: 444444;
}

JQuery:

$(document).ready(function() {
var state = true;
$('#sidebar_button').click(function() {
    if(state) {
        $('#sidebar').css('transform', 'translate(0,0)');
        state = false;
    }
    else {
        $('#sidebar').css('transform', 'translate(-100%,0)');
        state = true;
      }
   });
});

我需要一些巧妙的方法来解决它，因为我需要在单击 <div id="sidebar_button"> 时更改 session .

Answer 1

我的建议是使用 cookie 或 localStorage。 LocalStorage 是首选，并且更易于使用，但首先检查浏览器支持以确保它满足您的要求。这是一个例子:

$(document).ready(function() {
var state = localStorage.getItem('sidebarState') === "on";

function setState() {
    if(state) {
        $('#sidebar').css('transform', 'translate(0,0)');
        state = false;
    }
    else {
        $('#sidebar').css('transform', 'translate(-100%,0)');
        state = true;
   }
   localStorage.setItem('sidebarState',state ? "on" : "off");
}

$('#sidebar_button').click(setState);

setState();

});