Question

我为我的网站创建了一个面板div，当我们点击按钮时会滑出页面，当我们再次点击时会再次显示。

HTML 很简单，只有带按钮的面板可以显示/隐藏它。

<div id="panel">
    <div id="close"></div>
</div>

并且我的脚本，但存储无法正常工作：

function storePanel(right){
    var panelData = localStorage.getItem('panel');
    if (panelData!=undefined)
       panelData=JSON.parse(panelData);
    else
       panelData={"right":"24px"};// a starting value
    panelData["top"]=top;
    panelData["right"]=right;
    localStorage.setItem('panel', JSON.stringify(panelData));
}



// hide/show panel

document.getElementById('close').onclick = function() {
    var panel = document.getElementById("panel");
    var right = panel.style.right;
    var icon = document.getElementById("icone");
    if (right == "24px") {
        right = "-200px";
    }
    else {
        right = "24px";
    }
    panel.style.right = right;
    storePanel(right);
};

这是jsfiddle

Answer 1

由于盲目使用javascript短号，你可能会遇到问题，例如在“if”语句中避免使用大括号。

function storePanel(right){
    var panelData = localStorage.getItem('panel');
    if (panelData) {
       panelData=JSON.parse(panelData);
    } else {
       panelData={
          "right": right || "24px", //will assign 24px if right is not set.
          "top": top
       };
    }
    localStorage.setItem('panel', panelData);
}

谨慎使用JSON.stringify，因为它可能会对对象的引号进行双重编码，从而使其无效。

Answer 2

您的storePanel功能不正确。首先，如果面板是否正确，为什么要使用对象来存储？即使您最终将其更改为面板可以位于多个位置，您只需要一个数字 - 为什么要存储panelData？（这只是一个简化）。此外，您正确存储了值，但从未检索它以更改页面加载时的面板。您完成的代码应如下所示（简化）：

// Note: I used a variable to keep track of whether the div was to the right or not
var isRight = true;

function storePanel(right) {
    // Simple
    localStorage.setItem('panel.right', right);
}

function updatePanel() {
    var panel = document.getElementById("panel");
    var right;
    if (isRight) {
        right = "-200px";
    }
    else {
        right = "24px";
    }
    panel.style.right = right;
    isRight = !isRight;
    storePanel(isRight);
}

// When the page loads, show or hide panel

isRight = localStorage.getItem("panel.right") == "false";

updatePanel();


// hide/show panel

document.getElementById('close').onclick = function() {
    // var icon = document.getElementById("icone");
    updatePanel();
};

http://jsfiddle.net/prankol57/YtM7y/

在localStorage中保存菜单位置

2 个答案: