javascript - 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

发生的事情是您在当前页面中存储值并修复样式，但是当页面再次加载时您没有执行相同的操作。

这通常在用 jQuery 编写的 onReady 中完成，如下所示:$(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");
});