javascript - 如何在本地存储中存储字体大小

Question

我为用户创建了一个简单的调整字体大小的方法，但在将其存储在本地存储中时遇到问题，以便下次用户刷新页面或重新访问时，它将设置为所需的字体大小。目前我只有一个页面可以工作，当我离开它时，所有页面都会被重置。 https://jsfiddle.net/v77z0pzd/2/

$(document).ready(function () {

    var size = localStorage.getItem('size');

//min font size
var min=9;  

//max font size
var max=16; 

//grab the default font size
var reset = $('p').css('fontSize'); 

//font resize these elements
var elm = $('p.intro, p.ending');  

//set the default font size and remove px from the value
var size = str_replace(reset, 'px', ''); 

//Increase font size
$('a.fontSizePlus').click(function() {

    //if the font size is lower or equal than the max value
    if (size<=max) {

        //increase the size
        size++;

        //set the font size
        elm.css({'fontSize' : size});
        localStorage.setItem('size', size);
    }

    //cancel a click event
    return false;   

});

$('a.fontSizeMinus').click(function() {

    //if the font size is greater or equal than min value
    if (size>=min) {

        //decrease the size
        size--;

        //set the font size
        elm.css({'fontSize' : size});
    }

    //cancel a click event
    return false;   

});

//Reset the font size
$('a.fontReset').click(function () {

    //set the default font size 
     elm.css({'fontSize' : reset});     
});});

我应该在哪里放置 localStorage。

Answer 1

即使设置了 size 的 localStorage 键，您的 fiddle 也不起作用，这只是因为您没有在重新加载时设置存储的大小 - 事实上，您是用这一行覆盖它:

var size = str_replace(reset, 'px', ''); 

你的策略应该如下——我重用了你的代码，但稍微重新安排了一下:

1. 检测默认字体大小
2. 定义可以更改字体大小的元素
3. 从 localStorage 获取size(如果存在):
   • 如果是，请将元素设置为存储的字体大小
   • 如果没有，则恢复为默认大小

通过检查 size 是否为真，然后您可以使用它来设置页面重新加载时的字体大小:

// Grab the default font size
var reset = $('p').css('fontSize');

// Font resize these elements
var elm = $('p.intro, p.ending');

// Retrieve stored size from localStorage
var size = localStorage.getItem('size');
if (size) {
  // Yes, we found it
  elm.css('font-size', size + 'px');
} else {
  // No, it's not defined/stored
  // Set the default font size and remove px from the value
  size = str_replace(reset, 'px', '');
}

请参阅此处的工作 fiddle :https://jsfiddle.net/teddyrised/v77z0pzd/6/