CODEWITHSUNDEEP
javascript
Itika Bandta
Itika Bandta

Reputation: 163

Store the current CSS settings in local storage

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

Upvotes: 2

Views: 217

Answers (2)

TechnoTech
TechnoTech

Reputation: 799

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

Upvotes: 1

raddevus
raddevus

Reputation: 9077

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.

Upvotes: 1

Related Questions