Store the current CSS settings in local storage

Question

I have a code for font change in my application as below -

HTML -

<button onclick="incdec(1)"></button>
<button onclick="incdec(-1)"></button>
<p id="element1>Element 1 has font size 12px</p>
<p id="element2>Element 2 has font size 14px</p>

JS -

var items = [{
    "el": "#element1",
    "maxSize": 14,
    "minSize": 12
}, {
    "el": "#element2",
    "maxSize": 16,
    "minSize": 14
}]
var incdec = function(dir) {
    items.forEach(function(item) {
        size(dir, item)
    });
};
var size = function(dir, item) {
    var el = document.querySelector(item.el);
    var max = item.maxSize;
    var min = item.minSize;
    console.log(dir, min, max)
    var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
    var fontSize = parseFloat(style);
    if (dir === 1 && fontSize < max) {
        el.style.fontSize = (fontSize + 1) + 'px';
        console.log("incSize", el.tagName, el.style.fontSize)
    } else if (dir === -1 && fontSize > min) {
        el.style.fontSize = (fontSize - 1) + 'px';
        console.log("decSize", el.tagName, el.style.fontSize)
    }

}

I want that the selected font size should remain on reload. How can I achieve this using local storage? Please note that the current(set/default) font for both the elements is different so different values have to be stored in the local storage for each. I need help with the logic.

Thanks!!!

Is there a specific issue you are having? I see in your code example you appear to be getting the font-size-- are you just wondering how to place it into and retrieve it from `localStorage`? The [MDN `localStorage` docs] are pretty straight-forward. — Alexander Nied, Jul 27 '20 at 14:57
If your question is simply "how to put something in local storage" there are several posts already dealing with that, and this could probably be closed as a duplicate: [[1](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage)] [[2](https://stackoverflow.com/questions/12162786/adding-new-objects-to-localstorage?noredirect=1&lq=1)] [[3](https://stackoverflow.com/questions/51303211/how-to-add-item-to-local-storage/51303368)] — Alexander Nied, Jul 27 '20 at 15:10

score 1 · Answer 1 · edited Nov 13 '20 at 08:34

If you want to use localStorage to store and retrieve the data, you can do like this.

To store a value with a key

localStorage.setItem('key', 'value');

in your use case you can store like

localStorage.setItem('font-size', 'value');

To retrieve a value by key

localStorage.getItem('key');

To remove the item at all from storage

localStorage.removeItem('key');

here is the doc you can refer

raddevus · Accepted Answer · 2020-07-28T15:48:13.803

Here's a small working example you can see in action : https://jsfiddle.net/raddevus/nmh3jz7t/20/

Here's the simple code.

    // this next line is just a quick way of showing initialization 
// which should be moved to your onload event so when page loads 
// your localStorage values are read in If they exist)
var fontSize = 12;
initializeValue()

function initializeValue(){
    fontSize = Number(localStorage.getItem("fontSize"));
  if (fontSize <=0 ){
     fontSize = 12;
  }
  
    document.querySelector("#output").value = fontSize;
}

function incdec(value){
    fontSize += value;  // 
  document.querySelector("#output").value = fontSize;
    localStorage.setItem("fontSize",fontSize);
}

This applies SoC (Separation of Concerns) so that you simply track the fontSize and save it in your localStorage. Later you can get the value (localStorage.getItem("fontSize") any time you want and use the value in your code that updates the UI.

Summary

The code sets the value to 12 the first time. Then each time the user clicks the + or - button it updates the value and saves it to local storage.

Then when the page is reloaded, it reloads the saved value (localStorage) from localStorage so the old value is "remembered".

Update: Final Code

Here's the final code that incorporates your code:

https://jsfiddle.net/raddevus/h0yw4gct/56/

It's a quick solution. You should really look the code over and pull some of those things apart so it is cleaner.

thank you for your solution. But, could you please apply the concept in the existing code? I understand the logic of using local storage but I am not able to put things together. Thankss!! — Itika Bandta, Jul 28 '20 at 03:51
@ItikaBandta I updated the code to reflect your original code. See https://jsfiddle.net/raddevus/h0yw4gct/56/ and mark as solution when you test to see it works. — raddevus, Jul 28 '20 at 15:48

Store the current CSS settings in local storage

2 Answers2