在localStorage中保存菜单位置

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);
}; 

Answer 1

您的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/

Answer 2

你可能会遇到一些问题，因为盲目地使用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。节省字符串化，因为它可能对对象的引号进行双重编码，从而使其无效。