如何在本地存儲中存儲字體大小

我已經爲用戶創建了一個簡單的調整大小的字體大小，但有問題將其存儲在本地存儲中，以便下次用戶刷新頁面或重新訪問它時將設置爲期望的字體大小。目前我只有一個頁面才能工作，當我離開它時，它全部被重置。 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。

來源

2016-12-16 computer

在修改字體大小的每一個事件處理程序。 – cezarypiatek

請注意，您通過以下命令覆蓋從'localStorage'得到的大小：'var size = str_replace（reset，'px'，''）;'如果要存儲默認大小，請選擇另一個變量名稱 –

你撥弄即使當size一個localStorage鍵設置不工作很簡單，因爲你是不是在設置存儲大小重裝，事實上，你用這條線覆蓋它：

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

你的戰略應該是爲跟蹤我已經重用你的代碼，但重新被安排那麼一點點：

檢測默認字體大小
定義元素，其字體大小可以改變
從localStorage的獲取size，如果存在：
- 如果是這樣，將元素存儲字體大小
- 如果不能，回落到默認大小

通過檢查size是truthy，那麼您可以使用它來設置頁面重新加載時的字體大小：

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

來源

2016-12-16 20:12:59 Terry

的相關差異

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>

來源

2016-12-16 20:22:35 manonthemat

如何在本地存儲中存儲字體大小

回答

相關問題