HTML5 & jQuery LocalStorage

Question

This is my first go at localStorage and its not going. I have the jQuery code below to increase the page font size if an element is selected. Problem is when you go to a new page, it reverts back. I've tried some different variations but I am stuck. Any help is appreciated.

$textSize1.click(function() {
  $( "body" ).css("font-size", "10px");
  localStorage.setItem("$textSize1", $textSize1);
});
$textSize2.click(function() {
  $( "body" ).css("font-size", "20px");
  localStorage.setItem("$textSize2", $textSize2);
});
$textSize3.click(function() {
  $( "body" ).css("font-size", "30px");
  localStorage.setItem("$textSize3", $textSize3);
});

localStorage.getItem("$textSize1");
$textSize1.click(function() {
  $( "body" ).css("font-size", "10px");
  localStorage.setItem("$textSize1", $textSize1);
});
$textSize2.click(function() {
  $( "body" ).css("font-size", "20px");
  localStorage.setItem("$textSize2", $textSize2);
});
$textSize3.click(function() {
  $( "body" ).css("font-size", "30px");
  localStorage.setItem("$textSize3", $textSize3);
});

localStorage.getItem("$textSize1");

Why do you keep reassigning storeValue? What do you hope will be in that variable by the time you retrieve it? — Mike Cluck
– Mike Cluck, Commented Dec 10, 2015 at 17:51
localStorage isn't really for storing jQuery objects containing DOM elements — adeneo
– adeneo, Commented Dec 10, 2015 at 17:52
Where is the code that checks localStorage before you set it? You need to see what's in there before you can decide whether to overwrite it or not! — jered
– jered, Commented Dec 10, 2015 at 17:52
Localstorage is used to store string, you are trying to store a jq object?! And anyway, i really don't get the logic behind your code — A. Wolff
– A. Wolff, Commented Dec 10, 2015 at 17:52
Try "localStorage.getItem("$textSize1") to see if you actually get a value back. Not really sure what's going on with storeValue — Matti Price
– Matti Price, Commented Dec 10, 2015 at 17:54

Maxime Rouiller · Accepted Answer · 2015-12-10 18:03:20Z

What is happening is that you are storing the value and fixing the style in the current page but you are not doing the same operation when the page load again.

This is normally done in the onReady written in jQuery like this : $(document).ready(function() {...});

Just reading the value won't do much. You need to use it!

I think I've captured what you were trying to do and reimplemented your code:

var defaultFontSize = "10px";

$(document).ready(function(){
    var fontSize = localStorage.getItem("fontSize") || defaultFontSize;
    $( "body" ).css("font-size", fontSize);
})

$fontSize1.click(function() {
  $("body").css("font-size", "10px");
  localStorage.setItem("fontSize", "10px");
});
$fontSize2.click(function() {
  $("body").css("font-size", "20px");
  localStorage.setItem("fontSize", "20px");
});
$fontSize3.click(function() {
  $("body").css("font-size", "30px");
  localStorage.setItem("fontSize", "30px");
});

ive played around with it for 20 mins. i think i'll save the selection to the db instead. thanks all!
My personal opinion is that unless you want that setting to be long-lived across computers for the same user, localStorage is enough. The code I provided should make that work quite easily.

Collectives™ on Stack Overflow

HTML5 & jQuery LocalStorage

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related