HTML5 & jQuery LocalStorage

Question

Это мой первый переход на localStorage и его не происходит. У меня есть код jQuery ниже, чтобы увеличить размер шрифта страницы, если выбран элемент. Проблема в том, что когда вы переходите на новую страницу, она возвращается обратно. Я пробовал разные варианты, но я застрял. Любая помощь приветствуется.

$textSize1.click(function() { 
    $("body").css("font-size", "10px"); 
    localStorage.setItem("$textSize1", $textSize1); 
}); 
$textSize2.click(function() { 
    $("body").css("font-size", "20px"); 
    localStorage.setItem("$textSize2", $textSize2); 
}); 
$textSize3.click(function() { 
    $("body").css("font-size", "30px"); 
    localStorage.setItem("$textSize3", $textSize3); 
}); 

localStorage.getItem("$textSize1"); 
$textSize1.click(function() { 
    $("body").css("font-size", "10px"); 
    localStorage.setItem("$textSize1", $textSize1); 
}); 
$textSize2.click(function() { 
    $("body").css("font-size", "20px"); 
    localStorage.setItem("$textSize2", $textSize2); 
}); 
$textSize3.click(function() { 
    $("body").css("font-size", "30px"); 
    localStorage.setItem("$textSize3", $textSize3); 
}); 

localStorage.getItem("$textSize1"); 

Answer 1

Что происходит, что вы храните значения и фиксации стиля на текущей странице, но вы не делаете ту же операцию при загрузке страницы снова.

Это обычно делается в onReady написано в JQuery, как это: $(document).ready(function() {...});

Только чтение значение будет не слишком много. Вам нужно использовать его!

Я думаю, что я захватил то, что вы пытались сделать и переписана код:

var defaultFontSize = "10px"; 

$(document).ready(function(){ 
    var fontSize = localStorage.getItem("fontSize") || defaultFontSize; 
    $("body").css("font-size", fontSize); 
}) 

$fontSize1.click(function() { 
    $("body").css("font-size", "10px"); 
    localStorage.setItem("fontSize", "10px"); 
}); 
$fontSize2.click(function() { 
    $("body").css("font-size", "20px"); 
    localStorage.setItem("fontSize", "20px"); 
}); 
$fontSize3.click(function() { 
    $("body").css("font-size", "30px"); 
    localStorage.setItem("fontSize", "30px"); 
});