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

即使设置了localStorage size密钥只是因为你没有在重新加载时设置存储的大小，你的小提琴也不起作用 - 事实上，你用它覆盖了它行：

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

你的策略应该如下 - 我重用了你的代码，但重新安排了一下：

检测默认字体大小
定义可以更改字体大小的元素
从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', '');
}

请在此处查看工作小提琴：https://jsfiddle.net/teddyrised/v77z0pzd/6/

Answer 2

相关差异

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

var size = localStorage.getItem('size') || $('p').css('fontSize');

在elm.css({'fontSize': size});

之后设置var elm = $('p.intro, p.ending');

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

减少字体大小时添加丢失的localStorage.setItem('size', size);。

完整档案

<html>
  <head>
    <script
        src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
        integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
        crossorigin="anonymous"></script>
    <style>
      body {
        font-size:12px;
        font-family:arial;
      }

      a {
        color:#c00;
        text-decoration:none;
      }

      a:hover {
        color:#f00;
        text-decoration:underline;
      }
    </style>
  </head>
    <body>

    <a href="#" class="fontSizePlus">A+</a> |
    <a href="#" class="fontReset">Reset</a> |
    <a href="#" class="fontSizeMinus">A-</a>

    <p class="intro">Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam.</p> 

    <p>Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit.</p>

    <p>Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum at risus augue. Sed non semper dolor. Sed fringilla consequat velit a porta. Pellentesque sed lectus pharetra ipsum ultricies commodo non sit amet velit. Suspendisse volutpat lobortis ipsum, in scelerisque nisi iaculis a. Duis pulvinar lacinia commodo. Integer in lorem id nibh luctus aliquam. Sed elementum, est ac sagittis porttitor, neque metus ultricies ante, in accumsan massa nisl non metus. Vivamus sagittis quam a lacus dictum tempor. Nullam in semper ipsum.</p>

    <p class="ending">Cras a est id massa malesuada tincidunt. Etiam a urna tellus. Ut rutrum vehicula dui, eu cursus magna tincidunt pretium. Donec malesuada accumsan quam, et commodo orci viverra et. Integer tincidunt sagittis lectus. Mauris ac ligula quis orci auctor tincidunt. Suspendisse odio justo, varius id posuere sit amet, iaculis sit amet orci. Suspendisse potenti. Suspendisse potenti. Aliquam erat volutpat. Sed posuere dignissim odio, nec cursus odio mollis et. Praesent cursus, orci ut dictum.</p>

    <script>
    $(document).ready(function () {

      var size = localStorage.getItem('size') || $('p').css('fontSize');

            //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');
      elm.css({'fontSize': size});

            //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});
                            localStorage.setItem('size', size);
                    }

                    //cancel a click event
                    return false;

            });

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

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


    });

    //A string replace function
    function str_replace(haystack, needle, replacement) {
            var temp = haystack.split(needle);
            return temp.join(replacement);
    }
    </script>
    </body>

</html>

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

2 个答案: